-
- - To get started, edit the page.tsx file. -
-- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -
-
-
-
+ {/* ── Sidebar ── */}
+ setIsSidebarOpen((prev) => !prev)}
+ activeCategory={activeCategory}
+ onCategoryChange={(id) => {
+ setActiveCategory(id);
+ setSearchQuery(""); // clear search when switching category
+ }}
+ />
+
+ {/* ── Main content ── */}
+
+
+ {/* ── Section heading + search bar ── */}
+
);
diff --git a/components/COMPONENTS.md b/components/COMPONENTS.md
new file mode 100644
index 0000000..cb6c7ca
--- /dev/null
+++ b/components/COMPONENTS.md
@@ -0,0 +1,60 @@
+# Components Documentation
+
+> **BlackBox AI Rule:**
+> Whenever you create a new component in the components/ directory, or when the user asks to save a component to this file, **automatically append a new section** following the template below. Fill in all fields based on the component source code — props/interface, default values, types, usage example, and notes. Do not skip any field; if a value is unknown, write N/A.
+
+---
+
+## Component Template (for BlackBox AI)
+
+Use this template when adding a new component entry:
+
+
+
+---
+
+## CartProduct
+
+**File:** components/CartProduct.tsx
+**Description:** A product card component that displays a product image, formatted price, a Mua (Buy) button, and a short description. Designed for use in shopping cart or product listing UIs.
+
+### Props / Interface
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| image | string | yes | — | URL or path to the product image (used with Next.js Image). |
+| imageAlt | string | no | Product image | Alt text for the product image (accessibility). |
+| price | number or string | yes | — | Product price. If number, auto-formatted to Vietnamese Dong (VND). If string, rendered as-is. |
+| description | string | yes | — | Short product description shown in the card footer. Clamped to 2 lines. |
+| onBuy | () => void | no | undefined | Callback fired when the Mua button is clicked. |
+
+### Internal Logic
+
+- formattedPrice: If price is a number, it is formatted using toLocaleString(vi-VN, { style: currency, currency: VND }). If price is already a string, it is rendered directly.
+
+### CSS / Styling Notes
+
+| Element | Tailwind Classes | Purpose |
+|---------|-----------------|---------|
+| Card wrapper | flex flex-col w-64 rounded-2xl overflow-hidden shadow-md border border-gray-100 bg-white hover:shadow-lg transition-shadow duration-300 | Outer card with hover shadow |
+| Image container | relative w-full h-48 bg-gray-100 | Fixed-height image area |
+| Price text | text-lg font-bold text-red-500 | Highlighted price in red |
+| Buy button | bg-blue-600 hover:bg-blue-700 active:bg-blue-800 text-white text-sm font-semibold px-4 py-2 rounded-lg transition-colors duration-200 cursor-pointer | Primary action button |
+| Description area | px-4 py-3 border-t border-gray-100 bg-gray-50 | Footer section with light background |
+| Description text | text-sm text-gray-600 leading-relaxed line-clamp-2 | Truncated 2-line description |
+
+### Dependencies
+
+- next/image — Next.js optimized Image component
+- Tailwind CSS — utility-first CSS framework
+
+### Usage Example
+
+
+
+### Notes
+
+- Card width is fixed at w-64 (256px). Adjust if a responsive layout is needed.
+- The description is clamped to 2 lines via line-clamp-2; longer text will be truncated with ellipsis.
+- If onBuy is not provided, the button renders but does nothing on click.
+- Price formatting uses Vietnamese locale (vi-VN) and VND currency by default when price is a number.
diff --git a/components/CartProduct.tsx b/components/CartProduct.tsx
new file mode 100644
index 0000000..e063449
--- /dev/null
+++ b/components/CartProduct.tsx
@@ -0,0 +1,98 @@
+"use client";
+
+import Image from "next/image";
+
+interface CartProductProps {
+ image: string;
+ imageAlt?: string;
+ productName: string;
+ price: number | string;
+ description: string;
+ onBuy?: () => void;
+}
+
+/**
+ * Product card — fills the parent grid cell width (w-full).
+ *
+ * Layout (top → bottom):
+ * 1. Image area (fixed height h-36) with coffee-mug fallback icon
+ * 2. Name + description (flex-1, grows to fill space)
+ * 3. Price + Buy button row (pinned to bottom)
+ *
+ * Responsive: card width is controlled by the parent grid, not the card itself.
+ */
+export default function CartProduct({
+ image,
+ imageAlt = "Ảnh sản phẩm",
+ productName,
+ price,
+ description,
+ onBuy,
+}: CartProductProps) {
+ const formattedPrice =
+ typeof price === "number"
+ ? price.toLocaleString("vi-VN", { style: "currency", currency: "VND" })
+ : price;
+
+ return (
+
+ {/* Title + count */}
+
+
+ {/* ── Product grid ── */}
+ {filteredProducts.length > 0 ? (
+
+
+
+ {/* Search input */}
+ + {activeCategoryLabel} +
++ {filteredProducts.length} món +
+
+
+ setSearchQuery(e.target.value)}
+ placeholder="Tìm kiếm món..."
+ className="w-full pl-9 pr-9 py-2 text-sm rounded-xl border outline-none
+ bg-[var(--color-bg-card)] text-[var(--color-text-primary)]
+ border-[var(--color-border)] placeholder:text-[var(--color-text-muted)]
+ focus:border-[var(--color-primary)] focus:ring-2
+ focus:ring-[var(--color-primary)] focus:ring-opacity-20
+ transition-all duration-150"
/>
- Deploy Now
-
-
- Documentation
-
+ {/* Clear button */}
+ {searchQuery && (
+
+ )}
+
+ {filteredProducts.map((product) => (
+ {
+ /* TODO: add to cart logic */
+ console.log("Thêm vào giỏ:", product.name);
+ }}
+ />
+ ))}
+
+ ) : (
+ /* Empty state */
+
+
+
+ )}
+ {searchQuery + ? `Không tìm thấy món nào cho "${searchQuery}"` + : "Chưa có món trong danh mục này"} +
+ {searchQuery && ( + + )} +
+ {/* ── Image area ── */}
+
+ );
+}
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
new file mode 100644
index 0000000..0ba555c
--- /dev/null
+++ b/components/Navbar.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import Link from "next/link";
+import { MENU_CATEGORIES, SHOP_INFO } from "@/lib/constants";
+import type { MenuCategory } from "@/lib/types";
+
+interface NavbarProps {
+ /** Whether the sidebar is expanded (true) or icon-only (false) */
+ isOpen: boolean;
+ /** Toggle expand / collapse */
+ onToggle: () => void;
+ /** Currently selected category id */
+ activeCategory?: string;
+ /** Fired when user clicks a category */
+ onCategoryChange?: (id: string) => void;
+}
+
+/**
+ * Left sidebar — always visible, collapsible on all screen sizes.
+ *
+ * Collapsed → 64 px wide, icon only
+ * Expanded → 240 px wide, icon + label
+ *
+ * Width transition is handled by Tailwind w-16 / w-60 + transition-all.
+ * Parent controls open/close state via isOpen + onToggle props.
+ */
+export default function Navbar({
+ isOpen,
+ onToggle,
+ activeCategory = "all",
+ onCategoryChange,
+}: NavbarProps) {
+ const handleClick = (id: string) => {
+ onCategoryChange?.(id);
+ };
+
+ return (
+
+ );
+}
diff --git a/layouts/footer.tsx b/layouts/footer.tsx
new file mode 100644
index 0000000..b35b4c8
--- /dev/null
+++ b/layouts/footer.tsx
@@ -0,0 +1,206 @@
+import Image from "next/image";
+import Link from "next/link";
+import { SHOP_INFO, SOCIAL_LINKS } from "@/lib/constants";
+
+/**
+ * Site Footer — 3-section 12-column grid.
+ *
+ * Sections:
+ * 1. Brand info (logo, name, tagline, address, phone, hours)
+ * 2. Social links (Facebook, TikTok, Website)
+ * 3. WiFi card (network name + password)
+ *
+ * Responsive:
+ * - Mobile : all sections stack full-width (col-span-12)
+ * - md : brand 6 cols | social 3 | wifi 3
+ * - lg : brand 5 cols | social 3 | wifi 4
+ */
+export default function Footer() {
+ return (
+
+ );
+}
diff --git a/layouts/header.tsx b/layouts/header.tsx
new file mode 100644
index 0000000..21b2c5c
--- /dev/null
+++ b/layouts/header.tsx
@@ -0,0 +1,141 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { SHOP_INFO, MOCK_USERS } from "@/lib/constants";
+import type { User } from "@/lib/types";
+
+/**
+ * Site Header — sticky top bar, always visible on all screen sizes.
+ *
+ * 3-column layout:
+ * [Brand: logo + name + tagline] | [Center: quick info] | [Auth button]
+ *
+ * Login state cycles for UI demo (click the button to switch):
+ * Guest → Manager (Quản lý) → Staff → Guest
+ *
+ * Responsive:
+ * - Logo + shop name : always visible
+ * - Tagline : hidden on mobile, shown on md+
+ * - Center info : hidden on mobile, shown on lg+
+ * - Button label : hidden on xs, shown on sm+
+ */
+export default function Header() {
+ const [user, setUser] = useState
+ {/* Fallback icon (shown when image fails or is missing) */}
+ {
+ (e.currentTarget as HTMLImageElement).style.display = "none";
+ }}
+ />
+
+
+ {/* ── Name + description ── */}
+
+
+
+ {/* Product image */}
+
+
+
+ {/* ── Price + Buy button ── */}
+ + {productName} +
++ {description} +
+
+
+ {formattedPrice}
+
+
+
+
+
+ {/* ── LEFT: Brand ── */}
+
+ {/* Logo */}
+
+
+
+
+ {/* Name + tagline */}
+
+
+ {SHOP_INFO.name}
+
+
+ {SHOP_INFO.tagline}
+
+
+
+
+ {/* ── RIGHT: Auth ── */}
+
+
+ {!user ? (
+ /* Guest: sign-in button */
+
+
+ ) : user.role === "manager" ? (
+ /* Manager: gold badge */
+
+
+ ) : (
+ /* Staff / regular user: avatar + name */
+
+ )}
+
+
+