feat: go back btn

WebmasterCamp · Jul 15, 2023 · bbbaac1 · bbbaac1
1 parent 74b3316
commit bbbaac1
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 17 deletions.
diff --git a/src/app/browse/[category]/page.tsx b/src/app/browse/[category]/page.tsx
@@ -1,3 +1,4 @@
+import { GoBack } from "@/components/Category/GoBack";
 import { ItemsGrid } from "@/components/Category/ItemsGrid";
 import { Typography } from "@mui";
 import { NextPage } from "next";
@@ -12,7 +13,7 @@ const CategoryPage: NextPage<CategoryPageProps> = ({ params }) => {
     return (
         <>
             <ItemsGrid category={params.category} />
-            <Typography>Category: {params.category}</Typography>
+            <GoBack />
         </>
     );
 };

diff --git a/src/components/Category/GoBack.tsx b/src/components/Category/GoBack.tsx
@@ -0,0 +1,16 @@
+import { Box, Typography } from "@mui";
+import Link from "next/link";
+import { FC } from "react";
+
+export const GoBack: FC = () => {
+    return (
+        <Box sx={{ marginTop: 2 }}>
+            <Link
+                href={"/browse"}
+                style={{ textDecoration: "none", color: "black" }}
+            >
+                <Typography>Go back</Typography>
+            </Link>
+        </Box>
+    );
+};
diff --git a/src/components/Category/ItemBuyCard.tsx b/src/components/Category/ItemBuyCard.tsx
@@ -1,30 +1,42 @@
-import { Box, ToggleButton } from '@mui';
-import { FC } from 'react';
+"use client";
+
+import { useAppContext } from "@/core/contexts";
+import { Box, ToggleButton } from "@mui";
+import { FC } from "react";
+
+interface ItemBuyCardProps {
+    name: string;
+}
+
+export const ItemBuyCard: FC<ItemBuyCardProps> = ({ name }) => {
+    const { searchText } = useAppContext();
 
-export const ItemBuyCard: FC = () => {
     return (
         <Box
             sx={{
-                width: '100%',
+                display: name.includes(searchText.toLowerCase())
+                    ? "block"
+                    : "none",
+                width: "100%",
             }}
         >
             <Box
                 sx={{
-                    width: '100%',
-                    height: '20vh',
-                    backgroundColor: 'lightgray',
+                    width: "100%",
+                    height: "20vh",
+                    backgroundColor: "lightgray",
                 }}
             >
-                item hguy
+                {name}
             </Box>
             <ToggleButton
                 value="web"
                 sx={{
                     height: 4,
-                    width: '100%',
+                    width: "100%",
                     borderRadius: 0,
-                    border: 'none',
-                    backgroundColor: 'gray',
+                    border: "none",
+                    backgroundColor: "gray",
                 }}
             >
                 BUY

diff --git a/src/components/Category/ItemsGrid.tsx b/src/components/Category/ItemsGrid.tsx
@@ -1,6 +1,7 @@
 import { Box, Typography } from "@mui";
 import { FC } from "react";
 import { ItemBuyCard } from "./ItemBuyCard";
+import { Ingredients } from "@/core/contexts/data";
 
 interface ItemsGridProps {
     category: string;
@@ -27,11 +28,9 @@ export const ItemsGrid: FC<ItemsGridProps> = ({ category }) => {
                     width: "100%",
                 }}
             >
-                <ItemBuyCard />
-                <ItemBuyCard />
-                <ItemBuyCard />
-                <ItemBuyCard />
-                <ItemBuyCard />
+                {Ingredients.filter((i) => i.category === category).map((i) => (
+                    <ItemBuyCard key={i.name} name={i.name} />
+                ))}
             </Box>
         </Box>
     );