create egg page

theodo · Jul 5, 2023 · 7eca956 · 7eca956
1 parent f16d40a
commit 7eca956
Show file tree

Hide file tree

Showing 11 changed files with 130 additions and 151 deletions.
diff --git a/public/product_assets/dairy_coffee/egg.jpg b/public/product_assets/dairy_coffee/egg.jpg
diff --git a/public/product_assets/data/dairy_coffee.json → ...product_assets/data/dairy_coffee_egg.json b/public/product_assets/data/dairy_coffee.json → ...product_assets/data/dairy_coffee_egg.json
@@ -1,130 +1,138 @@
 [
   {
     "id": "ea86d695-59b7-465d-94b9-4b31ca4f8ab8",
-    "title": "Watermelon",
+    "title": "Cheddar",
     "description": "Cillum in laborum eu sint.",
-    "price": "$ 2.42 each",
+    "price": "2.42€ pièce",
     "previewImageUrl": "/product_assets/dairy_coffee/american_cheese.jpg",
-    "category": "DAIRY_COFFEE"
+    "category": "DAIRY_COFFEE_EGG"
   },
   {
     "id": "3b4470d2-ce5c-4967-8088-1162b191d1d8",
-    "title": "Green Apple",
+    "title": "Beurre",
     "description": "Ipsum velit officia officia eiusmod commodo tempor.",
-    "price": "$ 1.69 each",
+    "price": "1.69€ pièce",
     "previewImageUrl": "/product_assets/dairy_coffee/butter.jpg",
-    "category": "DAIRY_COFFEE"
+    "category": "DAIRY_COFFEE_EGG"
   },
   {
     "id": "d98c63f7-323c-49a0-879b-a49e76b55d84",
-    "title": "Apricot",
+    "title": "Graines de café",
     "description": "Proident ea voluptate veniam nulla duis fugiat veniam.",
-    "price": "$ 1.22 each",
+    "price": "1.22€ pièce",
     "previewImageUrl": "/product_assets/dairy_coffee/coffee_beans.jpg",
-    "category": "DAIRY_COFFEE"
+    "category": "DAIRY_COFFEE_EGG"
   },
   {
     "id": "b119f376-0228-4d9f-a0c0-56cc46d62c51",
-    "title": "Plum",
+    "title": "Capsule de café",
     "description": "Exercitation nostrud nisi labore id occaecat quis nulla.",
-    "price": "$ 3.21 each",
+    "price": "3.21€ pièce",
     "previewImageUrl": "/product_assets/dairy_coffee/coffee_capsule.jpg",
-    "category": "DAIRY_COFFEE"
+    "category": "DAIRY_COFFEE_EGG"
   },
   {
     "id": "e9591ded-7b1a-4428-97a1-1435a675306c",
-    "title": "Yellow Apple",
+    "title": "Papier filtre",
     "description": "Laborum laboris dolore eiusmod sint dolor eiusmod cillum.",
-    "price": "$ 4.11 each",
+    "price": "4.11€ pièce",
     "previewImageUrl": "/product_assets/dairy_coffee/coffee_paper_filter.jpg",
-    "category": "DAIRY_COFFEE"
+    "category": "DAIRY_COFFEE_EGG"
   },
   {
     "id": "24d3e3d3-9dd5-467d-a1b8-f1dfa4959dba",
-    "title": "Orange",
+    "title": "Café broyé",
     "description": "Eiusmod dolore elit cillum ex sint sunt irure laborum.",
-    "price": "$ 1.21 each",
+    "price": "1.21€ pièce",
     "previewImageUrl": "/product_assets/dairy_coffee/coffee_powder.jpg",
-    "category": "DAIRY_COFFEE"
+    "category": "DAIRY_COFFEE_EGG"
   },
   {
     "id": "69824912-20ca-4e74-951d-82cc9a5c43e2",
-    "title": "Strawberry",
+    "title": "Lait concentré",
     "description": "Elit ex in aliqua magna ut voluptate labore ullamco dolor voluptate in ex.",
-    "price": "$ 1.61 each",
+    "price": "1.61€ pièce",
     "previewImageUrl": "/product_assets/dairy_coffee/condensed_milk.jpg",
-    "category": "DAIRY_COFFEE"
+    "category": "DAIRY_COFFEE_EGG"
   },
   {
     "id": "8aebeb2f-2442-4801-8c73-80e0901e8ba6",
-    "title": "Peach",
+    "title": "Crème",
     "description": "Excepteur mollit enim et dolore ipsum eu non reprehenderit.",
-    "price": "$ 1.36 each",
+    "price": "1.36€ pièce",
     "previewImageUrl": "/product_assets/dairy_coffee/cream.jpg",
-    "category": "DAIRY_COFFEE"
+    "category": "DAIRY_COFFEE_EGG"
   },
   {
     "id": "6e1301f3-c547-4166-9487-ede8cba2e88e",
-    "title": "Red Apple",
+    "title": "Ghee",
     "description": "Consectetur excepteur sit id enim deserunt laborum officia.",
-    "price": "$ 2.57 each",
+    "price": "2.57€ pièce",
     "previewImageUrl": "/product_assets/dairy_coffee/ghee.jpg",
-    "category": "DAIRY_COFFEE"
+    "category": "DAIRY_COFFEE_EGG"
   },
   {
     "id": "79cf61db-65cd-422e-a077-384f4e45a64c",
-    "title": "Watermelon",
+    "title": "Glace",
     "description": "Aliquip id esse dolor ad adipisicing labore cillum sint est irure.",
-    "price": "$ 3.91 each",
+    "price": "3.91€ pièce",
     "previewImageUrl": "/product_assets/dairy_coffee/ice_cream.jpg",
-    "category": "DAIRY_COFFEE"
+    "category": "DAIRY_COFFEE_EGG"
   },
   {
     "id": "968805b1-cc7b-4597-9f20-edf2df7798b4",
-    "title": "Green Apple",
+    "title": "Lait",
     "description": "Laborum sint laboris consectetur officia.",
-    "price": "$ 7.23 each",
+    "price": "7.23€ pièce",
     "previewImageUrl": "/product_assets/dairy_coffee/milk.jpg",
-    "category": "DAIRY_COFFEE"
+    "category": "DAIRY_COFFEE_EGG"
   },
   {
     "id": "d67c00e2-f3a3-4ffe-a06c-0d08c8d4ee3f",
-    "title": "Apricot",
+    "title": "Parmesan",
     "description": "Deserunt voluptate dolor est quis aute.",
-    "price": "$ 1.91 each",
+    "price": "1.91€ pièce",
     "previewImageUrl": "/product_assets/dairy_coffee/parmesan_cheese.jpg",
-    "category": "DAIRY_COFFEE"
+    "category": "DAIRY_COFFEE_EGG"
   },
   {
     "id": "79ad3f98-0719-4dd0-970a-8b53296f10e1",
-    "title": "Plum",
+    "title": "Lait en poudre",
     "description": "Excepteur eu anim consequat irure cillum fugiat nostrud.",
-    "price": "$ 3.97 each",
+    "price": "3.97€ pièce",
     "previewImageUrl": "/product_assets/dairy_coffee/powdered_milk.jpg",
-    "category": "DAIRY_COFFEE"
+    "category": "DAIRY_COFFEE_EGG"
   },
   {
     "id": "93bd748b-40b1-4064-9bff-205d97ac0404",
-    "title": "Yellow Apple",
+    "title": "Fromage frais",
     "description": "Aute sit officia duis excepteur.",
-    "price": "$ 1.04 each",
+    "price": "1.04€ pièce",
     "previewImageUrl": "/product_assets/dairy_coffee/soft_cheese.jpg",
-    "category": "DAIRY_COFFEE"
+    "category": "DAIRY_COFFEE_EGG"
   },
   {
     "id": "7cfabc56-e24f-4631-bb43-99c3dd8b4e50",
-    "title": "Orange",
+    "title": "Fromage suisse",
     "description": "Occaecat ex consequat qui nulla sint proident do elit.",
-    "price": "$ 1.73 each",
+    "price": "1.73€ pièce",
     "previewImageUrl": "/product_assets/dairy_coffee/swiss_cheese.jpg",
-    "category": "DAIRY_COFFEE"
+    "category": "DAIRY_COFFEE_EGG"
   },
   {
     "id": "6c543f63-f66a-4b66-9910-d56943d0fd60",
-    "title": "Strawberry",
+    "title": "Yaourt",
     "description": "Pariatur dolore amet cupidatat eiusmod pariatur officia.",
-    "price": "$ 3.18 each",
+    "price": "3.18€ pièce",
     "previewImageUrl": "/product_assets/dairy_coffee/yogurt.jpg",
-    "category": "DAIRY_COFFEE"
+    "category": "DAIRY_COFFEE_EGG"
+  },
+  {
+    "id": "b1b0b6a0-5b0a-4b0e-8b0a-2b0b0b0b0b0b",
+    "title": "Oeuf",
+    "description": "Pariatur dolore amet cupidatat eiusmod pariatur officia.",
+    "price": "0,5€ pièce",
+    "previewImageUrl": "/product_assets/dairy_coffee/egg.jpg",
+    "category": "DAIRY_COFFEE_EGG"
   }
 ]
