Nicholai/united-tattoo
1
1
Fork 0
Code Issues 24 Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat(flash): change Available Flash from grid to responsive carousel with book buttons

Browse Source
This commit is contained in:
Nicholai 2025-10-20 19:02:30 -06:00
parent fa2859dd52
commit 847e2b6810
1 changed files with 20 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
components/artist-portfolio.tsx
View File

@ -8,7 +8,6 @@ import { Instagram, ExternalLink, Loader2 } from "lucide-react"
import { useArtist } from "@/hooks/use-artist-data" import { useArtist } from "@/hooks/use-artist-data"
import { useIsMobile } from "@/hooks/use-mobile" import { useIsMobile } from "@/hooks/use-mobile"
import { type CarouselApi, Carousel, CarouselContent, CarouselItem } from "@/components/ui/carousel" import { type CarouselApi, Carousel, CarouselContent, CarouselItem } from "@/components/ui/carousel"
import { Card } from "@/components/ui/card"
import { useFlash } from "@/hooks/use-flash" import { useFlash } from "@/hooks/use-flash"
// Removed mobile filter scroll area // Removed mobile filter scroll area
@ -466,29 +465,31 @@ export function ArtistPortfolio({ artistId }: ArtistPortfolioProps) {
</div> </div>
</section> </section>
{/* Available Flash (both desktop and mobile if items exist) */} {/* Available Flash (carousel) */}
{flashItems && flashItems.length > 0 && ( {flashItems && flashItems.length > 0 && (
<section className="bg-black border-t border-white/10 py-10"> <section className="bg-black border-t border-white/10 py-10">
<div className="px-4 md:px-12 max-w-6xl mx-auto"> <div className="px-4 md:px-12 max-w-6xl mx-auto">
<h3 className="font-playfair text-3xl md:text-4xl font-bold mb-6">Available Flash</h3> <h3 className="font-playfair text-3xl md:text-4xl font-bold mb-6">Available Flash</h3>
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6"> <Carousel opts={{ align: "start", loop: true }} className="w-full">
{flashItems.map((item) => ( <CarouselContent>
<Card key={item.id} className="bg-white/5 border-white/10 overflow-hidden"> {flashItems.map((item) => (
<div className="relative w-full aspect-[4/5] bg-black"> <CarouselItem key={item.id} className="basis-full md:basis-1/2 lg:basis-1/3">
<Image src={item.url} alt={item.title || `${artist?.name} flash`} fill sizes="(max-width:768px) 100vw, 33vw" className="object-cover" /> <div className="relative w-full aspect-[4/5] bg-black rounded-md overflow-hidden">
</div> <Image src={item.url} alt={item.title || `${artist?.name} flash`} fill sizes="(max-width:768px) 100vw, 33vw" className="object-cover" />
<div className="p-4 flex items-center justify-between">
<div>
<div className="font-medium">{item.title || 'Flash piece'}</div>
{item.sizeHint && <div className="text-sm text-white/60">{item.sizeHint}</div>}
</div> </div>
<Button asChild size="sm" className="bg-white text-black hover:bg-gray-100 !text-black"> <div className="flex items-center justify-between mt-3">
<Link href={`/book?artist=${artist?.slug}&flashId=${item.id}`}>Book this</Link> <div>
</Button> <div className="font-medium">{item.title || 'Flash piece'}</div>
</div> {item.sizeHint && <div className="text-sm text-white/60">{item.sizeHint}</div>}
</Card> </div>
))} <Button asChild size="sm" className="bg-white text-black hover:bg-gray-100 !text-black">
</div> <Link href={`/book?artist=${artist?.slug}&flashId=${item.id}`}>Book this</Link>
</Button>
</div>
</CarouselItem>
))}
</CarouselContent>
</Carousel>
</div> </div>
</section> </section>
)} )}