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

17
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,18 +465,19 @@ 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">
<CarouselContent>
{flashItems.map((item) => ( {flashItems.map((item) => (
<Card key={item.id} className="bg-white/5 border-white/10 overflow-hidden"> <CarouselItem key={item.id} className="basis-full md:basis-1/2 lg:basis-1/3">
<div className="relative w-full aspect-[4/5] bg-black"> <div className="relative w-full aspect-[4/5] bg-black rounded-md overflow-hidden">
<Image src={item.url} alt={item.title || `${artist?.name} flash`} fill sizes="(max-width:768px) 100vw, 33vw" className="object-cover" /> <Image src={item.url} alt={item.title || `${artist?.name} flash`} fill sizes="(max-width:768px) 100vw, 33vw" className="object-cover" />
</div> </div>
<div className="p-4 flex items-center justify-between"> <div className="flex items-center justify-between mt-3">
<div> <div>
<div className="font-medium">{item.title || 'Flash piece'}</div> <div className="font-medium">{item.title || 'Flash piece'}</div>
{item.sizeHint && <div className="text-sm text-white/60">{item.sizeHint}</div>} {item.sizeHint && <div className="text-sm text-white/60">{item.sizeHint}</div>}
@ -486,9 +486,10 @@ export function ArtistPortfolio({ artistId }: ArtistPortfolioProps) {
<Link href={`/book?artist=${artist?.slug}&flashId=${item.id}`}>Book this</Link> <Link href={`/book?artist=${artist?.slug}&flashId=${item.id}`}>Book this</Link>
</Button> </Button>
</div> </div>
</Card> </CarouselItem>
))} ))}
</div> </CarouselContent>
</Carousel>
</div> </div>
</section> </section>
)} )}