Commit 1b360c47 authored by Nawasan Wisitsingkhon's avatar Nawasan Wisitsingkhon

show product on user side

parent 2fcb9a27
......@@ -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>
))}
......
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>
);
}
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>
</Head>
<div>
<h1>Hello world</h1>
</div>
<Head>
<title>OpenShop</title>
</Head>
<div>
<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>
</>
)
);
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment