cesnimda
55 lines
1.9 KiB
React
55 lines
1.9 KiB
React
'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 };
|