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:
co-authored by
Cursor
parent
cfa21cbee9
commit
8e14748b48
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user