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

feat(artists/mobile): default mobile view to carousel and add swipe hint overlay

Browse Source
This commit is contained in:
Nicholai 2025-10-20 18:05:13 -06:00
parent 21da20d927
commit dfcd9a8da2
1 changed files with 5 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/artist-portfolio.tsx
View File

@ -20,7 +20,7 @@ export function ArtistPortfolio({ artistId }: ArtistPortfolioProps) {
const [selectedCategory, setSelectedCategory] = useState("All") const [selectedCategory, setSelectedCategory] = useState("All")
const [selectedImage, setSelectedImage] = useState<string | null>(null) const [selectedImage, setSelectedImage] = useState<string | null>(null)
const [scrollY, setScrollY] = useState(0) const [scrollY, setScrollY] = useState(0)
const [mobileView, setMobileView] = useState<"grid" | "carousel">("grid") const [mobileView, setMobileView] = useState<"grid" | "carousel">("carousel")
const isMobile = useIsMobile() const isMobile = useIsMobile()
// carousel indicator state (mobile) // carousel indicator state (mobile)
const [carouselApi, setCarouselApi] = useState<CarouselApi | null>(null) const [carouselApi, setCarouselApi] = useState<CarouselApi | null>(null)
@ -543,6 +543,10 @@ export function ArtistPortfolio({ artistId }: ArtistPortfolioProps) {
<div className="pointer-events-none absolute top-2 right-3 rounded-full bg-white/10 backdrop-blur px-2 py-1 text-xs text-white"> <div className="pointer-events-none absolute top-2 right-3 rounded-full bg-white/10 backdrop-blur px-2 py-1 text-xs text-white">
{filteredPortfolio.length} pieces {filteredPortfolio.length} pieces
</div> </div>
{/* Swipe hint */}
<div className="pointer-events-none absolute bottom-2 left-1/2 -translate-x-1/2 rounded-full bg-white/10 backdrop-blur px-3 py-1 text-xs text-white">
Swipe left or right
</div>
{/* Dots indicators */} {/* Dots indicators */}
<div className="mt-3 flex items-center justify-center gap-2" role="tablist" aria-label="Carousel indicators"> <div className="mt-3 flex items-center justify-center gap-2" role="tablist" aria-label="Carousel indicators">
{Array.from({ length: carouselCount }).map((_, i) => ( {Array.from({ length: carouselCount }).map((_, i) => (