Wire Meshkee catalog: products, blog, mega menu, and product search.

Catalog-only (no cart); search targets store items and products pages.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
2026-08-21 16:04:31 +03:30
co-authored by Cursor
parent cfa21cbee9
commit 8e14748b48
29 changed files with 1460 additions and 244 deletions
+55 -18
View File
@@ -5,10 +5,26 @@ import Link from "next/link";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { Container } from "@/components/Container";
import { Placeholder } from "@/components/Placeholder";
import { blogPosts } from "@/lib/data";
import { blogHref, blogImage, type BlogPost } from "@/lib/blog";
import { formatFaDate } from "@/lib/format";
export function BlogCarousel() {
type LocalPost = {
slug: string;
title: string;
excerpt: string;
date: string;
image: string;
};
export function BlogCarousel({
posts = [],
fallback = [],
}: {
posts?: BlogPost[];
fallback?: LocalPost[];
}) {
const scroller = useRef<HTMLDivElement>(null);
const usingApi = posts.length > 0;
const scrollByCard = (direction: number) => {
const node = scroller.current;
@@ -56,22 +72,43 @@ export function BlogCarousel() {
</div>
<div ref={scroller} className="no-scrollbar flex snap-x snap-mandatory gap-5 overflow-x-auto">
{blogPosts.map((post) => (
<article key={post.slug} className="w-[min(85vw,340px)] shrink-0 snap-start">
<Link href={`/blog/${post.slug}`} className="group block">
<div className="overflow-hidden rounded-2xl">
<Placeholder
src={post.image}
alt={post.title}
className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-105"
/>
</div>
<p className="mt-4 font-latin text-[11px] tracking-[0.18em] text-muted">{post.date}</p>
<h3 className="mt-2 text-[16px] font-bold leading-7 group-hover:text-brand">{post.title}</h3>
<p className="mt-2 line-clamp-2 text-[13px] leading-7 text-muted">{post.excerpt}</p>
</Link>
</article>
))}
{usingApi
? posts.map((post) => (
<article key={post.id} className="w-[min(85vw,340px)] shrink-0 snap-start">
<Link href={blogHref(post)} className="group block">
<div className="overflow-hidden rounded-2xl">
<Placeholder
src={blogImage(post)}
alt={post.title}
className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-105"
/>
</div>
<p className="mt-4 font-latin text-[11px] tracking-[0.18em] text-muted">
{formatFaDate(post.publishedAt || post.createdAt)}
</p>
<h3 className="mt-2 text-[16px] font-bold leading-7 group-hover:text-brand">{post.title}</h3>
{post.abstract ? (
<p className="mt-2 line-clamp-2 text-[13px] leading-7 text-muted">{post.abstract}</p>
) : null}
</Link>
</article>
))
: fallback.map((post) => (
<article key={post.slug} className="w-[min(85vw,340px)] shrink-0 snap-start">
<Link href={`/blog/${post.slug}`} className="group block">
<div className="overflow-hidden rounded-2xl">
<Placeholder
src={post.image}
alt={post.title}
className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-105"
/>
</div>
<p className="mt-4 font-latin text-[11px] tracking-[0.18em] text-muted">{post.date}</p>
<h3 className="mt-2 text-[16px] font-bold leading-7 group-hover:text-brand">{post.title}</h3>
<p className="mt-2 line-clamp-2 text-[13px] leading-7 text-muted">{post.excerpt}</p>
</Link>
</article>
))}
</div>
</Container>
</section>