chagne from page to app

n-festa · Jan 12, 2024 · 1544361 · 1544361
1 parent 90453ed
commit 1544361
Show file tree

Hide file tree

Showing 39 changed files with 2,307 additions and 344 deletions.
diff --git a/package.json b/package.json
@@ -32,7 +32,8 @@
     "react-toastify": "^9.1.3",
     "swiper": "^11.0.3",
     "swr": "^2.2.4",
-    "yup": "^1.3.2"
+    "yup": "^1.3.2",
+    "zustand": "^4.4.7"
   },
   "devDependencies": {
     "@types/node": "^20",

diff --git a/src/app/api/product.ts b/src/app/api/product.ts
@@ -0,0 +1,13 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+// fake data
+import products from '@/utils/fake_data/menu-items';
+
+export default (req: NextApiRequest, res: NextApiResponse) => {
+  	console.log(req);
+
+  	// fake loading time
+ 	setTimeout(() => {
+    	res.status(200).json(products);
+  	}, 800);
+}
diff --git a/src/app/chef/[id]/page.tsx b/src/app/chef/[id]/page.tsx
@@ -1,10 +1,77 @@
-
+import Cart from "@/app/ui/cart";
+import Breadcrumb from "@/app/ui/breadcrumb";
 const ChefDetailPage = () =>{
 
     return (
-        <div>
-            ChefDetailPage
-        </div>
+        <section className="chef-detail-and-card-info-section d-flex container">
+    		<div className="chef-detail-wrapper flex-grow-1">
+				<Breadcrumb />
+
+				<div className="chef-image-wrapper d-flex gap-2">
+                    <div className="primary-image">
+                        <img src="/images/Rectangle.png" alt="" />
+                    </div>
+                    <div className="secondary-images">
+                        <img src="/images/unsplash_nmpW_WwwVSc.png" alt=""/>
+                        <img src="/images/unsplash_6fHRzS9yMj0.png" alt=""/>
+                        <img src="/images/unsplash_inDRPMBfX8M.png" alt=""/>
+                    </div>
+                </div>
+
+                <div className="chef-info mt-3 py-3">
+                    <div className="title d-flex justify-content-between">
+                        <div className="heading d-flex flex-column">
+                            <div className="primary-title">
+                                The Chef Town
+                            </div>
+                            <div className="secondary-title">
+                                Eat clean | Cơm Nhật Tonkatsu
+                            </div>
+                        </div>
+
+                        <div className="rating-and-promo d-flex flex-column px-3">
+                            <div className="rating d-flex gap-2">
+                                <div className="d-flex gap-1">
+                                    <img src="/images/star-icon.svg" alt="" />
+                                    <div className="text">4.5 (+100)</div>
+                                </div>
+
+                                <div className="d-flex gap-1">
+                                    <img src="/images/marker-pin-02.svg" alt=""/>
+                                    <div className="text">3,2 km</div>
+                                </div>
+
+                                <div className="d-flex gap-1">
+                                    <img src="/images/timer.svg" alt=""/>
+                                    <div className="text">20 min</div>
+                                </div>
+                            </div>
+                            <div className="promo d-flex gap-1">
+                                <img src="/images/frame-2729.svg" alt=""/>
+                                <div className="text">Ưu đãi đến 50k</div>
+                            </div>
+                            <div className="adjust-flavor-time  d-flex gap-1">
+                                <img src="/images/frame-2725.svg" alt="" />
+                                <div className="text">Đặt trước 09:00 giờ sáng để điều chỉnh vị</div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="description mt-3">
+                        <span className="content">Giới thiệu về quán - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                            tempor incididunt dsdsut labore et dolore magna aliqua elit, sed do eiusmod tempor incididunt ueli
+                            incididunt uelitincididu nttemp
+                        </span>
+                        <div>
+                            <span>......</span>
+                            <span className="expand-more">xem thêm</span>
+                        </div>
+                    </div>
+                </div>
+			</div>
+
+			<Cart />
+		</section>
     )
 }
 

diff --git a/src/app/chef/layout.tsx b/src/app/chef/layout.tsx
@@ -0,0 +1,10 @@
+import Header from '../ui/header';
+
+export default function Layout({children,}: {children: React.ReactNode;}) {
+  	return (
+	    <div className="">
+            <Header />
+	        {children}
+	    </div>
+  	)
+}