feat: 화면 설정 반영
parent
ca4c0e46af
commit
d4050acdab
@ -1,43 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// material-ui
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import { Box } from '@mui/material';
|
||||
|
||||
// assets
|
||||
import AuthPattern from 'assets/images/auth/auth-pattern.svg';
|
||||
import AuthPatternDark from 'assets/images/auth/auth-pattern-dark.svg';
|
||||
|
||||
// ===========================|| BACKGROUND GRID PATTERN 1 ||=========================== //
|
||||
|
||||
const BackgroundPattern1 = ({ children }) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Box
|
||||
component="span"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
minHeight: '100vh',
|
||||
bgcolor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : '#fff',
|
||||
backgroundImage: theme.palette.mode === 'dark' ? `url(${AuthPatternDark})` : `url(${AuthPattern})`,
|
||||
position: 'absolute',
|
||||
backgroundPosition: '0 0',
|
||||
overflow: 'hidden',
|
||||
m: '0 0 0 auto',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
opacity: theme.palette.mode === 'dark' ? 0.85 : 0.9
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
BackgroundPattern1.propTypes = {
|
||||
children: PropTypes.node
|
||||
};
|
||||
|
||||
export default BackgroundPattern1;
|
||||
@ -1,61 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// material-ui
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import { Box } from '@mui/material';
|
||||
|
||||
// assets
|
||||
import AuthPattern from 'assets/images/auth/img-a2-grid.svg';
|
||||
import AuthPatternDark from 'assets/images/auth/img-a2-grid-dark.svg';
|
||||
|
||||
// ===========================|| BACKGROUND GRID PATTERN 2 ||=========================== //
|
||||
|
||||
const BackgroundPattern2 = ({ children }) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Box
|
||||
component="span"
|
||||
sx={{
|
||||
display: 'flex',
|
||||
minHeight: '100%',
|
||||
height: '100vh',
|
||||
bgcolor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : '#fff',
|
||||
backgroundImage: theme.palette.mode === 'dark' ? `url(${AuthPatternDark})` : `url(${AuthPattern})`,
|
||||
position: 'absolute',
|
||||
backgroundPosition: 'bottom left',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
// backgroundSize: 'cover',
|
||||
overflow: 'hidden',
|
||||
m: '0 0 0 auto',
|
||||
p: '100px 0',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
'& > *': {
|
||||
position: 'relative',
|
||||
zIndex: 5
|
||||
},
|
||||
'&:after': {
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
zIndex: 1,
|
||||
bottom: 0,
|
||||
bgcolor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : theme.palette.primary.light,
|
||||
opacity: theme.palette.mode === 'dark' ? 0.85 : 0.9
|
||||
}
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
BackgroundPattern2.propTypes = {
|
||||
children: PropTypes.node
|
||||
};
|
||||
|
||||
export default BackgroundPattern2;
|
||||
@ -1,60 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
// material-ui
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import { Button, Card, CardContent, Grid, Typography } from '@mui/material';
|
||||
|
||||
// assets
|
||||
import ArrowRightAltRoundedIcon from '@mui/icons-material/ArrowRightAltRounded';
|
||||
|
||||
// ==============================|| BILL CARD ||============================== //
|
||||
|
||||
const BillCard = ({ primary, secondary, link, color, bg }) => {
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Card sx={{ borderLeft: '10px solid', borderColor: color, background: bg }}>
|
||||
<CardContent>
|
||||
<Grid container spacing={0}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="body1" sx={{ color: theme.palette.grey[700] }}>
|
||||
{primary}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="h2" sx={{ fontWeight: 500, mb: 1.5, color: theme.palette.grey[800] }}>
|
||||
{secondary}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Button
|
||||
variant="text"
|
||||
disableElevation
|
||||
disableRipple
|
||||
component={Link}
|
||||
to="#"
|
||||
sx={{
|
||||
color,
|
||||
p: 0,
|
||||
'&:hover': { bgcolor: 'transparent' }
|
||||
}}
|
||||
endIcon={<ArrowRightAltRoundedIcon />}
|
||||
>
|
||||
{link}
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
BillCard.propTypes = {
|
||||
primary: PropTypes.string,
|
||||
secondary: PropTypes.string,
|
||||
link: PropTypes.string,
|
||||
color: PropTypes.string,
|
||||
bg: PropTypes.string
|
||||
};
|
||||
|
||||
export default BillCard;
|
||||
@ -1,156 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { useState } from 'react';
|
||||
|
||||
// material-ui
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import { Box, Button, ButtonBase, Card, Grid, Menu, MenuItem, Stack, Typography } from '@mui/material';
|
||||
|
||||
// project imports
|
||||
import Avatar from 'ui-component/extended/Avatar';
|
||||
|
||||
// assets
|
||||
import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
|
||||
import MoreVertTwoToneIcon from '@mui/icons-material/MoreVertTwoTone';
|
||||
import ThumbUpAltTwoToneIcon from '@mui/icons-material/ThumbUpAltTwoTone';
|
||||
import ReplyTwoToneIcon from '@mui/icons-material/ReplyTwoTone';
|
||||
|
||||
const avatarImage = require.context('assets/images/profile', true);
|
||||
|
||||
// ==============================|| POST & COMMENT - REPLAY ||============================== //
|
||||
|
||||
const Reply = ({ commentId, handleReplayLikes, onReply, postId, reply }) => {
|
||||
const theme = useTheme();
|
||||
const { id } = reply;
|
||||
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event?.currentTarget);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
const replies = reply;
|
||||
|
||||
return (
|
||||
<>
|
||||
{Object.keys(replies).length > 0 && (
|
||||
<Grid item xs={12}>
|
||||
<Box sx={{ pl: 6.25 }}>
|
||||
<Card
|
||||
sx={{
|
||||
background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[50],
|
||||
padding: '16px 16px 8px',
|
||||
mt: 1.25
|
||||
}}
|
||||
>
|
||||
<Grid container spacing={1}>
|
||||
<Grid item xs={12}>
|
||||
<Grid container wrap="nowrap" alignItems="center" spacing={1}>
|
||||
<Grid item>
|
||||
<Avatar
|
||||
sx={{ width: 24, height: 24 }}
|
||||
size="sm"
|
||||
alt="User 1"
|
||||
src={replies.profile && replies.profile.avatar && avatarImage(`./${replies.profile.avatar}`).default}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs zeroMinWidth>
|
||||
<Grid container alignItems="center" spacing={1}>
|
||||
<Grid item>
|
||||
<Typography align="left" variant="h5" component="div">
|
||||
{replies.profile.name}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Typography align="left" variant="caption">
|
||||
<FiberManualRecordIcon sx={{ width: '10px', height: '10px', opacity: 0.5, m: '0 5px' }} />{' '}
|
||||
{replies.profile.time}
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<ButtonBase sx={{ borderRadius: '12px' }} onClick={handleClick}>
|
||||
<Avatar
|
||||
variant="rounded"
|
||||
sx={{
|
||||
...theme.typography.commonAvatar,
|
||||
...theme.typography.smallAvatar,
|
||||
background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.secondary.light,
|
||||
color: theme.palette.mode === 'dark' ? theme.palette.dark.light : theme.palette.secondary.dark,
|
||||
zIndex: 1,
|
||||
transition: 'all .2s ease-in-out',
|
||||
'&[aria-controls="menu-list-grow"],&:hover': {
|
||||
background: theme.palette.secondary.main,
|
||||
color: theme.palette.secondary.light
|
||||
}
|
||||
}}
|
||||
aria-controls="menu-comment-reply"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
<MoreVertTwoToneIcon fontSize="inherit" />
|
||||
</Avatar>
|
||||
</ButtonBase>
|
||||
<Menu
|
||||
id="menu-comment-reply"
|
||||
anchorEl={anchorEl}
|
||||
keepMounted
|
||||
open={Boolean(anchorEl)}
|
||||
onClose={handleClose}
|
||||
variant="selectedMenu"
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'right'
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right'
|
||||
}}
|
||||
>
|
||||
<MenuItem onClick={handleClose}>Edit</MenuItem>
|
||||
<MenuItem onClick={handleClose}>Delete</MenuItem>
|
||||
</Menu>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Typography align="left" variant="body2">
|
||||
{replies.data.comment}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Stack direction="row" spacing={2} sx={{ color: theme.palette.mode === 'dark' ? 'grey.700' : 'grey.800' }}>
|
||||
<Button
|
||||
onClick={() => handleReplayLikes(postId, commentId, id)}
|
||||
variant="text"
|
||||
color="inherit"
|
||||
size="small"
|
||||
startIcon={<ThumbUpAltTwoToneIcon color={replies.data.likes && replies.data.likes.like ? 'secondary' : 'inherit'} />}
|
||||
>
|
||||
{replies.data.likes && replies.data.likes.value ? replies.data.likes.value : 0} likes
|
||||
</Button>
|
||||
<Button variant="text" onClick={onReply} size="small" color="inherit" startIcon={<ReplyTwoToneIcon color="primary" />}>
|
||||
reply
|
||||
</Button>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Card>
|
||||
</Box>
|
||||
</Grid>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reply.propTypes = {
|
||||
commentId: PropTypes.string,
|
||||
handleReplayLikes: PropTypes.func,
|
||||
onReply: PropTypes.func,
|
||||
postId: PropTypes.string,
|
||||
reply: PropTypes.object
|
||||
};
|
||||
|
||||
export default Reply;
|
||||
@ -1,340 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { useState } from 'react';
|
||||
|
||||
// material-ui
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
ButtonBase,
|
||||
Card,
|
||||
Collapse,
|
||||
FormHelperText,
|
||||
Grid,
|
||||
InputAdornment,
|
||||
Menu,
|
||||
MenuItem,
|
||||
Stack,
|
||||
TextField,
|
||||
Typography,
|
||||
useMediaQuery
|
||||
} from '@mui/material';
|
||||
|
||||
// third-party
|
||||
import * as yup from 'yup';
|
||||
import uniqueId from 'lodash/uniqueId';
|
||||
import { Controller, FormProvider, useForm, useFormContext } from 'react-hook-form';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
|
||||
// project imports
|
||||
import Reply from './Reply';
|
||||
import Avatar from 'ui-component/extended/Avatar';
|
||||
import AnimateButton from 'ui-component/extended/AnimateButton';
|
||||
|
||||
// assets
|
||||
import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
|
||||
import MoreVertTwoToneIcon from '@mui/icons-material/MoreVertTwoTone';
|
||||
import ThumbUpAltTwoToneIcon from '@mui/icons-material/ThumbUpAltTwoTone';
|
||||
import ReplyTwoToneIcon from '@mui/icons-material/ReplyTwoTone';
|
||||
import AttachmentRoundedIcon from '@mui/icons-material/AttachmentRounded';
|
||||
|
||||
const avatarImage = require.context('assets/images/profile', true);
|
||||
|
||||
const validationSchema = yup.object().shape({
|
||||
name: yup.string().required('Reply Field is Required')
|
||||
});
|
||||
|
||||
// ==============================|| COMMENT TEXTFIELD ||============================== //
|
||||
|
||||
const FormInput = ({ bug, label, name, required, ...others }) => {
|
||||
const { control } = useFormContext();
|
||||
|
||||
let isError = false;
|
||||
let errorMessage = '';
|
||||
if (bug && Object.prototype.hasOwnProperty.call(bug, name)) {
|
||||
isError = true;
|
||||
errorMessage = bug[name].message;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Controller
|
||||
name={name}
|
||||
control={control}
|
||||
defaultValue=""
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
fullWidth
|
||||
label={label}
|
||||
InputLabelProps={{
|
||||
className: required ? 'required-label' : '',
|
||||
required: required || false
|
||||
}}
|
||||
error={isError}
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
{...others}
|
||||
/>
|
||||
{errorMessage && (
|
||||
<Grid item xs={12}>
|
||||
<FormHelperText error>{errorMessage}</FormHelperText>
|
||||
</Grid>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
FormInput.propTypes = {
|
||||
bug: PropTypes.object,
|
||||
label: PropTypes.string,
|
||||
name: PropTypes.string,
|
||||
required: PropTypes.bool
|
||||
};
|
||||
|
||||
// ==============================|| SOCIAL PROFILE - COMMENT ||============================== //
|
||||
|
||||
const Comment = ({ comment, handleCommentLikes, handleReplayLikes, postId, replyAdd, user }) => {
|
||||
const theme = useTheme();
|
||||
const matchesXS = useMediaQuery(theme.breakpoints.down('md'));
|
||||
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
const [openReply, setOpenReply] = useState(false);
|
||||
const handleChangeReply = () => {
|
||||
setOpenReply((prev) => !prev);
|
||||
};
|
||||
|
||||
let repliesResult = <></>;
|
||||
if (Object.keys(comment).length > 0 && comment.data?.replies && comment.data?.replies.length) {
|
||||
repliesResult = comment.data?.replies.map((reply, index) => (
|
||||
<Reply
|
||||
postId={postId}
|
||||
commentId={comment.id}
|
||||
key={index}
|
||||
onReply={handleChangeReply}
|
||||
reply={reply}
|
||||
handleReplayLikes={handleReplayLikes}
|
||||
/>
|
||||
));
|
||||
}
|
||||
|
||||
const methods = useForm({
|
||||
resolver: yupResolver(validationSchema)
|
||||
});
|
||||
|
||||
const {
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
reset
|
||||
} = methods;
|
||||
const onSubmit = async (reply) => {
|
||||
handleChangeReply();
|
||||
const replyId = uniqueId('#REPLY_');
|
||||
const newReply = {
|
||||
id: replyId,
|
||||
profile: user,
|
||||
data: {
|
||||
comment: reply.name,
|
||||
likes: {
|
||||
like: false,
|
||||
value: 0
|
||||
},
|
||||
replies: []
|
||||
}
|
||||
};
|
||||
|
||||
replyAdd(postId, comment.id, newReply);
|
||||
reset({ name: '' });
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{Object.keys(comment).length > 0 && (
|
||||
<Grid item xs={12}>
|
||||
<Card
|
||||
sx={{
|
||||
background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[50],
|
||||
padding: '16px 16px 8px',
|
||||
mt: 1.25
|
||||
}}
|
||||
>
|
||||
<Grid container spacing={1}>
|
||||
<Grid item xs={12}>
|
||||
<Grid container wrap="nowrap" alignItems="center" spacing={1}>
|
||||
<Grid item>
|
||||
<Avatar
|
||||
sx={{ width: 24, height: 24 }}
|
||||
size="sm"
|
||||
alt="User 1"
|
||||
src={comment.profile && comment.profile.avatar && avatarImage(`./${comment.profile.avatar}`).default}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs zeroMinWidth>
|
||||
<Grid container alignItems="center" spacing={1}>
|
||||
<Grid item>
|
||||
<Typography align="left" variant="h5" component="div">
|
||||
{comment.profile.name}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Typography align="left" variant="caption">
|
||||
<FiberManualRecordIcon sx={{ width: '10px', height: '10px', opacity: 0.5, m: '0 5px' }} /> {comment.profile.time}
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<ButtonBase sx={{ borderRadius: '12px' }}>
|
||||
<Avatar
|
||||
variant="rounded"
|
||||
sx={{
|
||||
...theme.typography.commonAvatar,
|
||||
...theme.typography.smallAvatar,
|
||||
background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.secondary.light,
|
||||
color: theme.palette.mode === 'dark' ? theme.palette.dark.light : theme.palette.secondary.dark,
|
||||
zIndex: 1,
|
||||
transition: 'all .2s ease-in-out',
|
||||
'&[aria-controls="menu-list-grow"],&:hover': {
|
||||
background: theme.palette.secondary.main,
|
||||
color: theme.palette.secondary.light
|
||||
}
|
||||
}}
|
||||
aria-controls="menu-comment"
|
||||
aria-haspopup="true"
|
||||
onClick={handleClick}
|
||||
>
|
||||
<MoreVertTwoToneIcon fontSize="inherit" />
|
||||
</Avatar>
|
||||
</ButtonBase>
|
||||
<Menu
|
||||
id="menu-comment"
|
||||
anchorEl={anchorEl}
|
||||
keepMounted
|
||||
open={Boolean(anchorEl)}
|
||||
onClose={handleClose}
|
||||
variant="selectedMenu"
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'right'
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right'
|
||||
}}
|
||||
>
|
||||
<MenuItem onClick={handleClose}>Edit</MenuItem>
|
||||
<MenuItem onClick={handleClose}>Delete</MenuItem>
|
||||
</Menu>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item xs={12} sx={{ '&.MuiGrid-root': { pt: 1.5 } }}>
|
||||
<Typography align="left" variant="body2">
|
||||
{comment.data?.comment}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Stack direction="row" spacing={2} sx={{ color: theme.palette.mode === 'dark' ? 'grey.700' : 'grey.800' }}>
|
||||
<Button
|
||||
onClick={() => handleCommentLikes(postId, comment.id)}
|
||||
variant="text"
|
||||
color="inherit"
|
||||
size="small"
|
||||
startIcon={<ThumbUpAltTwoToneIcon color={comment.data?.likes && comment.data?.likes.like ? 'secondary' : 'inherit'} />}
|
||||
>
|
||||
{comment.data?.likes && comment.data?.likes.value ? comment.data?.likes.value : 0} likes
|
||||
</Button>
|
||||
<Button
|
||||
variant="text"
|
||||
onClick={handleChangeReply}
|
||||
color="inherit"
|
||||
size="small"
|
||||
startIcon={<ReplyTwoToneIcon color="primary" />}
|
||||
>
|
||||
{comment.data?.replies ? comment.data?.replies.length : 0} reply
|
||||
</Button>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Card>
|
||||
</Grid>
|
||||
)}
|
||||
{repliesResult}
|
||||
{/* comment - add new replay */}
|
||||
<Collapse in={openReply} sx={{ width: '100%' }}>
|
||||
{openReply && (
|
||||
<Grid item xs={12} sx={{ pl: { xs: 1, sm: 3 }, pt: 3 }}>
|
||||
<Box
|
||||
sx={{
|
||||
ml: 4.25,
|
||||
[theme.breakpoints.down('md')]: {
|
||||
ml: 0
|
||||
}
|
||||
}}
|
||||
>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<Grid container spacing={2} alignItems="flex-start">
|
||||
<Grid item sx={{ display: { xs: 'none', sm: 'block' } }}>
|
||||
<Avatar
|
||||
sx={{ mt: 1.5 }}
|
||||
alt="User 1"
|
||||
src={comment.profile && comment.profile.avatar && avatarImage(`./${comment.profile.avatar}`).default}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs zeroMinWidth sx={{ mt: 1 }}>
|
||||
<FormProvider {...methods}>
|
||||
<FormInput
|
||||
fullWidth
|
||||
name="name"
|
||||
label="Write a reply..."
|
||||
size={matchesXS ? 'small' : 'medium'}
|
||||
bug={errors}
|
||||
InputProps={{
|
||||
label: 'Write a reply...',
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<AttachmentRoundedIcon fontSize="small" />
|
||||
</InputAdornment>
|
||||
)
|
||||
}}
|
||||
/>
|
||||
</FormProvider>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<AnimateButton>
|
||||
<Button type="submit" variant="contained" color="secondary" size={matchesXS ? 'small' : 'large'} sx={{ mt: 1.5 }}>
|
||||
Reply
|
||||
</Button>
|
||||
</AnimateButton>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
</Box>
|
||||
</Grid>
|
||||
)}
|
||||
</Collapse>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Comment.propTypes = {
|
||||
comment: PropTypes.object,
|
||||
postId: PropTypes.string,
|
||||
user: PropTypes.object,
|
||||
commentAdd: PropTypes.func,
|
||||
handleCommentLikes: PropTypes.func,
|
||||
handlePostLikes: PropTypes.func,
|
||||
handleReplayLikes: PropTypes.func,
|
||||
post: PropTypes.object,
|
||||
replyAdd: PropTypes.func
|
||||
};
|
||||
|
||||
export default Comment;
|
||||
@ -1,406 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import * as React from 'react';
|
||||
|
||||
// material-ui
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import {
|
||||
Button,
|
||||
ButtonBase,
|
||||
CardMedia,
|
||||
Collapse,
|
||||
FormHelperText,
|
||||
Grid,
|
||||
IconButton,
|
||||
Menu,
|
||||
MenuItem,
|
||||
Stack,
|
||||
TextField,
|
||||
Typography,
|
||||
useMediaQuery
|
||||
} from '@mui/material';
|
||||
|
||||
// third-party
|
||||
import * as yup from 'yup';
|
||||
import uniqueId from 'lodash/uniqueId';
|
||||
import { Controller, FormProvider, useForm } from 'react-hook-form';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import gfm from 'remark-gfm';
|
||||
|
||||
// project imports
|
||||
import Comment from './Comment';
|
||||
import MainCard from '../MainCard';
|
||||
import useAuth from 'hooks/useAuth';
|
||||
import AnimateButton from 'ui-component/extended/AnimateButton';
|
||||
import ImageList from 'ui-component/extended/ImageList';
|
||||
import Avatar from 'ui-component/extended/Avatar';
|
||||
|
||||
// assets
|
||||
import ShareTwoToneIcon from '@mui/icons-material/ShareTwoTone';
|
||||
import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
|
||||
import PeopleAltTwoToneIcon from '@mui/icons-material/PeopleAltTwoTone';
|
||||
import ChatTwoToneIcon from '@mui/icons-material/ChatTwoTone';
|
||||
import ContentCopyTwoToneIcon from '@mui/icons-material/ContentCopyTwoTone';
|
||||
import MoreVertTwoToneIcon from '@mui/icons-material/MoreVertTwoTone';
|
||||
import ThumbUpAltTwoToneIcon from '@mui/icons-material/ThumbUpAltTwoTone';
|
||||
import ChatBubbleTwoToneIcon from '@mui/icons-material/ChatBubbleTwoTone';
|
||||
import useConfig from 'hooks/useConfig';
|
||||
|
||||
const avatarImage = require.context('assets/images/profile', true);
|
||||
|
||||
const validationSchema = yup.object().shape({
|
||||
name: yup.string().required('Comment Field is Required')
|
||||
});
|
||||
|
||||
// ==============================|| COMMENT TEXTFIELD ||============================== //
|
||||
|
||||
const FormInput = ({ bug, label, size, fullWidth = true, name, required, ...others }) => {
|
||||
let isError = false;
|
||||
let errorMessage = '';
|
||||
if (bug && Object.prototype.hasOwnProperty.call(bug, name)) {
|
||||
isError = true;
|
||||
errorMessage = bug[name].message;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Controller
|
||||
name={name}
|
||||
defaultValue=""
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
fullWidth={fullWidth}
|
||||
size={size}
|
||||
label={label}
|
||||
InputLabelProps={{
|
||||
className: required ? 'required-label' : '',
|
||||
required: required || false
|
||||
}}
|
||||
error={isError}
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
{...others}
|
||||
/>
|
||||
{errorMessage && (
|
||||
<Grid item xs={12}>
|
||||
<FormHelperText error>{errorMessage}</FormHelperText>
|
||||
</Grid>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
FormInput.propTypes = {
|
||||
bug: PropTypes.object,
|
||||
size: PropTypes.string,
|
||||
label: PropTypes.string,
|
||||
name: PropTypes.string,
|
||||
required: PropTypes.bool,
|
||||
fullWidth: PropTypes.bool
|
||||
};
|
||||
|
||||
// ==============================|| SOCIAL PROFILE - POST ||============================== //
|
||||
|
||||
const Post = ({ commentAdd, handleCommentLikes, handlePostLikes, handleReplayLikes, post, replyAdd }) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const { user } = useAuth();
|
||||
const { id, data } = post;
|
||||
let { profile } = post;
|
||||
|
||||
profile = { ...profile, name: user?.name || profile.name };
|
||||
|
||||
const { borderRadius } = useConfig();
|
||||
const matchesXS = useMediaQuery(theme.breakpoints.down('md'));
|
||||
|
||||
const [anchorEl, setAnchorEl] = React.useState(null);
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
const [anchorSharedEl, setAnchorSharedEl] = React.useState(null);
|
||||
const handleSharedClick = (event) => {
|
||||
setAnchorSharedEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleSharedClose = () => {
|
||||
setAnchorSharedEl(null);
|
||||
};
|
||||
|
||||
const [openComment, setOpenComment] = React.useState(!(data.comments && data.comments.length > 0));
|
||||
const handleChangeComment = () => {
|
||||
setOpenComment((prev) => !prev);
|
||||
};
|
||||
|
||||
let commentsResult = <></>;
|
||||
|
||||
if (data && data.comments) {
|
||||
commentsResult = data.comments.map((comment) => (
|
||||
<Comment
|
||||
postId={id}
|
||||
comment={comment}
|
||||
key={comment.id}
|
||||
user={profile}
|
||||
replyAdd={replyAdd}
|
||||
handleCommentLikes={handleCommentLikes}
|
||||
handleReplayLikes={handleReplayLikes}
|
||||
/>
|
||||
));
|
||||
}
|
||||
|
||||
const methods = useForm({
|
||||
resolver: yupResolver(validationSchema)
|
||||
});
|
||||
|
||||
const {
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
reset
|
||||
} = methods;
|
||||
const onSubmit = async (comment) => {
|
||||
handleChangeComment();
|
||||
const commentId = uniqueId('#COMMENT_');
|
||||
const newComment = {
|
||||
id: commentId,
|
||||
profile,
|
||||
data: {
|
||||
comment: comment.name,
|
||||
likes: {
|
||||
like: false,
|
||||
value: 0
|
||||
},
|
||||
replies: []
|
||||
}
|
||||
};
|
||||
commentAdd(id, newComment);
|
||||
reset({ name: '' });
|
||||
};
|
||||
|
||||
return (
|
||||
<MainCard>
|
||||
<Grid container spacing={1}>
|
||||
<Grid item xs={12}>
|
||||
<Grid container wrap="nowrap" alignItems="center" spacing={1}>
|
||||
<Grid item>
|
||||
<Avatar alt="User 1" src={profile.avatar && avatarImage(`./${profile.avatar}`).default} />
|
||||
</Grid>
|
||||
<Grid item xs zeroMinWidth>
|
||||
<Grid container alignItems="center" spacing={1}>
|
||||
<Grid item>
|
||||
<Typography align="left" variant="h5" component="div">
|
||||
{profile.name}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Typography align="left" variant="caption">
|
||||
<FiberManualRecordIcon sx={{ width: '10px', height: '10px', opacity: 0.5, m: '0 5px' }} /> {profile.time}
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<ButtonBase sx={{ borderRadius: '12px' }} onClick={handleClick}>
|
||||
<Avatar
|
||||
variant="rounded"
|
||||
sx={{
|
||||
...theme.typography.commonAvatar,
|
||||
...theme.typography.smallAvatar,
|
||||
background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.secondary.light,
|
||||
color: theme.palette.mode === 'dark' ? theme.palette.dark.light : theme.palette.secondary.dark,
|
||||
zIndex: 1,
|
||||
transition: 'all .2s ease-in-out',
|
||||
'&[aria-controls="menu-list-grow"],&:hover': {
|
||||
background: theme.palette.secondary.main,
|
||||
color: theme.palette.secondary.light
|
||||
}
|
||||
}}
|
||||
aria-controls="menu-post"
|
||||
aria-haspopup="true"
|
||||
>
|
||||
<MoreVertTwoToneIcon fontSize="inherit" />
|
||||
</Avatar>
|
||||
</ButtonBase>
|
||||
<Menu
|
||||
id="menu-post"
|
||||
anchorEl={anchorEl}
|
||||
keepMounted
|
||||
open={Boolean(anchorEl)}
|
||||
onClose={handleClose}
|
||||
variant="selectedMenu"
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'right'
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right'
|
||||
}}
|
||||
>
|
||||
<MenuItem onClick={handleClose}>Edit</MenuItem>
|
||||
<MenuItem onClick={handleClose}>Delete</MenuItem>
|
||||
</Menu>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* post - content */}
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
sx={{
|
||||
'& > p': {
|
||||
...theme.typography.body1,
|
||||
mb: 0
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ReactMarkdown remarkPlugins={[gfm]}>{data.content}</ReactMarkdown>
|
||||
</Grid>
|
||||
|
||||
{/* post - photo grid */}
|
||||
{data && data.images && data.images.length > 0 && (
|
||||
<Grid item xs={12}>
|
||||
<ImageList itemData={data.images} />
|
||||
</Grid>
|
||||
)}
|
||||
|
||||
{/* post - video */}
|
||||
{data.video && (
|
||||
<Grid item xs={12} sx={{ '&.MuiGrid-root': { pt: 2 } }}>
|
||||
<CardMedia
|
||||
sx={{
|
||||
borderRadius: `${borderRadius}px`,
|
||||
height: 330,
|
||||
[theme.breakpoints.down('xl')]: {
|
||||
height: 220
|
||||
}
|
||||
}}
|
||||
component="iframe"
|
||||
src={`https://www.youtube.com/embed/${data.video}`}
|
||||
/>
|
||||
</Grid>
|
||||
)}
|
||||
|
||||
{/* post - comment, likes and replay history */}
|
||||
<Grid item xs={12}>
|
||||
<Grid
|
||||
container
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
spacing={2}
|
||||
sx={{ mt: 0, color: theme.palette.mode === 'dark' ? 'grey.700' : 'grey.800' }}
|
||||
>
|
||||
<Grid item>
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Button
|
||||
variant="text"
|
||||
onClick={() => handlePostLikes(id)}
|
||||
color="inherit"
|
||||
size="small"
|
||||
startIcon={<ThumbUpAltTwoToneIcon color={data && data.likes && data.likes.like ? 'primary' : 'inherit'} />}
|
||||
>
|
||||
{data && data.likes && data.likes.value ? data.likes.value : 0}
|
||||
<Typography color="inherit" sx={{ fontWeight: 500, ml: 0.5, display: { xs: 'none', sm: 'block' } }}>
|
||||
likes
|
||||
</Typography>
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleChangeComment}
|
||||
size="small"
|
||||
variant="text"
|
||||
color="inherit"
|
||||
startIcon={<ChatBubbleTwoToneIcon color="secondary" />}
|
||||
>
|
||||
{data.comments ? data.comments.length : 0} comments
|
||||
</Button>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<IconButton onClick={handleSharedClick} size="large">
|
||||
<ShareTwoToneIcon sx={{ width: '1rem', height: '1rem' }} />
|
||||
</IconButton>
|
||||
<Menu
|
||||
id="menu-post"
|
||||
anchorEl={anchorSharedEl}
|
||||
keepMounted
|
||||
open={Boolean(anchorSharedEl)}
|
||||
onClose={handleSharedClose}
|
||||
variant="selectedMenu"
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'right'
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right'
|
||||
}}
|
||||
sx={{
|
||||
'& .MuiSvgIcon-root': {
|
||||
marginRight: '14px',
|
||||
fontSize: '1.25rem'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<MenuItem onClick={handleSharedClose}>
|
||||
<ShareTwoToneIcon fontSize="inherit" /> Share Now
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleSharedClose}>
|
||||
<PeopleAltTwoToneIcon fontSize="inherit" /> Share to Friends
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleSharedClose}>
|
||||
<ChatTwoToneIcon fontSize="inherit" /> Send in Messanger
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleSharedClose}>
|
||||
<ContentCopyTwoToneIcon fontSize="inherit" /> Copy Link
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
{/* add new comment */}
|
||||
<Collapse in={openComment} sx={{ width: '100%' }}>
|
||||
{openComment && (
|
||||
<Grid item xs={12} sx={{ pt: 2 }}>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<Grid container spacing={2} alignItems="flex-start">
|
||||
<Grid item sx={{ display: { xs: 'none', sm: 'block' } }}>
|
||||
<Avatar sx={{ mt: 0.75 }} alt="User 1" src={profile.avatar && avatarImage(`./${profile.avatar}`).default} size="xs" />
|
||||
</Grid>
|
||||
<Grid item xs zeroMinWidth>
|
||||
<FormProvider {...methods}>
|
||||
<FormInput fullWidth name="name" label="Write a comment..." size={matchesXS ? 'small' : 'medium'} bug={errors} />
|
||||
</FormProvider>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<AnimateButton>
|
||||
<Button type="submit" variant="contained" color="secondary" size={matchesXS ? 'small' : 'large'} sx={{ mt: 0.5 }}>
|
||||
Comment
|
||||
</Button>
|
||||
</AnimateButton>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</form>
|
||||
</Grid>
|
||||
)}
|
||||
</Collapse>
|
||||
{commentsResult}
|
||||
</Grid>
|
||||
</MainCard>
|
||||
);
|
||||
};
|
||||
|
||||
Post.propTypes = {
|
||||
commentAdd: PropTypes.func,
|
||||
handleCommentLikes: PropTypes.func,
|
||||
handlePostLikes: PropTypes.func,
|
||||
handleReplayLikes: PropTypes.func,
|
||||
post: PropTypes.object,
|
||||
replyAdd: PropTypes.func
|
||||
};
|
||||
|
||||
export default Post;
|
||||
@ -1,48 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// material-ui
|
||||
import { Grid, IconButton, Stack, Typography } from '@mui/material';
|
||||
|
||||
// project imports
|
||||
import MainCard from './MainCard';
|
||||
|
||||
// ============================|| ROUND ICON CARD ||============================ //
|
||||
|
||||
const RoundIconCard = ({ primary, secondary, content, iconPrimary, color, bgcolor }) => {
|
||||
const IconPrimary = iconPrimary;
|
||||
const primaryIcon = iconPrimary ? <IconPrimary fontSize="large" /> : null;
|
||||
|
||||
return (
|
||||
<MainCard>
|
||||
<Grid container alignItems="center" spacing={0} justifyContent="space-between">
|
||||
<Grid item>
|
||||
<Stack spacing={1}>
|
||||
<Typography variant="h5" color="inherit">
|
||||
{primary}
|
||||
</Typography>
|
||||
<Typography variant="h3">{secondary}</Typography>
|
||||
<Typography variant="subtitle2" color="inherit">
|
||||
{content}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<IconButton sx={{ bgcolor, color, '& .MuiSvgIcon-root': { fontSize: '1.5rem' } }} size="large">
|
||||
{primaryIcon}
|
||||
</IconButton>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MainCard>
|
||||
);
|
||||
};
|
||||
|
||||
RoundIconCard.propTypes = {
|
||||
primary: PropTypes.string,
|
||||
secondary: PropTypes.string,
|
||||
content: PropTypes.string,
|
||||
iconPrimary: PropTypes.object,
|
||||
color: PropTypes.string,
|
||||
bgcolor: PropTypes.string
|
||||
};
|
||||
|
||||
export default RoundIconCard;
|
||||
@ -1,157 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// material-ui
|
||||
import { useTheme, styled } from '@mui/material/styles';
|
||||
import { Button, Card, CardContent, CardMedia, Chip, Grid, Typography } from '@mui/material';
|
||||
|
||||
// project imports
|
||||
import Avatar from '../extended/Avatar';
|
||||
import { gridSpacing } from 'store/constant';
|
||||
|
||||
// assets
|
||||
import FacebookIcon from '@mui/icons-material/Facebook';
|
||||
import TwitterIcon from '@mui/icons-material/Twitter';
|
||||
import LinkedInIcon from '@mui/icons-material/LinkedIn';
|
||||
import ChatBubbleTwoToneIcon from '@mui/icons-material/ChatBubbleTwoTone';
|
||||
|
||||
const avatarImage = require.context('assets/images/profile', true);
|
||||
|
||||
// styles
|
||||
const FacebookWrapper = styled(Button)({
|
||||
padding: 8,
|
||||
background: 'rgba(66, 103, 178, 0.2)',
|
||||
'& svg': {
|
||||
color: '#4267B2'
|
||||
},
|
||||
'&:hover': {
|
||||
background: '#4267B2',
|
||||
'& svg': {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const TwitterWrapper = styled(Button)({
|
||||
padding: 8,
|
||||
background: 'rgba(29, 161, 242, 0.2)',
|
||||
'& svg': {
|
||||
color: '#1DA1F2'
|
||||
},
|
||||
'&:hover': {
|
||||
background: '#1DA1F2',
|
||||
'& svg': {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const LinkedInWrapper = styled(Button)({
|
||||
padding: 8,
|
||||
background: 'rgba(14, 118, 168, 0.12)',
|
||||
'& svg': {
|
||||
color: '#0E76A8'
|
||||
},
|
||||
'&:hover': {
|
||||
background: '#0E76A8',
|
||||
'& svg': {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// ==============================|| USER PROFILE CARD ||============================== //
|
||||
|
||||
const UserProfileCard = ({ avatar, name, profile, role, status }) => {
|
||||
const theme = useTheme();
|
||||
const avatarProfile = avatar && avatarImage(`./${avatar}`).default;
|
||||
const imageProfile = profile && avatarImage(`./${profile}`).default;
|
||||
|
||||
return (
|
||||
<Card
|
||||
sx={{
|
||||
background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[50],
|
||||
border: theme.palette.mode === 'dark' ? 'none' : '1px solid',
|
||||
borderColor: theme.palette.grey[100],
|
||||
textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
<CardMedia component="img" image={imageProfile} title="Slider5 image" sx={{ height: '125px' }} />
|
||||
<CardContent sx={{ p: 2, pb: '16px !important' }}>
|
||||
<Grid container spacing={gridSpacing}>
|
||||
<Grid item xs={12}>
|
||||
<Grid container spacing={gridSpacing}>
|
||||
<Grid item xs={12}>
|
||||
<Avatar alt={name} src={avatarProfile} sx={{ width: 72, height: 72, m: '-50px auto 0' }} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item xs={12} alignItems="center">
|
||||
<Grid container spacing={1}>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="h4">{name}</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="body2">{role}</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
{status === 'Active' ? (
|
||||
<Chip
|
||||
label="Active"
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : 'success.light',
|
||||
color: 'success.dark'
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Chip
|
||||
label="Rejected"
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : 'error.light',
|
||||
color: 'error.dark'
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={4}>
|
||||
<FacebookWrapper fullWidth>
|
||||
<FacebookIcon />
|
||||
</FacebookWrapper>
|
||||
</Grid>
|
||||
<Grid item xs={4}>
|
||||
<TwitterWrapper fullWidth>
|
||||
<TwitterIcon />
|
||||
</TwitterWrapper>
|
||||
</Grid>
|
||||
<Grid item xs={4}>
|
||||
<LinkedInWrapper fullWidth>
|
||||
<LinkedInIcon />
|
||||
</LinkedInWrapper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Button variant="outlined" fullWidth startIcon={<ChatBubbleTwoToneIcon />}>
|
||||
Message
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
UserProfileCard.propTypes = {
|
||||
avatar: PropTypes.string,
|
||||
name: PropTypes.string,
|
||||
profile: PropTypes.string,
|
||||
role: PropTypes.string,
|
||||
status: PropTypes.string
|
||||
};
|
||||
|
||||
export default UserProfileCard;
|
||||
@ -1,185 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { useState } from 'react';
|
||||
|
||||
// material-ui
|
||||
import { useTheme, styled } from '@mui/material/styles';
|
||||
import { Button, Card, Chip, Grid, IconButton, Menu, MenuItem, Typography } from '@mui/material';
|
||||
|
||||
// project imports
|
||||
import Avatar from '../extended/Avatar';
|
||||
import { gridSpacing } from 'store/constant';
|
||||
|
||||
// assets
|
||||
import MoreHorizOutlinedIcon from '@mui/icons-material/MoreHorizOutlined';
|
||||
import FacebookIcon from '@mui/icons-material/Facebook';
|
||||
import TwitterIcon from '@mui/icons-material/Twitter';
|
||||
import LinkedInIcon from '@mui/icons-material/LinkedIn';
|
||||
|
||||
const avatarImage = require.context('assets/images/profile', true);
|
||||
|
||||
// styles
|
||||
const FacebookWrapper = styled(Button)({
|
||||
padding: 8,
|
||||
background: 'rgba(66, 103, 178, 0.2)',
|
||||
'& svg': {
|
||||
color: '#4267B2'
|
||||
},
|
||||
'&:hover': {
|
||||
background: '#4267B2',
|
||||
'& svg': {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const TwitterWrapper = styled(Button)({
|
||||
padding: 8,
|
||||
background: 'rgba(29, 161, 242, 0.2)',
|
||||
'& svg': {
|
||||
color: '#1DA1F2'
|
||||
},
|
||||
'&:hover': {
|
||||
background: '#1DA1F2',
|
||||
'& svg': {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const LinkedInWrapper = styled(Button)({
|
||||
padding: 8,
|
||||
background: 'rgba(14, 118, 168, 0.12)',
|
||||
'& svg': {
|
||||
color: '#0E76A8'
|
||||
},
|
||||
'&:hover': {
|
||||
background: '#0E76A8',
|
||||
'& svg': {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// ==============================|| USER SIMPLE CARD ||============================== //
|
||||
|
||||
const UserSimpleCard = ({ avatar, name, status }) => {
|
||||
const theme = useTheme();
|
||||
const avatarProfile = avatar && avatarImage(`./${avatar}`).default;
|
||||
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<Card
|
||||
sx={{
|
||||
p: 2,
|
||||
background: theme.palette.mode === 'dark' ? theme.palette.dark.main : theme.palette.grey[50],
|
||||
border: '1px solid',
|
||||
borderColor: theme.palette.mode === 'dark' ? 'transparent' : theme.palette.grey[100],
|
||||
'&:hover': {
|
||||
border: `1px solid${theme.palette.primary.main}`
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Grid container spacing={gridSpacing}>
|
||||
<Grid item xs={12}>
|
||||
<Grid container spacing={gridSpacing}>
|
||||
<Grid item xs zeroMinWidth>
|
||||
<Avatar alt={name} src={avatarProfile} sx={{ width: 72, height: 72 }} />
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<IconButton size="small" sx={{ mt: -0.75, mr: -0.75 }} onClick={handleClick}>
|
||||
<MoreHorizOutlinedIcon
|
||||
fontSize="small"
|
||||
color="inherit"
|
||||
aria-controls="menu-friend-card"
|
||||
aria-haspopup="true"
|
||||
sx={{ opacity: 0.6 }}
|
||||
/>
|
||||
</IconButton>
|
||||
<Menu
|
||||
id="menu-simple-card"
|
||||
anchorEl={anchorEl}
|
||||
keepMounted
|
||||
open={Boolean(anchorEl)}
|
||||
onClose={handleClose}
|
||||
variant="selectedMenu"
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'right'
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right'
|
||||
}}
|
||||
>
|
||||
<MenuItem onClick={handleClose}>Edit</MenuItem>
|
||||
<MenuItem onClick={handleClose}>Delete</MenuItem>
|
||||
</Menu>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item xs={12} alignItems="center">
|
||||
<Grid container spacing={gridSpacing}>
|
||||
<Grid item xs zeroMinWidth>
|
||||
<Typography variant="h4">{name}</Typography>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
{status === 'Active' ? (
|
||||
<Chip
|
||||
label="Active"
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : 'success.light',
|
||||
color: 'success.dark'
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<Chip
|
||||
label="Rejected"
|
||||
size="small"
|
||||
sx={{
|
||||
bgcolor: theme.palette.mode === 'dark' ? theme.palette.dark.dark : 'error.light',
|
||||
color: 'error.dark'
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={4}>
|
||||
<FacebookWrapper fullWidth>
|
||||
<FacebookIcon fontSize="small" />
|
||||
</FacebookWrapper>
|
||||
</Grid>
|
||||
<Grid item xs={4}>
|
||||
<TwitterWrapper fullWidth>
|
||||
<TwitterIcon fontSize="small" />
|
||||
</TwitterWrapper>
|
||||
</Grid>
|
||||
<Grid item xs={4}>
|
||||
<LinkedInWrapper fullWidth>
|
||||
<LinkedInIcon fontSize="small" />
|
||||
</LinkedInWrapper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
UserSimpleCard.propTypes = {
|
||||
avatar: PropTypes.string,
|
||||
name: PropTypes.string,
|
||||
status: PropTypes.string
|
||||
};
|
||||
|
||||
export default UserSimpleCard;
|
||||
Loading…
Reference in New Issue