ref product section

This commit is contained in:
2026-07-21 11:20:07 +03:30
parent fff5cd9146
commit 9f006b36ab
2 changed files with 7 additions and 7 deletions
+2 -2
View File
@@ -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]}
+5 -5
View File
@@ -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} />
))}