Merge pull request #43 from Dium-dev/brands-carousel

Fix brands number in mobile devices and reduce the gradient width
Dium-dev · Mar 21, 2024 · 5398b81 · 5398b81
2 parents 909012d + 96e6e59
commit 5398b81
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/components/BrandsCarousel/BrandCard.tsx b/src/components/BrandsCarousel/BrandCard.tsx
@@ -1,12 +1,15 @@
 import { Brand } from "@/types";
 import Image from "next/image";
 import Link from "next/link";
+import useMobile from "@/hooks/useMobile";
 
 interface BrandCardProps {
   brand: Brand;
 }
 
 export const BrandCard = ({ brand }: BrandCardProps) => {
+  const { isMobile } = useMobile();
+
   return (
     <Link
       className="flex items-center justify-center cursor-pointer w-max ms:m-6 mx-1 hover:scale-125 transition-all"
@@ -15,8 +18,8 @@ export const BrandCard = ({ brand }: BrandCardProps) => {
     >
       <Image
         src={brand.image}
-        width={100}
-        height={100}
+        width={isMobile ? 50 : 100}
+        height={isMobile ? 50 : 100}
         alt={brand.name}
         className="w-auto h-auto"
       />

diff --git a/src/components/BrandsCarousel/Carousel.tsx b/src/components/BrandsCarousel/Carousel.tsx
@@ -20,7 +20,7 @@ export const Carousel = ({ brands }: CarouselProps) => {
         pauseOnHover
         speed={40}
         gradient
-        gradientWidth={100}
+        gradientWidth={50}
         gradientColor={theme === "dark" ? "black" : "white"}
       >
         {brands.map((brand, i) => (