Initial react editor website template

2026-08-29 14:03:50 -04:00
commit 3e072967e6
61 changed files with 7041 additions and 0 deletions
@@ -0,0 +1,50 @@
+import Link from 'next/link';
+import { ArrowRight, FileText } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/ui/carousel';
+
+export type PostsCarouselProps = {
+  heading?: string;
+  description?: string;
+  posts?: Array<{ title: string; category?: string; date?: string; imageUrl?: string; imageAlt?: string; url: string; typeLabel?: string }>;
+  viewAllLabel?: string;
+  viewAllUrl?: string;
+};
+
+export default function PostsCarousel({ heading = '', description = '', posts = [], viewAllLabel = '', viewAllUrl = '#' }: PostsCarouselProps) {
+  return (
+    <section id="resources" className="scroll-mt-20 bg-background py-20 sm:py-28">
+      <div className="section-shell">
+        <Carousel opts={{ align: 'start' }}>
+          <div className="flex items-end justify-between gap-8">
+            <div className="max-w-4xl">
+              <h2 className="text-4xl font-normal leading-[0.98] tracking-[-0.04em] sm:text-5xl lg:text-6xl">{heading}</h2>
+              {description && <p className="mt-4 max-w-2xl leading-7 text-muted-foreground">{description}</p>}
+            </div>
+            <div className="hidden shrink-0 gap-2 sm:flex"><CarouselPrevious className="static translate-y-0" /><CarouselNext className="static translate-y-0" /></div>
+          </div>
+          <CarouselContent className="mt-12">
+            {posts.map((post, index) => (
+              <CarouselItem key={index} className="sm:basis-1/2 lg:basis-1/3">
+                <article className="h-full">
+                  <Link href={post.url} className="group block">
+                    <div className="relative aspect-[4/3] overflow-hidden rounded-xl bg-secondary">
+                      {post.imageUrl ? <img src={post.imageUrl} alt={post.imageAlt || ''} className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.02]" /> : <div className="flex h-full items-center justify-center text-sm text-muted-foreground">Add an image</div>}
+                      {post.typeLabel && <span className="absolute left-4 top-4 inline-flex items-center gap-2 rounded-full bg-background px-3 py-2 text-xs font-medium"><FileText className="size-3.5" aria-hidden="true" />{post.typeLabel}</span>}
+                    </div>
+                    <div className="pt-5">
+                      <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-muted-foreground">{post.category && <span>{post.category}</span>}{post.date && <span>{post.date}</span>}</div>
+                      <h3 className="mt-3 text-2xl font-normal leading-tight tracking-[-0.025em] group-hover:underline">{post.title}</h3>
+                    </div>
+                  </Link>
+                </article>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <div className="mt-8 flex gap-2 sm:hidden"><CarouselPrevious className="static translate-y-0" /><CarouselNext className="static translate-y-0" /></div>
+        </Carousel>
+        {viewAllLabel && <Button asChild variant="outline" size="lg" className="mt-12"><Link href={viewAllUrl}>{viewAllLabel}<ArrowRight aria-hidden="true" /></Link></Button>}
+      </div>
+    </section>
+  );
+}