First Commit
This commit is contained in:
cesnimda
@@ -0,0 +1,60 @@
|
||||
'use client';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// @mui
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import Card from '@mui/material/Card';
|
||||
import Box from '@mui/material/Box';
|
||||
|
||||
// @project
|
||||
import { withAlpha } from '@/utils/colorUtils';
|
||||
import GetImagePath from '@/utils/GetImagePath';
|
||||
|
||||
/*************************** GRAPHICS CARD ***************************/
|
||||
|
||||
export default function GraphicsCard({ sx, children, overLay = false, bgImage, ...rest }) {
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Card
|
||||
role="img"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="graphics card"
|
||||
elevation={0}
|
||||
sx={{
|
||||
bgcolor: 'grey.100',
|
||||
borderRadius: { xs: 6, sm: 8, md: 10 },
|
||||
...(bgImage && {
|
||||
backgroundImage: `url(${GetImagePath(bgImage)})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center'
|
||||
}),
|
||||
|
||||
...(overLay && {
|
||||
position: 'relative',
|
||||
'&:before': {
|
||||
content: `' '`,
|
||||
position: 'absolute',
|
||||
width: 1,
|
||||
height: 1,
|
||||
top: 0,
|
||||
left: 0,
|
||||
background: typeof overLay === 'string' ? overLay : withAlpha(theme.vars.palette.grey[100], 0.75)
|
||||
}
|
||||
}),
|
||||
...sx
|
||||
}}
|
||||
{...rest}
|
||||
>
|
||||
{overLay ? <Box sx={{ position: 'relative', height: 1 }}>{children}</Box> : children}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
GraphicsCard.propTypes = {
|
||||
sx: PropTypes.any,
|
||||
children: PropTypes.any,
|
||||
overLay: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
|
||||
bgImage: PropTypes.any,
|
||||
rest: PropTypes.any
|
||||
};
|
||||
@@ -0,0 +1,63 @@
|
||||
import PropTypes from 'prop-types';
|
||||
// @mui
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Box from '@mui/material/Box';
|
||||
|
||||
// @project
|
||||
import { GraphicsCard } from '@/components/cards';
|
||||
import SvgIcon from '@/components/SvgIcon';
|
||||
|
||||
/*************************** COMMON - ICON CARD ***************************/
|
||||
|
||||
export default function IconCard({ icon, title, content, iconAvatar, contentCard, titleProps, stackProps, contentProps, cardPadding }) {
|
||||
const defaultBoxPadding = { xs: 3, sm: 4, md: 5 };
|
||||
const boxPadding = cardPadding ? { ...cardPadding } : defaultBoxPadding;
|
||||
|
||||
return (
|
||||
<GraphicsCard sx={{ height: 1, width: 1 }}>
|
||||
<Stack sx={{ gap: iconAvatar || contentCard ? 2.5 : 2, height: 1 }} {...(stackProps && { ...stackProps })}>
|
||||
<Box sx={{ px: boxPadding, pt: boxPadding, lineHeight: 0 }}>
|
||||
{iconAvatar ? (
|
||||
<Avatar sx={{ width: 60, height: 60, bgcolor: typeof iconAvatar === 'boolean' ? 'grey.300' : iconAvatar }}>
|
||||
<SvgIcon {...(typeof icon === 'string' ? { name: icon } : { ...icon })} />
|
||||
</Avatar>
|
||||
) : (
|
||||
<Box>
|
||||
<SvgIcon {...(typeof icon === 'string' ? { name: icon } : { ...icon })} size={40} />
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
<GraphicsCard
|
||||
sx={{ p: boxPadding, height: 1, ...(contentCard && { bgcolor: typeof contentCard === 'boolean' ? 'grey.200' : contentCard }) }}
|
||||
>
|
||||
<Stack sx={{ gap: { xs: 1, sm: 1.5 }, justifyContent: 'flex-end', height: 1 }}>
|
||||
{title && (
|
||||
<Typography variant="h4" {...(titleProps && { ...titleProps })}>
|
||||
{title}
|
||||
</Typography>
|
||||
)}
|
||||
{content && (
|
||||
<Typography {...(contentProps && { ...contentProps })} sx={{ color: 'text.secondary' }}>
|
||||
{content}
|
||||
</Typography>
|
||||
)}
|
||||
</Stack>
|
||||
</GraphicsCard>
|
||||
</Stack>
|
||||
</GraphicsCard>
|
||||
);
|
||||
}
|
||||
|
||||
IconCard.propTypes = {
|
||||
icon: PropTypes.any,
|
||||
title: PropTypes.any,
|
||||
content: PropTypes.any,
|
||||
iconAvatar: PropTypes.any,
|
||||
contentCard: PropTypes.any,
|
||||
titleProps: PropTypes.any,
|
||||
stackProps: PropTypes.any,
|
||||
contentProps: PropTypes.any,
|
||||
cardPadding: PropTypes.any
|
||||
};
|
||||
@@ -0,0 +1,54 @@
|
||||
'use client';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// @next
|
||||
import { usePathname } from 'next/navigation';
|
||||
|
||||
import Chip from '@mui/material/Chip';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
|
||||
// @project
|
||||
import GraphicsCard from '@/components/cards/GraphicsCard';
|
||||
import GraphicsImage from '@/components/GraphicsImage';
|
||||
import SvgIcon from '@/components/SvgIcon';
|
||||
|
||||
/*************************** PREVIEW CARD ***************************/
|
||||
|
||||
export default function PreviewCard({ title, theme, image, status }) {
|
||||
const pathname = usePathname();
|
||||
|
||||
const cardStyle = {
|
||||
bgcolor: theme && pathname.includes(theme) ? 'grey.100' : 'transparent',
|
||||
borderRadius: 3,
|
||||
padding: 1,
|
||||
'&:hover': { bgcolor: theme && pathname.includes(theme) ? 'grey.200' : 'grey.50', cursor: 'pointer' }
|
||||
};
|
||||
|
||||
return (
|
||||
<GraphicsCard sx={cardStyle}>
|
||||
<Stack sx={{ gap: 1 }}>
|
||||
<GraphicsImage cardMediaProps={{ component: 'img' }} image={image} sx={{ minHeight: { xs: 115, sm: 160 } }} />
|
||||
<Stack direction="row" sx={{ justifyContent: 'space-between' }}>
|
||||
<Typography variant="subtitle1" sx={{ color: 'text.primary', mt: 0.25 }}>
|
||||
{title}
|
||||
</Typography>
|
||||
<Stack sx={{ justifyContent: 'center' }}>
|
||||
{!status ? (
|
||||
<SvgIcon name="tabler-arrow-up-right" color="text.primary" size={16} stroke={2} />
|
||||
) : (
|
||||
<Chip
|
||||
label={status}
|
||||
size="small"
|
||||
slotProps={{ label: { sx: { px: 1.5, py: 0.5, minWidth: 20, typography: 'caption', color: 'primary.main' } } }}
|
||||
sx={{ bgcolor: 'primary.lighter' }}
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</GraphicsCard>
|
||||
);
|
||||
}
|
||||
|
||||
PreviewCard.propTypes = { title: PropTypes.any, theme: PropTypes.any, image: PropTypes.any, status: PropTypes.any };
|
||||
@@ -0,0 +1,2 @@
|
||||
export { default as GraphicsCard } from './GraphicsCard';
|
||||
export { default as IconCard } from './IconCard';
|
||||
+35
@@ -0,0 +1,35 @@
|
||||
'use client';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import AvatarGroup from '@mui/material/AvatarGroup';
|
||||
import Stack from '@mui/material/Stack';
|
||||
import Typography from '@mui/material/Typography';
|
||||
|
||||
// @project
|
||||
import GetImagePath from '@/utils/GetImagePath';
|
||||
|
||||
// @assets
|
||||
import Wave from '@/images/graphics/Wave';
|
||||
|
||||
/*************************** CARD - PROFILE GROUP ***************************/
|
||||
|
||||
export default function ProfileGroup({ review, avatarGroups, sx }) {
|
||||
return (
|
||||
<Stack sx={{ gap: 1, ...sx }}>
|
||||
<Stack sx={{ gap: 0.5 }}>
|
||||
<AvatarGroup max={5} sx={{ justifyContent: 'flex-end', '& .MuiAvatar-root': { borderWidth: 1, ml: -1.75 } }}>
|
||||
{avatarGroups.map((item, index) => (
|
||||
<Avatar key={index} src={GetImagePath(item.avatar)} alt="Avatar" slotProps={{ img: { loading: 'lazy' } }} />
|
||||
))}
|
||||
</AvatarGroup>
|
||||
<Typography variant="subtitle2" sx={{ color: 'text.secondary' }}>
|
||||
{review}
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Wave />
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
ProfileGroup.propTypes = { review: PropTypes.string, avatarGroups: PropTypes.array, sx: PropTypes.any };
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { default as ProfileGroup } from './ProfileGroup';
|
||||
Reference in New Issue
Block a user