perf: modified landing page's shop cards
This commit is contained in:
parent
3a075c66ec
commit
9a2d315046
3 changed files with 8 additions and 13 deletions
|
|
@ -47,7 +47,7 @@ export default async function HomePage({ searchParams }: PageProps<"/">) {
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<section className="flex flex-col gap-3 pt-4">
|
<section className="flex flex-col gap-3 pt-4">
|
||||||
<h2 className="px-4 text-title-large font-bold text-foreground">فروشگاههای نزدیک</h2>
|
<h2 className="px-4 text-2xl font-extrabold text-foreground">فروشگاههای نزدیک</h2>
|
||||||
<Suspense fallback={null}>
|
<Suspense fallback={null}>
|
||||||
<CategoryChips categories={categories} />
|
<CategoryChips categories={categories} />
|
||||||
</Suspense>
|
</Suspense>
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@ export function CategoryChips({ categories }: { categories: StoreCategory[] }) {
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => select(null)}
|
onClick={() => select(null)}
|
||||||
className={cn(
|
className={cn(
|
||||||
"shrink-0 rounded-full px-3 py-2 text-body-medium",
|
"shrink-0 rounded-full px-4 py-2.5 text-body-medium font-medium",
|
||||||
!activeUuid ? "bg-primary-action text-white" : "border border-gray-300 bg-white text-foreground",
|
!activeUuid ? "bg-primary-action text-white" : "border border-gray-300 bg-white text-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
|
@ -35,7 +35,7 @@ export function CategoryChips({ categories }: { categories: StoreCategory[] }) {
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => select(category.uuid)}
|
onClick={() => select(category.uuid)}
|
||||||
className={cn(
|
className={cn(
|
||||||
"shrink-0 rounded-full px-3 py-2 text-body-medium",
|
"shrink-0 rounded-full px-4 py-2.5 text-body-medium font-medium",
|
||||||
activeUuid === category.uuid
|
activeUuid === category.uuid
|
||||||
? "bg-primary-action text-white"
|
? "bg-primary-action text-white"
|
||||||
: "border border-gray-300 bg-white text-foreground",
|
: "border border-gray-300 bg-white text-foreground",
|
||||||
|
|
|
||||||
|
|
@ -1,26 +1,21 @@
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import type { StoreListItem } from "@/types/api";
|
import type { StoreListItem } from "@/types/api";
|
||||||
|
|
||||||
/** winofyfrontenddoc (1).md §3.5 store-card. */
|
|
||||||
export function StoreCard({ store }: { store: StoreListItem }) {
|
export function StoreCard({ store }: { store: StoreListItem }) {
|
||||||
return (
|
return (
|
||||||
<Link
|
<Link
|
||||||
href={`/stores/${store.uuid}`}
|
href={`/stores/${store.uuid}`}
|
||||||
className="flex items-center gap-3 rounded-xl border border-gray-300 bg-white p-3 shadow-sm"
|
className="flex items-center gap-4 rounded-2xl border border-gray-300 bg-white p-4 shadow-sm"
|
||||||
>
|
>
|
||||||
<div className="h-[72px] w-[72px] shrink-0 overflow-hidden rounded-[10px] border border-gray-300 bg-muted">
|
<div className="h-24 w-24 shrink-0 overflow-hidden rounded-2xl bg-muted">
|
||||||
{store.logo_url && (
|
{store.logo_url && (
|
||||||
// eslint-disable-next-line @next/next/no-img-element
|
// eslint-disable-next-line @next/next/no-img-element
|
||||||
<img src={store.logo_url} alt={store.name} className="h-full w-full object-cover" />
|
<img src={store.logo_url} alt={store.name} className="h-full w-full object-cover" />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-1 flex-col gap-1">
|
<div className="flex flex-1 flex-col gap-2">
|
||||||
<h3 className="text-[15px] leading-[22px] font-bold text-foreground">{store.name}</h3>
|
<h3 className="text-[18px] font-bold leading-6 text-foreground">{store.name}</h3>
|
||||||
<span className="w-fit rounded-full bg-muted px-2 py-0.5 text-label text-gray-600">{store.category.name}</span>
|
<span className="w-fit rounded-full bg-gray-100 px-3 py-1 text-label text-gray-600">{store.category.name}</span>
|
||||||
<div className="flex items-center justify-between text-label text-gray-600">
|
|
||||||
<span>⭐ {Number(store.rating_avg).toFixed(1)}</span>
|
|
||||||
<span>{store.is_open ? "باز" : "بسته"}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue