src/lib/flashSale/skeleton/FlashSaleSkeleton.jsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

import useDevice from '@/core/hooks/useDevice'
import PopularProductSkeleton from '@/lib/home/components/Skeleton/PopularProductSkeleton'
import Skeleton from 'react-loading-skeleton'

const FlashSaleSkeleton = () => {
  return (
    <div className='px-4 md:px-0'>
      <TitleSkeleton />
      <div className='my-4'>
        <BannerSkeleton />
      </div>
      <PopularProductSkeleton />
    </div>
  )
}

const TitleSkeleton = () => {
  return (
    <div className='w-full md:w-[36%] flex gap-x-4'>
      <Skeleton containerClassName='block w-1/2' height={24} />
      <div className='w-1/2 flex gap-x-1'>
        <Skeleton height={40} containerClassName='w-full' />
        <Skeleton height={40} containerClassName='w-full' />
        <Skeleton height={40} containerClassName='w-full' />
        <Skeleton height={40} containerClassName='w-full' />
      </div>
    </div>
  )
}

const BannerSkeleton = () => {
  const { isDesktop } = useDevice()
  return <Skeleton duration={1.2} height={isDesktop ? 192 : 48} containerClassName='w-full' />
}

export { FlashSaleSkeleton, TitleSkeleton, BannerSkeleton }