61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import type { BoxProps } from '@mui/material/Box';
|
|
import Box from '@mui/material/Box';
|
|
import Pagination, { paginationClasses } from '@mui/material/Pagination';
|
|
import { paths } from 'src/routes/paths';
|
|
import type { IPartyEventItem } from 'src/types/party-event';
|
|
import { ProductItem } from './party-event-item';
|
|
import { ProductItemSkeleton } from './party-event-skeleton';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
type Props = BoxProps & {
|
|
loading?: boolean;
|
|
partyEvents: IPartyEventItem[];
|
|
};
|
|
|
|
export function PartyEventList({ partyEvents, loading, sx, ...other }: Props) {
|
|
const renderLoading = () => <ProductItemSkeleton />;
|
|
|
|
const renderList = () =>
|
|
partyEvents.map((partyEvent) => (
|
|
<ProductItem
|
|
key={partyEvent.id}
|
|
partyEvent={partyEvent}
|
|
detailsHref={paths.partyEvent.details(partyEvent.id)}
|
|
/>
|
|
));
|
|
|
|
return (
|
|
<>
|
|
<Box
|
|
sx={[
|
|
() => ({
|
|
gap: 3,
|
|
display: 'grid',
|
|
gridTemplateColumns: {
|
|
xs: 'repeat(1, 1fr)',
|
|
sm: 'repeat(2, 1fr)',
|
|
md: 'repeat(3, 1fr)',
|
|
lg: 'repeat(4, 1fr)',
|
|
},
|
|
}),
|
|
...(Array.isArray(sx) ? sx : [sx]),
|
|
]}
|
|
{...other}
|
|
>
|
|
{loading ? renderLoading() : renderList()}
|
|
</Box>
|
|
|
|
{partyEvents.length > 8 && (
|
|
<Pagination
|
|
count={8}
|
|
sx={{
|
|
mt: { xs: 5, md: 8 },
|
|
[`& .${paginationClasses.ul}`]: { justifyContent: 'center' },
|
|
}}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|