diff --git a/src/components/ui/AppBar/Menu/Menu.tsx b/src/components/ui/AppBar/Menu/Menu.tsx
@@ -21,6 +21,11 @@ const menuItems = [
     link: "flour",
     icon: require("/public/icons/flour.svg"),
   },
+  {
+    text: ProductCategory.DAIRY_COFFEE_EGG,
+    link: "egg",
+    icon: require("/public/icons/egg.svg"),
+  },
 ];
 
 const Menu: React.FC = () => {

diff --git a/src/components/ui/Cards/ProductCard/ProductCard.tsx b/src/components/ui/Cards/ProductCard/ProductCard.tsx
@@ -1,32 +1,39 @@
 import { Typography, Paper, Box } from "@mui/material";
-import Image from "next/image";
 
 import { Product } from "src/types/product";
 
+import { getImageStyle, stylePrice } from "./ProductCardStyle";
 import AddToCartButton from "../AddToCartButton/AddToCartButton";
 
 export interface IProductCard {
   product: Product;
+  tiny?: boolean;
 }
 
-const ProductCard: React.FC<IProductCard> = ({ product }) => {
+const ProductCard: React.FC<IProductCard> = ({ product, tiny = false }) => {
   return (
     <Paper>
-      <Image
-        alt={product.title}
-        src={product.previewImageUrl}
-        width={218}
-        height={218}
-        layout="responsive"
-      />
-      <Box paddingX={2} paddingY={1}>
-        <Typography>{product.title}</Typography>
-
-        <Box display="flex" justifyContent="space-between" alignItems="center">
-          <Typography variant="caption">{product.price}</Typography>
-          <AddToCartButton product={product} />
+      <Box style={getImageStyle(product, true)}>
+        <Box
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            width: "100%",
+            padding: "5px",
+          }}
+        >
+          <Typography style={stylePrice}>{product.price}</Typography>
+          <AddToCartButton product={product} tiny={tiny} />
         </Box>
       </Box>
+      <Typography
+        style={{
+          display: "flex",
+          justifyContent: "center",
+        }}
+      >
+        {product.title}
+      </Typography>
     </Paper>
   );
 };

