Skip to content

F
final-exam
Commit d3d5cc44 authored by Nawasan Wisitsingkhon's avatar Nawasan Wisitsingkhon
Browse files
Options

add order menu in navbar; 

add order button on cart page;
parent fd257f5f
Hide whitespace changes
Inline Side-by-side
Showing with 88 additions and 59 deletions
src/components/Navbar.js
View file @ d3d5cc44
......@@ -20,6 +20,8 @@ import { Favorite } from "@mui/icons-material";
import { Logout, SupervisedUserCircle } from "@mui/icons-material";
import { useRouter } from "next/router";
import { Cottage } from "@mui/icons-material";
import { Store } from "@mui/icons-material";
import { ShoppingBag } from "@mui/icons-material";
const Search = styled("div")(({ theme }) => ({
position: "relative",
......@@ -127,7 +129,7 @@ function Navbar(props) {
color="inherit"
>
<Badge color="error">
<Cottage />
<Store />
</Badge>
</IconButton>
),
......@@ -162,6 +164,21 @@ function Navbar(props) {
</IconButton>
),
},
{
label: "คำสั่งซื้อ",
link: "/order",
element: (
<IconButton
size="large"
aria-label="show 4 new mails"
color="inherit"
>
<Badge badgeContent={2} color="error">
<ShoppingBag />
</Badge>
</IconButton>
),
},
{
label: user.value.name,
link: "/profile",
......
src/pages/cart.js
View file @ d3d5cc44
......@@ -16,6 +16,7 @@ import { Delete } from "@mui/icons-material";
import { ShoppingCart } from "@mui/icons-material";
import PopupAlert from "@/components/PopupAlert";
import Head from "next/head";
import { ShoppingBag } from "@mui/icons-material";
export default function Cart() {
const user = useContext(UserContext);
......@@ -75,65 +76,76 @@ export default function Cart() {
/>
<Paper sx={{ p: 1, overflowX: "scroll" }}>
{cart.value.length > 0 ? (
<Table>
<TableHead>
<TableRow>
{[
"ลำดับ",
"รูปภาพ",
"ชื่อสินค้า",
"รายละเอียด",
"ราคา",
"นำออกจากรายการ",
].map((label, idx) => (
<TableCell key={idx}>{label}</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{CartProduct.map(
(pdt, idx) =>
pdt && (
<TableRow key={idx}>
<TableCell>{idx + 1}</TableCell>
<TableCell>
<img
width={100}
src={pdt.image?.length ? pdt.image : "/empty.jpg"}
alt="รูปสินค้า"
/>
</TableCell>
<TableCell>{pdt.name}</TableCell>
<TableCell>
<div className="max-h-10 overflow-scroll">
{pdt.detail}
</div>
</TableCell>
<TableCell>
{pdt.discount > 0 ? (
<Box color={"orangered"}>
<del>${pdt.price}</del> $
{pdt.price - pdt.price * (pdt.discount / 100)}
</Box>
) : (
<Box color="orangered">${pdt.price}</Box>
)}
</TableCell>
<TableCell>
<Button
color="error"
onClick={() => removeFromCart(pdt.id)}
>
<Delete />
</Button>
</TableCell>
</TableRow>
)
)}
</TableBody>
</Table>
<Box>
<Table>
<TableHead>
<TableRow>
{[
"ลำดับ",
"รูปภาพ",
"ชื่อสินค้า",
"รายละเอียด",
"ราคา",
"นำออกจากรายการ",
].map((label, idx) => (
<TableCell key={idx}>{label}</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{CartProduct.map(
(pdt, idx) =>
pdt && (
<TableRow key={idx}>
<TableCell>{idx + 1}</TableCell>
<TableCell>
<img
width={100}
src={pdt.image?.length ? pdt.image : "/empty.jpg"}
alt="รูปสินค้า"
/>
</TableCell>
<TableCell>{pdt.name}</TableCell>
<TableCell>
<div className="max-h-10 overflow-scroll">
{pdt.detail}
</div>
</TableCell>
<TableCell>
{pdt.discount > 0 ? (
<Box color={"orangered"}>
<del>${pdt.price}</del> $
{pdt.price - pdt.price * (pdt.discount / 100)}
</Box>
) : (
<Box color="orangered">${pdt.price}</Box>
)}
</TableCell>
<TableCell>
<Button
color="error"
onClick={() => removeFromCart(pdt.id)}
>
<Delete />
</Button>
</TableCell>
</TableRow>
)
)}
</TableBody>
</Table>
<Box sx={{ textAlign: "right", p: 1 }}>
<Button size="large">
<ShoppingBag /> สั่งซื้อ
</Button>
</Box>
</Box>
) : (
<div className="text-center">{user.value?.token ? "รายการว่างเปล่า": "คุณยังไม่ได้เข้าสู่ระบบ"}</div>
<div className="text-center">
{user.value?.token
? "รายการว่างเปล่า"
: "คุณยังไม่ได้เข้าสู่ระบบ"}
</div>
)}
</Paper>
</Box>
......
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