ref product section
This commit is contained in:
@@ -4,8 +4,8 @@ import { type FC } from 'react'
|
||||
|
||||
const ServiceItem: FC<{ product: ProductType }> = ({ product }) => {
|
||||
return (
|
||||
<div className='flex w-[88px] shrink-0 snap-start flex-col items-center gap-2 md:w-auto'>
|
||||
<div className='size-16 overflow-hidden rounded-full border-[3px] border-primary bg-gray-200 md:size-20'>
|
||||
<div className='flex w-[88px] shrink-0 snap-start flex-col items-center gap-2'>
|
||||
<div className='size-20 overflow-hidden rounded-full border-[3px] border-primary bg-gray-200'>
|
||||
{product.images?.[0] ? (
|
||||
<PresignedImage
|
||||
src={product.images[0]}
|
||||
|
||||
@@ -28,13 +28,13 @@ const CategoryTabsSkeleton: 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) => (
|
||||
<div
|
||||
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>
|
||||
))}
|
||||
@@ -98,7 +98,7 @@ const Services: FC = () => {
|
||||
/>
|
||||
) : 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 ? (
|
||||
<ServicesSkeleton />
|
||||
) : products.length === 0 ? (
|
||||
@@ -106,7 +106,7 @@ const Services: FC = () => {
|
||||
{t('home.noProducts')}
|
||||
</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) => (
|
||||
<ServiceItem key={item.id} product={item} />
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user