card editing

This commit is contained in:
Samandar Turgunboyev
2025-12-16 15:48:22 +05:00
parent 8813d50a81
commit a81fa12f53
19 changed files with 193 additions and 120 deletions

View File

@@ -155,7 +155,7 @@ const Login = () => {
{step === 'phone' ? (
<Phone className="w-10 h-10 text-blue-500" />
) : (
<Lock className="w-10 h-10" />
<Lock className="w-10 h-10 text-blue-500" />
)}
</div>
<h1 className="text-2xl font-bold mb-2">

View File

@@ -116,6 +116,66 @@ export const subCategoriesData: SubCategory[] = [
inStock: true,
liked: false,
},
{
id: 9,
name: '7UP 1.5L',
price: 9800,
oldPrice: 11500,
image: '/7up-bottle.png',
rating: 4.3,
reviews: 124,
discount: 15,
inStock: true,
liked: false,
},
{
id: 10,
name: 'Mirinda Orange 1.5L',
price: 9500,
oldPrice: 11000,
image: '/mirinda-orange.png',
rating: 4.4,
reviews: 139,
discount: 14,
inStock: true,
liked: false,
},
{
id: 11,
name: 'Schweppes Tonic 1L',
price: 13500,
oldPrice: 15500,
image: '/schweppes-tonic.png',
rating: 4.6,
reviews: 98,
discount: 13,
inStock: true,
liked: true,
},
{
id: 12,
name: 'Mountain Dew 1.5L',
price: 12500,
oldPrice: 14500,
image: '/mountain-dew.png',
rating: 4.5,
reviews: 187,
discount: 14,
inStock: true,
liked: false,
},
{
id: 13,
name: 'Red Bull Cola 0.33L',
price: 16000,
oldPrice: 18000,
image: '/red-bull-cola.png',
rating: 4.2,
reviews: 76,
discount: 11,
inStock: false,
liked: false,
},
],
},
{

View File

@@ -58,7 +58,7 @@ const Product = () => {
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-3">
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
{products.map((product) => (
<ProductCard
key={product.id}

View File

@@ -119,9 +119,9 @@ export default function Favourite() {
}
return (
<div className="min-h-screen bg-slate-50 py-8">
<div className="container mx-auto px-4">
<div className="flex items-center justify-between mb-8">
<div className="custom-container">
<>
<div className="mb-8">
<div>
<h1 className="text-3xl font-bold text-slate-800 mb-2">
Sevimli mahsulotlar
@@ -130,7 +130,7 @@ export default function Favourite() {
</div>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 mb-30">
{likedProducts.map((product) => (
<ProductCard
key={product.id}
@@ -139,7 +139,7 @@ export default function Favourite() {
/>
))}
</div>
</div>
</>
</div>
);
}

View File

@@ -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>

View File

@@ -9,7 +9,6 @@ import { Badge } from '@/shared/ui/badge';
import { Button } from '@/shared/ui/button';
import { Card, CardContent } from '@/shared/ui/card';
import {
Bell,
CheckCircle,
ChevronRight,
Handshake,
@@ -22,7 +21,6 @@ import {
Package,
RefreshCw,
ShoppingBag,
Star,
TrendingUp,
Truck,
Wallet,
@@ -335,14 +333,6 @@ const Profile = () => {
<RefreshCw className="w-3 h-3 md:w-4 md:h-4" />
Qayta
</Button>
<Button
variant="ghost"
size="sm"
className="gap-1 md:gap-2 h-8 md:h-9 text-xs md:text-sm"
>
<Star className="w-3 h-3 md:w-4 md:h-4" />
Baholash
</Button>
</div>
</CardContent>
</Card>
@@ -451,9 +441,13 @@ const Profile = () => {
<Button
variant="ghost"
size="icon"
onClick={() => {
localStorage.removeItem('user');
router.push('/');
}}
className="w-9 h-9 md:w-10 md:h-10"
>
<Bell className="w-4 h-4 md:w-5 md:h-5" />
<LogOut className="w-4 text-red-500 h-4 md:w-5 md:h-5" />
</Button>
</div>

View File

@@ -65,13 +65,13 @@ export default function CustomerSupport() {
};
return (
<div className="custom-sontainer">
<div className="custom-sontainer mt-5">
<>
{/* Header */}
<div className="mb-8">
<div className="flex items-center gap-3 mb-2">
<MessageCircle className="w-8 h-8 text-gray-700" />
<h1 className="text-3xl font-bold text-gray-800">
<h1 className="text-2xl font-bold text-gray-800">
{"Qo'llab-quvvatlash"}
</h1>
</div>

View File

@@ -117,7 +117,7 @@ const SearchResult: React.FC = () => {
<div className="text-center py-20">Yuklanmoqda...</div>
) : query ? (
results.length ? (
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-4">
{results.map((product) => (
<ProductCard
key={product.id}