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-30 01:24:59 +00:00
parent 5c771b8c9c
commit 55ff138100
14 changed files with 322 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(feed)/feed/page.tsx
+24 -59
View File
@@ -1,9 +1,9 @@
"use client";
import { useState } from "react";
import { MOCK_SHOPS } from "@/lib/constants";
import Image from "next/image";
import Link from "next/link";
import { MOCK_SHOPS } from "@/lib/constants";
import { useState } from "react";
export default function FeedPage() {
const [searchName, setSearchName] = useState("");
@@ -21,32 +21,27 @@ export default function FeedPage() {
return (
<main className="bg-background min-h-[calc(100vh-var(--spacing-header-height))]">
<div className="max-w-7xl mx-auto px-4 md:px-6 lg:px-8 py-8">
<div className="mx-auto max-w-7xl px-4 py-8 md:px-6 lg:px-8">
{/* Page title */}
<div className="mb-8">
<h1 className="text-2xl md:text-3xl font-bold text-foreground">
<h1 className="text-foreground text-2xl font-bold md:text-3xl">
Khám phá quán nước
</h1>
<p className="text-sm text-(--color-text-muted) mt-1">
<p className="mt-1 text-sm text-(--color-text-muted)">
Tìm và chọn quán yêu thích của bạn
</p>
</div>
{/* Shop cards grid */}
{filteredShops.length > 0 ? (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-10">
<div className="mb-10 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
{filteredShops.map((shop) => (
<div
key={shop.id}
className="bg-(--color-bg-card) rounded-2xl border border-(--color-border)
shadow-[0_2px_12px_var(--color-shadow-sm)]
overflow-hidden
hover:shadow-[0_4px_20px_var(--color-shadow-md)]
hover:-translate-y-1
transition-all duration-250"
className="overflow-hidden rounded-2xl border border-(--color-border) bg-(--color-bg-card) shadow-[0_2px_12px_var(--color-shadow-sm)] transition-all duration-250 hover:-translate-y-1 hover:shadow-[0_4px_20px_var(--color-shadow-md)]"
>
{/* Shop image */}
<div className="relative w-full h-48 sm:h-52">
<div className="relative h-48 w-full sm:h-52">
<Image
src={shop.image}
alt={shop.name}
@@ -59,18 +54,13 @@ export default function FeedPage() {
{/* Card body */}
<div className="p-4">
{/* Name + View menu button */}
<div className="flex items-center justify-between gap-3 mb-2">
<h3 className="font-bold text-base text-foreground truncate">
<div className="mb-2 flex items-center justify-between gap-3">
<h3 className="text-foreground truncate text-base font-bold">
{shop.name}
</h3>
<Link
href="/"
className="shrink-0 inline-flex items-center gap-1.5
px-3.5 py-2 rounded-xl text-xs font-semibold
bg-(--color-primary) text-white
hover:bg-(--color-primary-dark)
active:scale-95
transition-all duration-150 no-underline"
className="inline-flex shrink-0 items-center gap-1.5 rounded-xl bg-(--color-primary) px-3.5 py-2 text-xs font-semibold text-white no-underline transition-all duration-150 hover:bg-(--color-primary-dark) active:scale-95"
>
<i className="fa-solid fa-book-open text-[10px]"></i>
Xem menu
@@ -88,7 +78,7 @@ export default function FeedPage() {
</div>
) : (
/* Empty state */
<div className="flex flex-col items-center justify-center py-24 gap-4 text-(--color-text-muted) mb-10">
<div className="mb-10 flex flex-col items-center justify-center gap-4 py-24 text-(--color-text-muted)">
<i className="fa-solid fa-store text-5xl opacity-30"></i>
<p className="text-base font-medium">
Không tìm thấy quán nào phù hợp
@@ -98,8 +88,7 @@ export default function FeedPage() {
setSearchName("");
setSearchAddress("");
}}
className="text-sm text-(--color-primary) hover:underline cursor-pointer
border-none bg-transparent"
className="cursor-pointer border-none bg-transparent text-sm text-(--color-primary) hover:underline"
>
Xóa bộ lọc
</button>
@@ -107,43 +96,29 @@ export default function FeedPage() {
)}
{/* Filter / Search bar */}
<div
className="sticky bottom-0 bg-(--color-bg-card) border border-(--color-border)
rounded-2xl shadow-[0_-2px_16px_var(--color-shadow-sm)]
p-4 md:p-5"
>
<div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
<div className="sticky bottom-0 rounded-2xl border border-(--color-border) bg-(--color-bg-card) p-4 shadow-[0_-2px_16px_var(--color-shadow-sm)] md:p-5">
<div className="flex flex-col items-stretch gap-3 sm:flex-row sm:items-center">
{/* Label */}
<div className="flex items-center gap-2 shrink-0 text-sm font-semibold text-(--color-text-secondary)">
<div className="flex shrink-0 items-center gap-2 text-sm font-semibold text-(--color-text-secondary)">
<i className="fa-solid fa-filter text-(--color-primary)"></i>
<span>Lọc quán</span>
</div>
{/* Search by name */}
<div className="relative flex-1 min-w-0">
<i
className="fa-solid fa-store absolute left-3 top-1/2 -translate-y-1/2
text-xs text-(--color-text-muted) pointer-events-none"
></i>
<div className="relative min-w-0 flex-1">
<i className="fa-solid fa-store pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-xs text-(--color-text-muted)"></i>
<input
type="text"
value={searchName}
onChange={(e) => setSearchName(e.target.value)}
placeholder="Tìm theo tên quán..."
className="w-full pl-9 pr-9 py-2.5 text-sm rounded-xl border outline-none
bg-background text-foreground
border-(--color-border) placeholder:text-(--color-text-muted)
focus:border-(--color-primary) focus:ring-2
focus:ring-(--color-primary) focus:ring-opacity-20
transition-all duration-150"
className="bg-background text-foreground focus:ring-opacity-20 w-full rounded-xl border border-(--color-border) py-2.5 pr-9 pl-9 text-sm transition-all duration-150 outline-none placeholder:text-(--color-text-muted) focus:border-(--color-primary) focus:ring-2 focus:ring-(--color-primary)"
/>
{searchName && (
<button
onClick={() => setSearchName("")}
aria-label="Xóa tìm kiếm tên"
className="absolute right-3 top-1/2 -translate-y-1/2 text-(--color-text-muted)
hover:text-(--color-primary) transition-colors duration-150
cursor-pointer border-none bg-transparent p-0"
className="absolute top-1/2 right-3 -translate-y-1/2 cursor-pointer border-none bg-transparent p-0 text-(--color-text-muted) transition-colors duration-150 hover:text-(--color-primary)"
>
<i className="fa-solid fa-xmark text-sm"></i>
</button>
@@ -151,30 +126,20 @@ export default function FeedPage() {
</div>
{/* Search by address */}
<div className="relative flex-1 min-w-0">
<i
className="fa-solid fa-location-dot absolute left-3 top-1/2 -translate-y-1/2
text-xs text-(--color-text-muted) pointer-events-none"
></i>
<div className="relative min-w-0 flex-1">
<i className="fa-solid fa-location-dot pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-xs text-(--color-text-muted)"></i>
<input
type="text"
value={searchAddress}
onChange={(e) => setSearchAddress(e.target.value)}
placeholder="Tìm theo địa chỉ..."
className="w-full pl-9 pr-9 py-2.5 text-sm rounded-xl border outline-none
bg-background text-foreground
border-(--color-border) placeholder:text-(--color-text-muted)
focus:border-(--color-primary) focus:ring-2
focus:ring-(--color-primary) focus:ring-opacity-20
transition-all duration-150"
className="bg-background text-foreground focus:ring-opacity-20 w-full rounded-xl border border-(--color-border) py-2.5 pr-9 pl-9 text-sm transition-all duration-150 outline-none placeholder:text-(--color-text-muted) focus:border-(--color-primary) focus:ring-2 focus:ring-(--color-primary)"
/>
{searchAddress && (
<button
onClick={() => setSearchAddress("")}
aria-label="Xóa tìm kiếm địa chỉ"
className="absolute right-3 top-1/2 -translate-y-1/2 text-(--color-text-muted)
hover:text-(--color-primary) transition-colors duration-150
cursor-pointer border-none bg-transparent p-0"
className="absolute top-1/2 right-3 -translate-y-1/2 cursor-pointer border-none bg-transparent p-0 text-(--color-text-muted) transition-colors duration-150 hover:text-(--color-primary)"
>
<i className="fa-solid fa-xmark text-sm"></i>
</button>