65 lines
3.1 KiB
TypeScript
65 lines
3.1 KiB
TypeScript
import React from 'react';
|
|
import { Card, Box, Skeleton, Grid } from '@mui/material';
|
|
|
|
export const ProductCardSkeleton: React.FC = () => {
|
|
return (
|
|
<Card sx={{ border: '1px solid #E6DFD5', boxShadow: 'none' }}>
|
|
<Skeleton variant="rectangular" height={260} animation="wave" />
|
|
<Box sx={{ p: 2 }}>
|
|
<Skeleton variant="text" width="60%" height={20} animation="wave" />
|
|
<Skeleton variant="text" width="90%" height={28} sx={{ my: 1 }} animation="wave" />
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 2 }}>
|
|
<Skeleton variant="text" width="30%" height={24} animation="wave" />
|
|
<Skeleton variant="circular" width={32} height={32} animation="wave" />
|
|
</Box>
|
|
</Box>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export const BlogCardSkeleton: React.FC = () => {
|
|
return (
|
|
<Card sx={{ border: '1px solid #E6DFD5', boxShadow: 'none' }}>
|
|
<Skeleton variant="rectangular" height={200} animation="wave" />
|
|
<Box sx={{ p: 3 }}>
|
|
<Skeleton variant="text" width="40%" height={16} animation="wave" />
|
|
<Skeleton variant="text" width="95%" height={32} sx={{ my: 1 }} animation="wave" />
|
|
<Skeleton variant="text" width="80%" height={20} animation="wave" />
|
|
<Box sx={{ display: 'flex', alignItems: 'center', mt: 3, gap: 1.5 }}>
|
|
<Skeleton variant="circular" width={36} height={36} animation="wave" />
|
|
<Box sx={{ flex: 1 }}>
|
|
<Skeleton variant="text" width="50%" height={16} animation="wave" />
|
|
<Skeleton variant="text" width="30%" height={14} animation="wave" />
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export const ProductDetailSkeleton: React.FC = () => {
|
|
return (
|
|
<Grid container spacing={4} sx={{ py: 4 }}>
|
|
<Grid size={{ xs: 12, md: 6 }}>
|
|
<Skeleton variant="rectangular" height={450} sx={{ borderRadius: 2 }} animation="wave" />
|
|
<Box sx={{ display: 'flex', gap: 2, mt: 2 }}>
|
|
<Skeleton variant="rectangular" width={80} height={80} sx={{ borderRadius: 1 }} animation="wave" />
|
|
<Skeleton variant="rectangular" width={80} height={80} sx={{ borderRadius: 1 }} animation="wave" />
|
|
<Skeleton variant="rectangular" width={80} height={80} sx={{ borderRadius: 1 }} animation="wave" />
|
|
</Box>
|
|
</Grid>
|
|
<Grid size={{ xs: 12, md: 6 }}>
|
|
<Skeleton variant="text" width="30%" height={20} animation="wave" />
|
|
<Skeleton variant="text" width="85%" height={48} sx={{ my: 1 }} animation="wave" />
|
|
<Skeleton variant="text" width="95%" height={24} animation="wave" />
|
|
<Skeleton variant="text" width="90%" height={24} animation="wave" />
|
|
<Skeleton variant="rectangular" height={60} sx={{ my: 3, borderRadius: 1 }} animation="wave" />
|
|
<Box sx={{ display: 'flex', gap: 2, mt: 3 }}>
|
|
<Skeleton variant="rectangular" width="60%" height={48} sx={{ borderRadius: 6 }} animation="wave" />
|
|
<Skeleton variant="rectangular" width="35%" height={48} sx={{ borderRadius: 6 }} animation="wave" />
|
|
</Box>
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
};
|