meshkee-websites/salar-store
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Wire homepage banners to Meshkee static-image slots.

Browse Source 
Publish a slot catalog so the dashboard can import keys, and keep local placeholders when a slot is empty.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
2026-08-25 17:54:10 +03:30
co-authored by Cursor
parent 46e4835360
commit 49b83223f1
12 changed files with 766 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Categories.tsx
+67 -23
View File
@@ -1,9 +1,12 @@
import Link from "next/link";
import Image from "next/image";
import { SlotImage } from "@/components/SlotImage";
import { categories } from "@/lib/data";
import type { StaticImageWithUrl } from "@/lib/static-images";
import { slotAlt, slotAspectStyle } from "@/lib/static-images";
import { DrawFrame } from "./DrawFrame";
export function Categories() {
export function Categories({ images = [] }: { images?: StaticImageWithUrl[] }) {
return (
<section className="container-site mt-12">
<div className="flex items-end justify-between mb-6">
@@ -13,28 +16,69 @@ export function Categories() {
</Link>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 md:gap-4">
{categories.map((cat) => (
<Link
key={cat.slug}
href={`/products/${cat.slug}`}
className="draw-frame-host relative flex items-center gap-3 rounded-2xl border border-black/5 bg-zinc-50 px-3 py-2 text-brand"
>
<Image
src={cat.image}
alt={cat.name}
width={88}
height={88}
className="size-[72px] sm:size-20 shrink-0 object-contain"
/>
<span className="min-w-0">
<span className="block text-lg font-medium text-ink leading-none">{cat.name}</span>
<span dir="ltr" className="mt-1 block font-oswald text-[10px] font-normal tracking-[0.32em] text-zinc-400 uppercase">
{cat.english}
</span>
</span>
<DrawFrame />
</Link>
))}
{images.length > 0
? images.map((image) => {
const label = slotAlt(image);
const card = (
<div className="draw-frame-host relative flex items-center gap-3 rounded-2xl border border-black/5 bg-zinc-50 px-3 py-2 text-brand">
<div className="size-[72px] sm:size-20 shrink-0 overflow-hidden" style={slotAspectStyle("1:1")}>
<SlotImage
image={{ ...image, linkUrl: null }}
alt={label}
imgClassName="h-full w-full object-contain"
/>
</div>
{label || image.subtext ? (
<span className="min-w-0">
{label ? (
<span className="block text-lg font-medium text-ink leading-none">{label}</span>
) : null}
{image.subtext ? (
<span
dir="ltr"
className="mt-1 block font-oswald text-[10px] font-normal tracking-[0.32em] text-zinc-400 uppercase"
>
{image.subtext}
</span>
) : null}
</span>
) : null}
<DrawFrame />
</div>
);
return image.linkUrl ? (
<a key={image.id} href={image.linkUrl}>
{card}
</a>
) : (
<div key={image.id}>{card}</div>
);
})
: categories.map((cat) => (
<Link
key={cat.slug}
href={`/products/${cat.slug}`}
className="draw-frame-host relative flex items-center gap-3 rounded-2xl border border-black/5 bg-zinc-50 px-3 py-2 text-brand"
>
<Image
src={cat.image}
alt={cat.name}
width={88}
height={88}
className="size-[72px] sm:size-20 shrink-0 object-contain"
/>
<span className="min-w-0">
<span className="block text-lg font-medium text-ink leading-none">{cat.name}</span>
<span
dir="ltr"
className="mt-1 block font-oswald text-[10px] font-normal tracking-[0.32em] text-zinc-400 uppercase"
>
{cat.english}
</span>
</span>
<DrawFrame />
</Link>
))}
</div>
</section>
);