admin/homaroma
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

x

Browse Source
This commit is contained in:
Your Name committed 2026-07-12 03:21:44 -04:00
1 parent c42395aab3
commit 55f7be7307
2 files changed
+4 -4
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/spa/src/components/ProductImageGallery.tsx
+2 -2
View File
@@ -69,13 +69,13 @@ export default function ProductImageGallery({ images, fallback, alt = 'Product I
return ( return (
<div className="flex flex-col-reverse md:flex-row items-start gap-4 w-full"> <div className="flex flex-col-reverse md:flex-row items-start gap-4 w-full">
{/* Thumbnails */} {/* Thumbnails */}
<div className="flex flex-row md:flex-col gap-3 overflow-x-auto md:overflow-y-auto w-full md:w-20 lg:w-24 flex-none hide-scrollbar snap-x md:snap-y snap-mandatory pb-2 md:pb-0 md:pr-2"> <div className="flex flex-row md:flex-col gap-2 md:gap-3 overflow-x-auto md:overflow-y-auto w-full md:w-20 lg:w-24 flex-none hide-scrollbar snap-x md:snap-y snap-mandatory pb-2 md:pb-0 md:pr-2">
{sortedImages.map((image, idx) => ( {sortedImages.map((image, idx) => (
<button <button
key={image.id || idx} key={image.id || idx}
type="button" type="button"
onClick={() => handleThumbnailClick(idx)} onClick={() => handleThumbnailClick(idx)}
className={`relative aspect-square w-20 md:w-full flex-none overflow-hidden rounded-2xl border-2 transition-all snap-center ${ className={`relative aspect-square w-14 md:w-full flex-none overflow-hidden rounded-xl md:rounded-2xl border-2 transition-all snap-center ${
currentIndex === idx ? 'border-pop-pink shadow-md' : 'border-transparent opacity-60 hover:opacity-100' currentIndex === idx ? 'border-pop-pink shadow-md' : 'border-transparent opacity-60 hover:opacity-100'
}`} }`}
> >
apps/website/src/components/ProductGallery.tsx
+2 -2
View File
@@ -68,13 +68,13 @@ export default function ProductGallery({ productName, categoryName, images }: Pr
return ( return (
<div className="flex flex-col-reverse md:flex-row items-start gap-4 w-full"> <div className="flex flex-col-reverse md:flex-row items-start gap-4 w-full">
{/* Thumbnails */} {/* Thumbnails */}
<div className="flex flex-row md:flex-col gap-3 overflow-x-auto md:overflow-y-auto w-full md:w-20 lg:w-24 flex-none hide-scrollbar snap-x md:snap-y snap-mandatory pb-2 md:pb-0 md:pr-2"> <div className="flex flex-row md:flex-col gap-2 md:gap-3 overflow-x-auto md:overflow-y-auto w-full md:w-20 lg:w-24 flex-none hide-scrollbar snap-x md:snap-y snap-mandatory pb-2 md:pb-0 md:pr-2">
{images.map((img, idx) => ( {images.map((img, idx) => (
<button <button
key={idx} key={idx}
type="button" type="button"
onClick={() => handleThumbnailClick(idx)} onClick={() => handleThumbnailClick(idx)}
className={`relative aspect-square w-20 md:w-full flex-none overflow-hidden rounded-2xl border-2 transition-all snap-center ${ className={`relative aspect-square w-14 md:w-full flex-none overflow-hidden rounded-xl md:rounded-2xl border-2 transition-all snap-center ${
activeIndex === idx ? 'border-brand-primary opacity-100' : 'border-transparent opacity-60 hover:opacity-100' activeIndex === idx ? 'border-brand-primary opacity-100' : 'border-transparent opacity-60 hover:opacity-100'
}`} }`}
> >