ref product section
This commit is contained in:
@@ -4,8 +4,8 @@ import { type FC } from 'react'
|
|||||||
|
|
||||||
const ServiceItem: FC<{ product: ProductType }> = ({ product }) => {
|
const ServiceItem: FC<{ product: ProductType }> = ({ product }) => {
|
||||||
return (
|
return (
|
||||||
<div className='flex w-[88px] shrink-0 snap-start flex-col items-center gap-2 md:w-auto'>
|
<div className='flex w-[88px] shrink-0 snap-start flex-col items-center gap-2'>
|
||||||
<div className='size-16 overflow-hidden rounded-full border-[3px] border-primary bg-gray-200 md:size-20'>
|
<div className='size-20 overflow-hidden rounded-full border-[3px] border-primary bg-gray-200'>
|
||||||
{product.images?.[0] ? (
|
{product.images?.[0] ? (
|
||||||
<PresignedImage
|
<PresignedImage
|
||||||
src={product.images[0]}
|
src={product.images[0]}
|
||||||
|
|||||||
@@ -28,13 +28,13 @@ const CategoryTabsSkeleton: FC = () => (
|
|||||||
)
|
)
|
||||||
|
|
||||||
const ServicesSkeleton: FC = () => (
|
const ServicesSkeleton: FC = () => (
|
||||||
<div className='flex gap-4 md:grid md:grid-cols-4 md:gap-6 lg:grid-cols-6 xl:grid-cols-8'>
|
<div className='flex w-max gap-4'>
|
||||||
{Array.from({ length: SKELETON_COUNT }).map((_, index) => (
|
{Array.from({ length: SKELETON_COUNT }).map((_, index) => (
|
||||||
<div
|
<div
|
||||||
key={index}
|
key={index}
|
||||||
className='flex w-[88px] shrink-0 flex-col items-center gap-2 md:w-auto'
|
className='flex w-[88px] shrink-0 flex-col items-center gap-2'
|
||||||
>
|
>
|
||||||
<div className='size-16 animate-pulse rounded-full bg-gray-200 md:size-20' />
|
<div className='size-20 animate-pulse rounded-full bg-gray-200' />
|
||||||
<div className='h-8 w-full animate-pulse rounded bg-gray-100' />
|
<div className='h-8 w-full animate-pulse rounded bg-gray-100' />
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
@@ -98,7 +98,7 @@ const Services: FC = () => {
|
|||||||
/>
|
/>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
<div className='-mx-4 overflow-x-auto px-4 pb-1 md:mx-0 md:overflow-visible md:px-0'>
|
<div className='-mx-4 overflow-x-auto px-4 pb-1 md:mx-0 md:px-0'>
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<ServicesSkeleton />
|
<ServicesSkeleton />
|
||||||
) : products.length === 0 ? (
|
) : products.length === 0 ? (
|
||||||
@@ -106,7 +106,7 @@ const Services: FC = () => {
|
|||||||
{t('home.noProducts')}
|
{t('home.noProducts')}
|
||||||
</p>
|
</p>
|
||||||
) : (
|
) : (
|
||||||
<div className='flex w-max snap-x snap-mandatory gap-4 md:grid md:w-full md:grid-cols-4 md:gap-6 md:snap-none lg:grid-cols-6 xl:grid-cols-8'>
|
<div className='flex w-max snap-x snap-mandatory gap-4 md:gap-6'>
|
||||||
{products.map((item) => (
|
{products.map((item) => (
|
||||||
<ServiceItem key={item.id} product={item} />
|
<ServiceItem key={item.id} product={item} />
|
||||||
))}
|
))}
|
||||||
|
|||||||
Reference in New Issue
Block a user