Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | 1x 1x | import Box from '@mui/material/Box'
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import Skeleton from '@mui/material/Skeleton'
import { useTheme } from '@mui/material/styles'
export function TicketCardSkeleton() {
const theme = useTheme()
// Dimensions similaires à TicketCard pour garder la même structure
return (
<Box sx={{ flex: { xs: '1 1 calc(33% - 32px)', md: '1 1 100%' }, minWidth: { xs: 280, md: 'auto' }, maxWidth: { xs: 320, md: '100%' } }}>
<Card
sx={{
display: 'flex',
flexDirection: { xs: 'column', md: 'row' },
alignItems: { xs: 'stretch', md: 'center' },
p: 2,
gap: 1,
}}
>
{/* Zone QR skeleton */}
<Skeleton
variant="rectangular"
sx={{
width: { xs: '100%', md: 200 },
height: { xs: 150, md: 200 },
bgcolor: theme.palette.action.hover,
}}
/>
{/* Contenu principal skeleton */}
<CardContent sx={{ flexGrow: 1 }}>
{/* Titre */}
<Skeleton variant="text" width="60%" height={32} />
{/* Espace pour token */}
<Skeleton variant="text" width="40%" sx={{ mt: 1, mb: 1 }} />
{/* Lignes date / lieu */}
<Skeleton variant="text" width="50%" sx={{ mt: 1 }} />
<Skeleton variant="text" width="70%" sx={{ mt: 0.5 }} />
{/* Ligne places */}
<Skeleton variant="text" width="30%" sx={{ mt: 0.5 }} />
{/* Chip statut placeholder */}
<Skeleton variant="rectangular" width={80} height={24} sx={{ mt: 2, borderRadius: 1 }} />
</CardContent>
{/* Actions skeleton */}
<Box
sx={{
display: 'flex',
flexDirection: { xs: 'row', md: 'column' },
justifyContent: 'center',
alignItems: 'center',
gap: 1,
}}
>
{/* Boutons skeleton */}
<Skeleton variant="rectangular" width={120} height={36} />
<Skeleton variant="rectangular" width={120} height={36} />
</Box>
</Card>
</Box>
)
}
|