FoodSurf/frontend
1
0
Fork 1
Code Pull Requests Actions Packages Releases 31 Activity

chore: release [ci skip]

Browse Source
This commit is contained in:
gitea-actions
2026-03-25 03:07:52 +00:00
parent 372391381f
commit 6a6afc4436
21 changed files with 851 additions and 828 deletions
Download Patch File Download Diff File Expand all files Collapse all files
layouts/footer.tsx
+40 -65
View File
@@ -1,6 +1,6 @@
import { SHOP_INFO, SOCIAL_LINKS } from "@/lib/constants";
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.
@@ -17,16 +17,15 @@ import { SHOP_INFO, SOCIAL_LINKS } from "@/lib/constants";
*/
export default function Footer() {
return (
<footer className="w-full bg-(--color-bg-footer) text-(--color-text-on-dark) overflow-x-hidden">
<footer className="w-full overflow-x-hidden bg-(--color-bg-footer) text-(--color-text-on-dark)">
{/* ── Main grid ── */}
<div className="max-w-screen-2xl mx-auto px-4 md:px-6 lg:px-8 py-10">
<div className="mx-auto max-w-screen-2xl px-4 py-10 md:px-6 lg:px-8">
<div className="grid grid-cols-12 gap-x-8 gap-y-8">
{/* ── 1. Brand info ── */}
<div className="col-span-12 md:col-span-6 lg:col-span-8 xl:col-span-6">
{/* Logo + name */}
<div className="flex items-center gap-3 mb-3">
<div className="relative w-10 h-10 shrink-0">
<div className="mb-3 flex items-center gap-3">
<div className="relative h-10 w-10 shrink-0">
<Image
src={SHOP_INFO.logo}
alt={`Logo ${SHOP_INFO.name}`}
@@ -35,42 +34,42 @@ export default function Footer() {
sizes="40px"
/>
</div>
<span className="font-bold text-lg text-(--color-accent)">
<span className="text-lg font-bold text-(--color-accent)">
{SHOP_INFO.name}
</span>
</div>
{/* Tagline */}
<p className="text-sm opacity-75 leading-relaxed mb-4">
<p className="mb-4 text-sm leading-relaxed opacity-75">
{SHOP_INFO.tagline}
</p>
{/* Contact details */}
<ul className="flex flex-col gap-2 text-sm opacity-80">
<li className="flex items-start gap-2">
<i className="fa-solid fa-location-dot mt-0.5 w-4 text-center text-(--color-accent) shrink-0"></i>
<i className="fa-solid fa-location-dot mt-0.5 w-4 shrink-0 text-center text-(--color-accent)"></i>
<span>Địa chỉ: {SHOP_INFO.address}</span>
</li>
<li className="flex items-center gap-2">
<i className="fa-solid fa-phone w-4 text-center text-(--color-accent) shrink-0"></i>
<i className="fa-solid fa-phone w-4 shrink-0 text-center text-(--color-accent)"></i>
<a
href={`tel:${SHOP_INFO.phone}`}
className="hover:text-(--color-accent) transition-colors duration-150"
className="transition-colors duration-150 hover:text-(--color-accent)"
>
Số điện thoại: {SHOP_INFO.phone}
</a>
</li>
<li className="flex items-center gap-2">
<i className="fa-solid fa-envelope w-4 text-center text-(--color-accent) shrink-0"></i>
<i className="fa-solid fa-envelope w-4 shrink-0 text-center text-(--color-accent)"></i>
<a
href={`mailto:${SHOP_INFO.email}`}
className="hover:text-(--color-accent) transition-colors duration-150"
className="transition-colors duration-150 hover:text-(--color-accent)"
>
Email: {SHOP_INFO.email}
</a>
</li>
<li className="flex items-center gap-2">
<i className="fa-solid fa-clock w-4 text-center text-(--color-accent) shrink-0"></i>
<i className="fa-solid fa-clock w-4 shrink-0 text-center text-(--color-accent)"></i>
<span>Open: {SHOP_INFO.openHours}</span>
</li>
</ul>
@@ -80,11 +79,10 @@ export default function Footer() {
md : side-by-side (each half of the 6-col right block)
lg : stacked (WiFi below Social, both full width of the 4-col block)
── */}
<div className="col-span-12 md:col-span-6 lg:col-span-4 xl:col-span-6 grid grid-cols-1 xl:grid-cols-2 gap-6">
<div className="col-span-12 grid grid-cols-1 gap-6 md:col-span-6 lg:col-span-4 xl:col-span-6 xl:grid-cols-2">
{/* ── 2. Social links ── */}
<div className="col-span-1">
<h3 className="font-bold text-sm uppercase tracking-wider mb-4 text-(--color-accent)">
<h3 className="mb-4 text-sm font-bold tracking-wider text-(--color-accent) uppercase">
Kết nối
</h3>
<ul className="flex flex-col gap-3">
@@ -93,13 +91,9 @@ export default function Footer() {
href={SOCIAL_LINKS.facebook}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-3 text-sm opacity-75 hover:opacity-100
hover:text-(--color-accent) transition-all duration-150"
className="flex items-center gap-3 text-sm opacity-75 transition-all duration-150 hover:text-(--color-accent) hover:opacity-100"
>
<span
className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0
bg-[#1877F2] text-white text-base"
>
<span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[#1877F2] text-base text-white">
<i className="fa-brands fa-facebook-f"></i>
</span>
Facebook
@@ -110,13 +104,9 @@ export default function Footer() {
href={SOCIAL_LINKS.tiktok}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-3 text-sm opacity-75 hover:opacity-100
hover:text-(--color-accent) transition-all duration-150"
className="flex items-center gap-3 text-sm opacity-75 transition-all duration-150 hover:text-(--color-accent) hover:opacity-100"
>
<span
className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0
bg-black text-white text-base"
>
<span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-black text-base text-white">
<i className="fa-brands fa-tiktok"></i>
</span>
TikTok
@@ -125,13 +115,9 @@ export default function Footer() {
<li>
<Link
href={SOCIAL_LINKS.website}
className="flex items-center gap-3 text-sm opacity-75 hover:opacity-100
hover:text-(--color-accent) transition-all duration-150"
className="flex items-center gap-3 text-sm opacity-75 transition-all duration-150 hover:text-(--color-accent) hover:opacity-100"
>
<span
className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0
bg-(--color-primary) text-white text-base"
>
<span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-(--color-primary) text-base text-white">
<i className="fa-solid fa-globe"></i>
</span>
Website
@@ -142,61 +128,50 @@ export default function Footer() {
{/* ── 3. WiFi card ── */}
<div className="col-span-1">
<h3 className="font-bold text-sm uppercase tracking-wider mb-4 text-(--color-accent)">
<h3 className="mb-4 text-sm font-bold tracking-wider text-(--color-accent) uppercase">
WiFi Miễn Phí
</h3>
<div
className="rounded-xl border border-(--color-primary-light) border-opacity-50
p-4 bg-(--color-primary-dark) bg-opacity-30"
>
<div className="flex items-center gap-2 mb-3">
<i className="fa-solid fa-wifi text-(--color-accent) text-lg shrink-0"></i>
<span className="font-semibold text-sm">Kết nối miễn phí</span>
<div className="border-opacity-50 bg-opacity-30 rounded-xl border border-(--color-primary-light) bg-(--color-primary-dark) p-4">
<div className="mb-3 flex items-center gap-2">
<i className="fa-solid fa-wifi shrink-0 text-lg text-(--color-accent)"></i>
<span className="text-sm font-semibold">
Kết nối miễn phí
</span>
</div>
{/* Stacked label + value rows — no overflow risk */}
<div className="flex flex-col gap-3 text-sm">
<div className="flex flex-col gap-1">
<span className="opacity-60 text-xs uppercase tracking-wide">Tên mạng</span>
<span
className="font-mono font-bold text-(--color-accent)
px-2 py-1 rounded border border-(--color-accent)
border-opacity-30 break-all"
>
<span className="text-xs tracking-wide uppercase opacity-60">
Tên mạng
</span>
<span className="border-opacity-30 rounded border border-(--color-accent) px-2 py-1 font-mono font-bold break-all text-(--color-accent)">
{SHOP_INFO.wifi.name}
</span>
</div>
<div className="flex flex-col gap-1">
<span className="opacity-60 text-xs uppercase tracking-wide">Mật khẩu</span>
<span
className="font-mono font-bold text-(--color-accent) tracking-wider
px-2 py-1 rounded border border-(--color-accent)
border-opacity-30 break-all"
>
<span className="text-xs tracking-wide uppercase opacity-60">
Mật khẩu
</span>
<span className="border-opacity-30 rounded border border-(--color-accent) px-2 py-1 font-mono font-bold tracking-wider break-all text-(--color-accent)">
{SHOP_INFO.wifi.password}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{/* ── Bottom bar ── */}
<div className="border-t border-white border-opacity-10">
<div
className="max-w-screen-2xl mx-auto px-4 md:px-6 lg:px-8 py-4
flex flex-col sm:flex-row items-center justify-between gap-2
text-xs opacity-50"
>
<div className="border-opacity-10 border-t border-white">
<div className="mx-auto flex max-w-screen-2xl flex-col items-center justify-between gap-2 px-4 py-4 text-xs opacity-50 sm:flex-row md:px-6 lg:px-8">
<span>
© {new Date().getFullYear()} {SHOP_INFO.name}. All rights reserved.
</span>
<span className="flex items-center gap-1">
Được vận hành {" "}
<i className="fa-solid fa-heart text-(--color-accent) mx-1"></i>{" "}
Được vận hành{" "}
<i className="fa-solid fa-heart mx-1 text-(--color-accent)"></i>{" "}
bằng Drinkool
</span>
</div>
layouts/header.tsx
+15 -61
View File
@@ -1,10 +1,10 @@
"use client";
import { useAuth } from "@/lib/auth-context";
import { SHOP_INFO } from "@/lib/constants";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { SHOP_INFO } from "@/lib/constants";
import { useAuth } from "@/lib/auth-context";
/**
* Site Header — sticky top bar, always visible on all screen sizes.
@@ -36,25 +36,15 @@ export default function Header() {
};
return (
<header
className="w-full sticky top-0 z-50
bg-(--color-bg-header) border-b border-(--color-border)
shadow-[0_1px_8px_var(--color-shadow-sm)]
h-(--spacing-header-height)"
>
<div
className="h-full px-6 md:px-8 lg:px-12
flex items-center justify-between gap-6
max-w-screen-2xl mx-auto"
>
<header className="sticky top-0 z-50 h-(--spacing-header-height) w-full border-b border-(--color-border) bg-(--color-bg-header) shadow-[0_1px_8px_var(--color-shadow-sm)]">
<div className="mx-auto flex h-full max-w-screen-2xl items-center justify-between gap-6 px-6 md:px-8 lg:px-12">
{/* ── LEFT: Brand ── */}
<Link
href="/"
className="flex items-center gap-4 shrink-0 no-underline group"
className="group flex shrink-0 items-center gap-4 no-underline"
>
{/* Logo */}
<div className="relative w-10 h-10 md:w-11 md:h-11 shrink-0">
<div className="relative h-10 w-10 shrink-0 md:h-11 md:w-11">
<Image
src={SHOP_INFO.logo}
alt={`Logo ${SHOP_INFO.name}`}
@@ -67,100 +57,64 @@ export default function Header() {
{/* Name + tagline */}
<div className="flex flex-col leading-tight">
<span
className="font-bold text-base md:text-lg
text-(--color-primary-dark)
group-hover:text-(--color-primary)
transition-colors duration-150"
>
<span className="text-base font-bold text-(--color-primary-dark) transition-colors duration-150 group-hover:text-(--color-primary) md:text-lg">
{SHOP_INFO.name}
</span>
<span className="text-xs hidden md:block text-(--color-text-muted)">
<span className="hidden text-xs text-(--color-text-muted) md:block">
{SHOP_INFO.tagline}
</span>
</div>
</Link>
{/* ── RIGHT: Auth ── */}
<div className="flex items-center gap-3 shrink-0">
<div className="flex shrink-0 items-center gap-3">
{!user ? (
/* Guest: sign-in button */
<button
onClick={handleAuthClick}
title="Đăng nhập"
className="flex items-center gap-2.5 px-5 py-2.5 rounded-xl
text-sm font-semibold border-none cursor-pointer
bg-(--color-primary) text-white
hover:bg-(--color-primary-dark)
active:scale-95 transition-all duration-150"
className="flex cursor-pointer items-center gap-2.5 rounded-xl border-none bg-(--color-primary) px-5 py-2.5 text-sm font-semibold text-white transition-all duration-150 hover:bg-(--color-primary-dark) active:scale-95"
>
<i className="fa-solid fa-right-to-bracket"></i>
<span className="hidden sm:inline">Đăng nhập</span>
</button>
) : user.role === "manager" ? (
/* Manager: gold badge */
<button
onClick={handleAuthClick}
title="Nhấn để đăng xuất"
className="flex items-center gap-2.5 px-4 py-2.5 rounded-xl
text-sm font-semibold cursor-pointer
bg-(--color-accent-light) border border-(--color-accent)
text-(--color-primary-dark)
hover:bg-(--color-accent) hover:text-white
active:scale-95 transition-all duration-150"
className="flex cursor-pointer items-center gap-2.5 rounded-xl border border-(--color-accent) bg-(--color-accent-light) px-4 py-2.5 text-sm font-semibold text-(--color-primary-dark) transition-all duration-150 hover:bg-(--color-accent) hover:text-white active:scale-95"
>
<i className="fa-solid fa-user-tie text-base"></i>
<span className="hidden sm:inline">Quản lý</span>
</button>
) : user.role === "staff" ? (
/* Staff: avatar + name */
<button
onClick={handleAuthClick}
title="Nhấn để đăng xuất"
className="flex items-center gap-2.5 px-4 py-2 rounded-xl
text-sm font-semibold cursor-pointer
bg-background border border-(--color-border)
text-(--color-text-secondary)
hover:border-(--color-primary-light)
hover:bg-(--color-border-light)
active:scale-95 transition-all duration-150"
className="bg-background flex cursor-pointer items-center gap-2.5 rounded-xl border border-(--color-border) px-4 py-2 text-sm font-semibold text-(--color-text-secondary) transition-all duration-150 hover:border-(--color-primary-light) hover:bg-(--color-border-light) active:scale-95"
>
{/* Avatar circle */}
<div
className="w-7 h-7 rounded-full flex items-center justify-center shrink-0
bg-(--color-primary-light) text-white text-xs"
>
<div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-(--color-primary-light) text-xs text-white">
<i className="fa-solid fa-user"></i>
</div>
<span className="hidden sm:inline">{user.name}</span>
</button>
) : (
/* Customer: phone icon + label */
<button
onClick={handleAuthClick}
title={`Khách hàng - ${user.phone || ""} - Nhấn để đăng xuất`}
className="flex items-center gap-2.5 px-4 py-2 rounded-xl
text-sm font-semibold cursor-pointer
bg-(--color-primary-light) text-white
hover:bg-(--color-primary)
active:scale-95 transition-all duration-150
border-none"
className="flex cursor-pointer items-center gap-2.5 rounded-xl border-none bg-(--color-primary-light) px-4 py-2 text-sm font-semibold text-white transition-all duration-150 hover:bg-(--color-primary) active:scale-95"
>
{/* Customer icon */}
<div
className="w-7 h-7 rounded-full flex items-center justify-center shrink-0
bg-white text-(--color-primary-light) text-xs"
>
<div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-white text-xs text-(--color-primary-light)">
<i className="fa-solid fa-user"></i>
</div>
<span className="hidden sm:inline">Khách hàng</span>
</button>
)}
</div>
</div>
</header>