diff options
Diffstat (limited to 'src/lib/brand/components')
| -rw-r--r-- | src/lib/brand/components/BrandCard.jsx | 32 |
1 files changed, 18 insertions, 14 deletions
diff --git a/src/lib/brand/components/BrandCard.jsx b/src/lib/brand/components/BrandCard.jsx index 731214ff..ebd41a67 100644 --- a/src/lib/brand/components/BrandCard.jsx +++ b/src/lib/brand/components/BrandCard.jsx @@ -1,33 +1,37 @@ -import Image from '~/components/ui/image' -import Link from '@/core/components/elements/Link/Link' -import useDevice from '@/core/hooks/useDevice' -import { createSlug } from '@/core/utils/slug' +import NextImage from 'next/image'; +import Link from '@/core/components/elements/Link/Link'; +import useDevice from '@/core/hooks/useDevice'; +import { createSlug } from '@/core/utils/slug'; const BrandCard = ({ brand }) => { - const { isMobile } = useDevice() + const { isMobile } = useDevice(); return ( <Link href={createSlug('/shop/brands/', brand.name, brand.id)} - className={`py-1 px-2 rounded border border-gray_r-6 flex justify-center items-center ${ + className={`py-1 px-2 border-gray_r-6 flex justify-center items-center hover:scale-110 transition duration-500 ease-in-out ${ isMobile ? 'h-16' : 'h-24' }`} > {brand.logo && ( - <Image + <NextImage src={brand.logo} alt={brand.name} - width={128} - height={128} - className='h-full w-full object-contain object-center' + width={500} + height={500} + quality={85} + className='h-full w-[122px] object-contain object-center' /> )} {!brand.logo && ( - <span className='text-center' style={{ fontSize: `${16 - brand.name.length * 0.5}px` }}> + <span + className='text-center' + style={{ fontSize: `${16 - brand.name.length * 0.5}px` }} + > {brand.name} </span> )} </Link> - ) -} + ); +}; -export default BrandCard +export default BrandCard; |