card editing

src/features/product/ui/Product.tsx

@@ -1,6 +1,12 @@
 'use client';
 
-import { Carousel, CarouselContent, CarouselItem } from '@/shared/ui/carousel';
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from '@/shared/ui/carousel';
 import { ProductCard } from '@/widgets/categories/ui/product-card';
 import {
   Heart,
@@ -166,7 +172,7 @@ const ProductDetail = () => {
                 }}
                 className="w-full"
               >
-                <CarouselContent className="-ml-2">
+                <CarouselContent className="-ml-2 pr-[15%] sm:pr-0">
                   {product.images.map((img, index) => (
                     <CarouselItem
                       key={index}
@@ -219,7 +225,7 @@ const ProductDetail = () => {
 
               {/* Price */}
               <div className="mb-6">
-                <div className="flex items-center gap-3">
+                <div className="flex items-center gap-3 max-lg:flex-col max-lg:items-start">
                   <span className="text-4xl font-bold text-blue-600">
                     {product.price.toLocaleString()} {"so'm"}
                   </span>
@@ -235,7 +241,7 @@ const ProductDetail = () => {
               <p className="text-gray-600 mb-6">{product.description}</p>
 
               {/* Brand and Category */}
-              <div className="grid grid-cols-2 gap-4 mb-6">
+              <div className="grid grid-cols-2 gap-4 mb-6 max-md:grid-cols-1">
                 <div>
                   <span className="text-gray-500">Brand:</span>
                   <p className="font-semibold">{product.brand}</p>
@@ -259,7 +265,7 @@ const ProductDetail = () => {
                     />
                   </div>
                   <div className="flex-1">
-                    <h4 className="font-bold text-gray-800 text-lg mb-1">
+                    <h4 className="font-bold text-gray-800 text-lg mb-1 line-clamp-1">
                       {product.supplier.name}
                     </h4>
                   </div>
@@ -271,7 +277,7 @@ const ProductDetail = () => {
                 <label className="text-gray-700 font-medium mb-2 block">
                   Miqdor:
                 </label>
-                <div className="flex items-center gap-4">
+                <div className="flex items-center gap-4 max-lg:flex-col max-lg:items-start">
                   <div className="flex items-center border border-gray-300 rounded-lg">
                     <button
                       onClick={() => handleQuantityChange('decrease')}
@@ -311,7 +317,7 @@ const ProductDetail = () => {
                   }`}
                 >
                   <ShoppingCart className="w-5 h-5" />
-                  {"Savatchaga qo'shish"}
+                  {'Savatga'}
                 </button>
                 <button
                   onClick={() => setLiked(!liked)}
@@ -355,9 +361,12 @@ const ProductDetail = () => {
           <h2 className="text-2xl font-bold mb-4">Xususiyatlari</h2>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             {Object.entries(product.specifications).map(([key, value]) => (
-              <div key={key} className="flex justify-between border-b pb-2">
+              <div
+                key={key}
+                className="flex justify-between border-b pb-2 gap-4"
+              >
                 <span className="text-gray-600">{key}:</span>
-                <span className="font-semibold">{value}</span>
+                <span className="font-semibold text-right">{value}</span>
               </div>
             ))}
           </div>
@@ -366,16 +375,25 @@ const ProductDetail = () => {
         {/* Related Products */}
         <div className="bg-white rounded-lg shadow-md p-6">
           <h2 className="text-2xl font-bold mb-6">{"O'xshash mahsulotlar"}</h2>
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
-            {relatedProducts.map((item) => (
-              <ProductCard
-                key={item.id}
-                product={item}
-                handleRemove={handleRemove}
-                handleLiked={handleLiked}
-              />
-            ))}
-          </div>
+          <Carousel className="w-full">
+            <CarouselContent className="pr-[12%] sm:pr-0">
+              {relatedProducts.slice(0, 12).map((product) => (
+                <CarouselItem
+                  key={product.id}
+                  className="basis-1/2 sm:basis-1/3 md:basis-1/4 lg:basis-1/6 pb-2"
+                >
+                  <ProductCard
+                    product={product}
+                    handleRemove={handleRemove}
+                    handleLiked={handleLiked}
+                  />
+                </CarouselItem>
+              ))}
+            </CarouselContent>
+
+            <CarouselPrevious className="hidden lg:flex -top-12 right-12 w-9 h-9 bg-blue-600 text-white border-0" />
+            <CarouselNext className="hidden lg:flex -top-12 right-0 w-9 h-9 bg-blue-600 text-white border-0" />
+          </Carousel>
         </div>
       </div>
     </div>