From d4050acdab35352fed871091db413933c7e6b6a9 Mon Sep 17 00:00:00 2001 From: minuk926 Date: Mon, 25 Apr 2022 12:05:16 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=ED=99=94=EB=A9=B4=20=EC=84=A4=EC=A0=95?= =?UTF-8?q?=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layout/Customization/BorderRadius.js | 2 +- src/layout/Customization/FontFamily.js | 2 +- src/layout/Customization/Layout.js | 30 +- src/layout/Customization/PresetColor.js | 2 +- src/layout/Customization/index.js | 16 +- src/layout/MainLayout/index.js | 2 + src/store/actions.js | 1 - src/ui-component/cards/BackgroundPattern1.js | 43 -- src/ui-component/cards/BackgroundPattern2.js | 61 --- src/ui-component/cards/BillCard.js | 60 --- .../cards/Post/Comment/Reply/index.js | 156 ------- src/ui-component/cards/Post/Comment/index.js | 340 --------------- src/ui-component/cards/Post/index.js | 406 ------------------ src/ui-component/cards/RoundIconCard.js | 48 --- src/ui-component/cards/UserProfileCard.js | 157 ------- src/ui-component/cards/UserSimpleCard.js | 185 -------- 16 files changed, 28 insertions(+), 1483 deletions(-) delete mode 100755 src/ui-component/cards/BackgroundPattern1.js delete mode 100755 src/ui-component/cards/BackgroundPattern2.js delete mode 100755 src/ui-component/cards/BillCard.js delete mode 100755 src/ui-component/cards/Post/Comment/Reply/index.js delete mode 100755 src/ui-component/cards/Post/Comment/index.js delete mode 100755 src/ui-component/cards/Post/index.js delete mode 100755 src/ui-component/cards/RoundIconCard.js delete mode 100755 src/ui-component/cards/UserProfileCard.js delete mode 100755 src/ui-component/cards/UserSimpleCard.js diff --git a/src/layout/Customization/BorderRadius.js b/src/layout/Customization/BorderRadius.js index 904540b..666c198 100755 --- a/src/layout/Customization/BorderRadius.js +++ b/src/layout/Customization/BorderRadius.js @@ -16,7 +16,7 @@ const BorderRadius = () => { const { borderRadius, onChangeBorderRadius } = useConfig(); return ( - + diff --git a/src/layout/Customization/FontFamily.js b/src/layout/Customization/FontFamily.js index 594e6f4..b935f94 100755 --- a/src/layout/Customization/FontFamily.js +++ b/src/layout/Customization/FontFamily.js @@ -35,7 +35,7 @@ const FontFamily = () => { }; return ( - + { const { navType, rtlLayout, onChangeMenuType, onChangeRTL } = useConfig(); return ( - + - Mode + 테마 { /> - - Direction - onChangeRTL(event.target.checked)} - inputProps={{ 'aria-label': 'controlled-direction' }} - /> - } - label="RTL" - /> - + {/* */} + {/* Direction */} + {/* onChangeRTL(event.target.checked)} */} + {/* inputProps={{ 'aria-label': 'controlled-direction' }} */} + {/* /> */} + {/* } */} + {/* label="RTL" */} + {/* /> */} + {/* */} ); }; diff --git a/src/layout/Customization/PresetColor.js b/src/layout/Customization/PresetColor.js index 15c236d..ca673cc 100755 --- a/src/layout/Customization/PresetColor.js +++ b/src/layout/Customization/PresetColor.js @@ -88,7 +88,7 @@ const PresetColor = () => { ]; return ( - + {colorOptions.map((color, index) => ( diff --git a/src/layout/Customization/index.js b/src/layout/Customization/index.js index 737bee1..31a7793 100755 --- a/src/layout/Customization/index.js +++ b/src/layout/Customization/index.js @@ -89,14 +89,14 @@ const Customization = () => { {/* border radius */} - - {/* filled with outline textfield */} - - - - {/* box container */} - - + {/* */} + {/* /!* filled with outline textfield *!/ */} + {/* */} + {/* */} + {/* */} + {/* /!* box container *!/ */} + {/* */} + {/* */} )} diff --git a/src/layout/MainLayout/index.js b/src/layout/MainLayout/index.js index 0ac8ed7..726e795 100755 --- a/src/layout/MainLayout/index.js +++ b/src/layout/MainLayout/index.js @@ -21,6 +21,7 @@ import useAuth from 'hooks/useAuth'; // assets import { IconChevronRight } from '@tabler/icons'; +import Customization from '../Customization'; // styles const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })(({ theme, open }) => ({ @@ -140,6 +141,7 @@ const MainLayout = () => { )} + ); }; diff --git a/src/store/actions.js b/src/store/actions.js index 7c42d6f..f93ff9c 100755 --- a/src/store/actions.js +++ b/src/store/actions.js @@ -2,4 +2,3 @@ export const LOGIN = 'LOGIN'; export const LOGOUT = 'LOGOUT'; export const REGISTER = 'REGISTER'; -export const FIREBASE_STATE_CHANGED = 'FIREBASE_STATE_CHANGED'; diff --git a/src/ui-component/cards/BackgroundPattern1.js b/src/ui-component/cards/BackgroundPattern1.js deleted file mode 100755 index 457f7bc..0000000 --- a/src/ui-component/cards/BackgroundPattern1.js +++ /dev/null @@ -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 ( - - {children} - - ); -}; - -BackgroundPattern1.propTypes = { - children: PropTypes.node -}; - -export default BackgroundPattern1; diff --git a/src/ui-component/cards/BackgroundPattern2.js b/src/ui-component/cards/BackgroundPattern2.js deleted file mode 100755 index 1b2fec2..0000000 --- a/src/ui-component/cards/BackgroundPattern2.js +++ /dev/null @@ -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 ( - *': { - 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} - - ); -}; - -BackgroundPattern2.propTypes = { - children: PropTypes.node -}; - -export default BackgroundPattern2; diff --git a/src/ui-component/cards/BillCard.js b/src/ui-component/cards/BillCard.js deleted file mode 100755 index 6f09339..0000000 --- a/src/ui-component/cards/BillCard.js +++ /dev/null @@ -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 ( - - - - - - {primary} - - - - - {secondary} - - - - - - - - - ); -}; - -BillCard.propTypes = { - primary: PropTypes.string, - secondary: PropTypes.string, - link: PropTypes.string, - color: PropTypes.string, - bg: PropTypes.string -}; - -export default BillCard; diff --git a/src/ui-component/cards/Post/Comment/Reply/index.js b/src/ui-component/cards/Post/Comment/Reply/index.js deleted file mode 100755 index b790b59..0000000 --- a/src/ui-component/cards/Post/Comment/Reply/index.js +++ /dev/null @@ -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 && ( - - - - - - - - - - - - - - {replies.profile.name} - - - - - {' '} - {replies.profile.time} - - - - - - - - - - - - Edit - Delete - - - - - - - {replies.data.comment} - - - - - - - - - - - - - )} - - ); -}; - -Reply.propTypes = { - commentId: PropTypes.string, - handleReplayLikes: PropTypes.func, - onReply: PropTypes.func, - postId: PropTypes.string, - reply: PropTypes.object -}; - -export default Reply; diff --git a/src/ui-component/cards/Post/Comment/index.js b/src/ui-component/cards/Post/Comment/index.js deleted file mode 100755 index 364b8a8..0000000 --- a/src/ui-component/cards/Post/Comment/index.js +++ /dev/null @@ -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 ( - <> - ( - - )} - {...others} - /> - {errorMessage && ( - - {errorMessage} - - )} - - ); -}; - -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) => ( - - )); - } - - 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 && ( - - - - - - - - - - - - - {comment.profile.name} - - - - - {comment.profile.time} - - - - - - - - - - - - Edit - Delete - - - - - - - {comment.data?.comment} - - - - - - - - - - - - )} - {repliesResult} - {/* comment - add new replay */} - - {openReply && ( - - -
- - - - - - - - - - ) - }} - /> - - - - - - - - -
- - - )} - - - ); -}; - -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; diff --git a/src/ui-component/cards/Post/index.js b/src/ui-component/cards/Post/index.js deleted file mode 100755 index 85cffba..0000000 --- a/src/ui-component/cards/Post/index.js +++ /dev/null @@ -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 ( - <> - ( - - )} - {...others} - /> - {errorMessage && ( - - {errorMessage} - - )} - - ); -}; - -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) => ( - - )); - } - - 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 ( - - - - - - - - - - - - {profile.name} - - - - - {profile.time} - - - - - - - - - - - - Edit - Delete - - - - - - {/* post - content */} - p': { - ...theme.typography.body1, - mb: 0 - } - }} - > - {data.content} - - - {/* post - photo grid */} - {data && data.images && data.images.length > 0 && ( - - - - )} - - {/* post - video */} - {data.video && ( - - - - )} - - {/* post - comment, likes and replay history */} - - - - - - - - - - - - - - - Share Now - - - Share to Friends - - - Send in Messanger - - - Copy Link - - - - - - {/* add new comment */} - - {openComment && ( - -
- - - - - - - - - - - - - - - -
- - )} - - {commentsResult} - - - ); -}; - -Post.propTypes = { - commentAdd: PropTypes.func, - handleCommentLikes: PropTypes.func, - handlePostLikes: PropTypes.func, - handleReplayLikes: PropTypes.func, - post: PropTypes.object, - replyAdd: PropTypes.func -}; - -export default Post; diff --git a/src/ui-component/cards/RoundIconCard.js b/src/ui-component/cards/RoundIconCard.js deleted file mode 100755 index 80f7564..0000000 --- a/src/ui-component/cards/RoundIconCard.js +++ /dev/null @@ -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 ? : null; - - return ( - - - - - - {primary} - - {secondary} - - {content} - - - - - - {primaryIcon} - - - - - ); -}; - -RoundIconCard.propTypes = { - primary: PropTypes.string, - secondary: PropTypes.string, - content: PropTypes.string, - iconPrimary: PropTypes.object, - color: PropTypes.string, - bgcolor: PropTypes.string -}; - -export default RoundIconCard; diff --git a/src/ui-component/cards/UserProfileCard.js b/src/ui-component/cards/UserProfileCard.js deleted file mode 100755 index 17379b4..0000000 --- a/src/ui-component/cards/UserProfileCard.js +++ /dev/null @@ -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 ( - - - - - - - - - - - - - - - {name} - - - {role} - - - {status === 'Active' ? ( - - ) : ( - - )} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -UserProfileCard.propTypes = { - avatar: PropTypes.string, - name: PropTypes.string, - profile: PropTypes.string, - role: PropTypes.string, - status: PropTypes.string -}; - -export default UserProfileCard; diff --git a/src/ui-component/cards/UserSimpleCard.js b/src/ui-component/cards/UserSimpleCard.js deleted file mode 100755 index 20b03a9..0000000 --- a/src/ui-component/cards/UserSimpleCard.js +++ /dev/null @@ -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 ( - - - - - - - - - - - - - Edit - Delete - - - - - - - - {name} - - - {status === 'Active' ? ( - - ) : ( - - )} - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -UserSimpleCard.propTypes = { - avatar: PropTypes.string, - name: PropTypes.string, - status: PropTypes.string -}; - -export default UserSimpleCard;