show product on user side

src/components/Navbar.js

@@ -18,6 +18,7 @@ import { UserContext } from "@/pages/_app";
 import Link from "next/link";
 import { Favorite } from "@mui/icons-material";
 import { Logout, SupervisedUserCircle } from "@mui/icons-material";
+import { useRouter } from "next/router";
 
 const Search = styled("div")(({ theme }) => ({
   position: "relative",
@@ -60,6 +61,9 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({
 }));
 
 function Navbar(props) {
+  const router = useRouter();
+  const [search, setSearch] = React.useState(router.query?.q ?? "");
+
   const user = useContext(UserContext);
   const { window } = props;
   const [anchorEl, setAnchorEl] = React.useState(null);
@@ -68,6 +72,12 @@ function Navbar(props) {
   const isMenuOpen = Boolean(anchorEl);
   const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
 
+  React.useEffect(() => {
+    if (search.length)
+      router.push({ pathname: router.pathname, query: { q: search } });
+    else router.push({ pathname: router.pathname });
+  }, [search]);
+
   const handleMobileMenuClose = () => {
     setMobileMoreAnchorEl(null);
   };
@@ -251,12 +261,18 @@ function Navbar(props) {
             <StyledInputBase
               placeholder="Search…"
               inputProps={{ "aria-label": "search" }}
+              onChange={(e) => setSearch(e.target.value)}
             />
           </Search>
           <Box sx={{ flexGrow: 1 }} />
           <Box sx={{ display: { xs: "none", md: "flex" } }}>
             {MenuList.map((menu, idx) => (
-              <Link title={menu.label} className="text-white" key={idx} href={menu.link}>
+              <Link
+                title={menu.label}
+                className="text-white"
+                key={idx}
+                href={menu.link}
+              >
                 <span>{menu.element}</span>
               </Link>
             ))}

src/components/ProductCard.js

+import React from "react";
+import {
+  Card,
+  Box,
+  CardContent,
+  CardMedia,
+  CardActions,
+  Button,
+  Typography,
+} from "@mui/material";
+import { Favorite } from "@mui/icons-material";
+import { FavoriteBorder } from "@mui/icons-material";
+import { ProductionQuantityLimits } from "@mui/icons-material";
+import { AddShoppingCart } from "@mui/icons-material";
+import { ShoppingCart } from "@mui/icons-material";
+import { RemoveShoppingCart } from "@mui/icons-material";
+
+export default function ProductCard({ product, isFav }) {
+  return (
+    <Card
+      sx={{
+        m: 1,
+        px: 1,
+        width: 300,
+        // height: 500,
+        display: "inline-block",
+      }}
+    >
+      <CardMedia
+        sx={{ pt: 1 }}
+        className="rounded"
+        component={"img"}
+        height={150}
+        image={product.image.length ? product.image : "/empty.jpg"}
+      />
+      <CardContent sx={{ px: 1 }}>
+        <Box sx={{ px: 1 }}>
+          <h5 className="h-[40px] overflow-y-hidden">{product.name}</h5>
+        </Box>
+        <Typography
+          sx={{ height: 70, overflowY: "scroll" }}
+          variant="body2"
+          color={"text.secondary"}
+        >
+          {product.detail}
+        </Typography>
+      </CardContent>
+      <CardActions
+        disableSpacing
+        sx={{ justifyContent: "space-between", px: 1 }}
+      >
+        <span>
+          <Button title={isFav ? "ถูกใจแล้ว" : "ถูกใจ"} color="error">
+            {isFav ? <Favorite /> : <FavoriteBorder />}
+          </Button>
+          <Button title="เพิ่มลงตระกร้า" color="warning">
+            <ShoppingCart />
+          </Button>
+        </span>
+        {Number(product.discount) > 0 ? (
+          <Box color={"orangered"}>
+            <small className="px-1">
+              <del>${Number(product.price).toLocaleString()}</del>
+            </small>
+            $
+            {(
+              Number(product.price) - 
+              Number(product.price) *
+              (Number(product.discount) / 100)
+            ).toLocaleString()}
+          </Box>
+        ) : (
+          <Box color={"orangered"}>
+            ${Number(product.price).toLocaleString()}
+          </Box>
+        )}
+      </CardActions>
+    </Card>
+  );
+}

src/pages/index.js

-import { Inter } from 'next/font/google'
-import Head from 'next/head'
+import axios from "axios";
+import { Inter } from "next/font/google";
+import Head from "next/head";
+import { useEffect, useState } from "react";
+import ProductCard from "@/components/ProductCard";
+import { useRouter } from "next/router";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export default function Home() {
+  const router = useRouter();
+  const [products, setProducts] = useState([]);
+
+  const productsFilter = !!router.query?.q
+    ? products.filter((prod) => String(prod.name).includes(router.query.q))
+    : products.filter((prod) => Number(prod.stock) > 0);
+
+  const FetchProduct = async () => {
+    let response = await axios.get("/api/product");
+    console.log(response.data);
+    setProducts(response.data);
+  };
+
+  useEffect(() => {
+    FetchProduct();
+  }, []);
   return (
     <>
       <Head>
-      <title>หน้าหลัก | OpenShop</title>
+        <title>OpenShop</title>
       </Head>
       <div>
-      <h1>Hello world</h1>
+        <div className="mx-auto text-left grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4 max-w-[1520px]">
+          {productsFilter.map((prod, idx) => (
+            <ProductCard key={idx} isFav={false} product={prod} />
+          ))}
+        </div>
       </div>
     </>
-  )
+  );
 }