diff --git a/src/components/ui/Cards/ProductCardTinyButton/ProductCardTinyButton.tsx b/src/components/ui/Cards/ProductCardTinyButton/ProductCardTinyButton.tsx
diff --git a/src/components/ui/PageGridTemplate/PageGridTemplate.tsx b/src/components/ui/PageGridTemplate/PageGridTemplate.tsx
@@ -5,7 +5,7 @@ import AppBar from "components/ui/AppBar/AppBar";
 import ProductCardImage from "src/components/ui/Cards/ProductCardImage/ProductCardImage";
 import { Product } from "src/types/product";
 
-import ProductCardTinyButton from "../Cards/ProductCardTinyButton/ProductCardTinyButton";
+import ProductCard from "../Cards/ProductCard/ProductCard";
 
 export interface IPageGridTemplate {
   data: Product[] | undefined;
@@ -20,6 +20,7 @@ interface IGetProductCardElement {
 
 export enum ProductCardTypeEnum {
   Image,
+  Text,
   TinyButton,
 }
 
@@ -30,8 +31,10 @@ const getProductCardElement = ({
   switch (productCardType) {
     case ProductCardTypeEnum.Image:
       return <ProductCardImage product={product} />;
+    case ProductCardTypeEnum.Text:
+      return <ProductCard product={product} />;
     case ProductCardTypeEnum.TinyButton:
-      return <ProductCardTinyButton product={product} />;
+      return <ProductCard product={product} tiny={true} />;
     default:
       return <ProductCardImage product={product} />;
   }

diff --git a/src/pages/api/product/[category].ts b/src/pages/api/product/[category].ts
@@ -1,5 +1,6 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 
+import dairyCoffeeEggData from "public/product_assets/data/dairy_coffee_egg.json";
 import flourData from "public/product_assets/data/flour.json";
 import fruitsData from "public/product_assets/data/fruits.json";
 import { Product, ProductCategory } from "src/types/product";
@@ -19,6 +20,10 @@ export default function handler(
       res.status(200).json(flourData as Product[]);
       break;
 
+    case ProductCategory.DAIRY_COFFEE_EGG:
+      res.status(200).json(dairyCoffeeEggData as Product[]);
+      break;
+
     default:
       res.status(404).end();
       break;

diff --git a/src/pages/egg.tsx b/src/pages/egg.tsx
@@ -0,0 +1,34 @@
+import { CircularProgress } from "@mui/material";
+import type { NextPage } from "next";
+import useSwr from "swr";
+
+import PageGridTemplate, {
+  ProductCardTypeEnum,
+} from "src/components/ui/PageGridTemplate/PageGridTemplate";
+import { useSimulator } from "src/simulators";
+import { SIMULATE_EFFECT } from "src/simulators/types";
+import { Product } from "src/types/product";
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
+
+const EggPage: NextPage = () => {
+  const { data, error } = useSwr<Product[]>(
+    "/api/product/dairy_coffee_egg",
+    fetcher
+  );
+
+  useSimulator([SIMULATE_EFFECT.DISTRACTIONS]);
+
+  if (data === undefined || error) {
+    return <CircularProgress />;
+  }
+  return (
+    <PageGridTemplate
+      data={data}
+      error={error}
+      productCardType={ProductCardTypeEnum.Text}
+    />
+  );
+};
+
+export default EggPage;