card editing
This commit is contained in:
@@ -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">
|
||||
|
||||
@@ -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,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user