homework/js/Project/project/src/components/post/card_post.js

import { url } from "../../App";
import { Link } from "react-router-dom";

import { Card, CardHeader, CardContent, CardActions, Avatar, IconButton, Typography, Box, Divider, TextField } from '@mui/material'
import { FavoriteBorderRounded, Send, ChatBubbleOutline, TurnedInNot, AccountCircle } from '@mui/icons-material/'
import Grid from '@mui/material/Unstable_Grid2';




export function CardPost({ postData }) {
    // console.log('test: ', postData)

    // дата поста
    const dateofPost = new Date(+postData.createdAt)
    const months = ['января', 'февраля', 'марта', 'апреля', 'мая', 'июня', 'июля', 'августа', 'сентября', 'октября', 'ноября', 'декабря']
    const dateofPostParse = `${dateofPost.getDate() < 10 ? '0' + dateofPost.getDate() : dateofPost.getDate()} ${months[dateofPost.getMonth()]} ${dateofPost.getFullYear()}  ${dateofPost.getHours()}:${dateofPost.getMinutes() < 10 ? '0' + dateofPost.getMinutes() : dateofPost.getMinutes()}`





    return (
        <Card className="tututu" sx={{
            display: 'flex',
            flexDirection: 'column',
            minHeight: '80vh',
            borderRadius: 0
        }}>
            <CardHeader
                avatar={
                    <Avatar
                        alt=""
                        src={(url.slice(0, -7) + postData?.owner?.avatar?.url)}
                        sx={{ width: 50, height: 50 }}
                        style={{ margin: '5px', border: '3px solid black', borderRadius: '50%', flexShrink: '0', overflow: 'hidden' }}
                    />
                }
                title={
                    <Link
                        to={`/user/${postData?.owner?._id}`}>
                        {postData?.owner?.login}
                    </Link>
                }
                subheader={dateofPostParse}
            />

            <Divider />

            <CardActions sx={{
                flex: '1 1 auto',
                alignItems: 'flex-start'
            }}>
                <CardContent>
                    <Grid container spacing={1}>
                        <Grid xs={3}>
                            {/* <Item> */}
                            <Avatar
                                alt=""
                                src={(url.slice(0, -7) + postData?.owner?.avatar?.url)}
                                sx={{ width: 50, height: 50 }}
                                style={{ margin: '5px', border: '3px solid black', borderRadius: '50%', flexShrink: '0', overflow: 'hidden' }}
                            />
                            {/* </Item> */}
                        </Grid>
                        <Grid xs={9}>
                            {/* <Item> */}
                            <Typography variant="subtitle2" color="text.secondary">
                                {postData.title}
                            </Typography>
                            <Typography variant="body2" color="text.secondary">
                                {postData.text}
                            </Typography>
                            {/* </Item> */}
                        </Grid>
                    </Grid>
                </CardContent>
            </CardActions>

            <Divider />

            <CardActions disableSpacing>
                <Box sx={{ flexGrow: 1 }}>
                    <Grid container>
                        <Grid
                            xs={12}
                            container
                            justifyContent="space-between"
                            alignItems="center"
                            flexDirection={{ xs: 'column', sm: 'row' }}
                            sx={{ fontSize: '12px' }}
                        >
                            <Grid container columnSpacing={1} sx={{ order: { xs: 2, sm: 1 } }}>
                                <Grid>
                                    <IconButton aria-label="add to favorites">
                                        <FavoriteBorderRounded />
                                    </IconButton>
                                </Grid>
                                <Grid>
                                    <IconButton>
                                        <ChatBubbleOutline />
                                    </IconButton>
                                </Grid>
                                <Grid>
                                    <IconButton aria-label="share">
                                        <Send />
                                    </IconButton>
                                </Grid>
                            </Grid>
                            <Grid sx={{ order: { xs: 1, sm: 2 } }}>
                                <IconButton>
                                    <TurnedInNot />
                                </IconButton>
                            </Grid>
                        </Grid>
                    </Grid>
                </Box>
            </CardActions>


            <CardContent>
                Нравится: {postData.likesCount ? postData.likesCount : '0'}
                {/* Нравится: {postData.likesCount || '0'} // сработает или нет - проверить */}
            </CardContent>

            <Divider />

            <CardActions>
                <Box sx={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
                    <AccountCircle sx={{ color: 'action.active', mr: 1, my: 0.5 }} />
                    <TextField id="input-with-sx" label="Add comment..." variant="standard" />
                    <Send sx={{ color: 'action.active', mr: 1, my: 0.5 }} />
                </Box>

            </CardActions>

        </Card>
    )
}