"add PartyEvent frontend module with mock data, API actions, UI components and routing configuration"

2025-06-15 16:13:09 +08:00
parent d987b0fe36
commit a88de2f17f
43 changed files with 4480 additions and 0 deletions
--- a/03_source/frontend/src/sections/party-event/party-event-list.tsx
+++ b/03_source/frontend/src/sections/party-event/party-event-list.tsx
@@ -0,0 +1,60 @@
+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 { IProductItem } from 'src/types/party-event';
+import { ProductItem } from './party-event-item';
+import { ProductItemSkeleton } from './party-event-skeleton';
+
+// ----------------------------------------------------------------------
+
+type Props = BoxProps & {
+  loading?: boolean;
+  products: IProductItem[];
+};
+
+export function ProductList({ products, loading, sx, ...other }: Props) {
+  const renderLoading = () => <ProductItemSkeleton />;
+
+  const renderList = () =>
+    products.map((product) => (
+      <ProductItem
+        key={product.id}
+        product={product}
+        detailsHref={paths.product.details(product.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>
+
+      {products.length > 8 && (
+        <Pagination
+          count={8}
+          sx={{
+            mt: { xs: 5, md: 8 },
+            [`& .${paginationClasses.ul}`]: { justifyContent: 'center' },
+          }}
+        />
+      )}
+    </>
+  );
+}