color update
This commit is contained in:
@@ -2,7 +2,13 @@
|
|||||||
|
|
||||||
import formatPhone from '@/shared/lib/formatPhone';
|
import formatPhone from '@/shared/lib/formatPhone';
|
||||||
import { Button } from '@/shared/ui/button';
|
import { Button } from '@/shared/ui/button';
|
||||||
import { Form, FormControl, FormField, FormItem } from '@/shared/ui/form';
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormMessage,
|
||||||
|
} from '@/shared/ui/form';
|
||||||
import { Input } from '@/shared/ui/input';
|
import { Input } from '@/shared/ui/input';
|
||||||
import { Label } from '@/shared/ui/label';
|
import { Label } from '@/shared/ui/label';
|
||||||
import { zodResolver } from '@hookform/resolvers/zod';
|
import { zodResolver } from '@hookform/resolvers/zod';
|
||||||
@@ -45,7 +51,7 @@ const OrderPage = () => {
|
|||||||
lastName: '',
|
lastName: '',
|
||||||
lat: '',
|
lat: '',
|
||||||
long: '',
|
long: '',
|
||||||
phone: '',
|
phone: '+998',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -130,7 +136,7 @@ const OrderPage = () => {
|
|||||||
) => {
|
) => {
|
||||||
const [lat, lon] = e.get('coords');
|
const [lat, lon] = e.get('coords');
|
||||||
|
|
||||||
setCoords({ latitude: lat, longitude: lon, zoom: 14 });
|
setCoords({ latitude: lat, longitude: lon, zoom: 18 });
|
||||||
|
|
||||||
form.setValue('lat', lat.toString(), { shouldDirty: true });
|
form.setValue('lat', lat.toString(), { shouldDirty: true });
|
||||||
form.setValue('long', lon.toString(), { shouldDirty: true });
|
form.setValue('long', lon.toString(), { shouldDirty: true });
|
||||||
@@ -192,7 +198,7 @@ const OrderPage = () => {
|
|||||||
|
|
||||||
if (orderSuccess) {
|
if (orderSuccess) {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
|
<div className="flex justify-center items-center h-screen">
|
||||||
<div className="bg-white rounded-lg shadow-lg p-8 max-w-md w-full text-center">
|
<div className="bg-white rounded-lg shadow-lg p-8 max-w-md w-full text-center">
|
||||||
<div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
<div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
<CheckCircle2 className="w-12 h-12 text-green-600" />
|
<CheckCircle2 className="w-12 h-12 text-green-600" />
|
||||||
@@ -227,8 +233,8 @@ const OrderPage = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50 py-8">
|
<div className="custom-container mb-5">
|
||||||
<div className="max-w-7xl mx-auto px-4">
|
<>
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="mb-6">
|
<div className="mb-6">
|
||||||
<h1 className="text-3xl font-bold text-gray-800 mb-2">
|
<h1 className="text-3xl font-bold text-gray-800 mb-2">
|
||||||
@@ -254,8 +260,8 @@ const OrderPage = () => {
|
|||||||
control={form.control}
|
control={form.control}
|
||||||
name="firstName"
|
name="firstName"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem className="flex justify-start flex-col">
|
||||||
<Label className="block text-sm font-medium text-gray-700 mb-2">
|
<Label className="block text-sm font-medium text-gray-700">
|
||||||
{'Ism'}
|
{'Ism'}
|
||||||
</Label>
|
</Label>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
@@ -265,6 +271,7 @@ const OrderPage = () => {
|
|||||||
placeholder="Ismingiz"
|
placeholder="Ismingiz"
|
||||||
/>
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
@@ -273,8 +280,8 @@ const OrderPage = () => {
|
|||||||
control={form.control}
|
control={form.control}
|
||||||
name="lastName"
|
name="lastName"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem className="flex justify-start flex-col">
|
||||||
<Label className="block text-sm font-medium text-gray-700 mb-2">
|
<Label className="block text-sm font-medium text-gray-700">
|
||||||
{'Familiya'}
|
{'Familiya'}
|
||||||
</Label>
|
</Label>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
@@ -284,6 +291,7 @@ const OrderPage = () => {
|
|||||||
placeholder="Familiyangiz"
|
placeholder="Familiyangiz"
|
||||||
/>
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
@@ -293,7 +301,7 @@ const OrderPage = () => {
|
|||||||
name="phone"
|
name="phone"
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormItem>
|
<FormItem>
|
||||||
<Label className="block text-sm font-medium text-gray-700 mb-2">
|
<Label className="block text-sm font-medium text-gray-700">
|
||||||
Telefon raqam
|
Telefon raqam
|
||||||
</Label>
|
</Label>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
@@ -302,11 +310,11 @@ const OrderPage = () => {
|
|||||||
value={formatPhone(field.value ?? '')}
|
value={formatPhone(field.value ?? '')}
|
||||||
onChange={(e) => field.onChange(e.target.value)}
|
onChange={(e) => field.onChange(e.target.value)}
|
||||||
type="tel"
|
type="tel"
|
||||||
required
|
|
||||||
className="w-full h-12 border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:border-blue-500"
|
className="w-full h-12 border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:border-blue-500"
|
||||||
placeholder="+998 90 123 45 67"
|
placeholder="+998 90 123 45 67"
|
||||||
/>
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
@@ -338,6 +346,7 @@ const OrderPage = () => {
|
|||||||
placeholder="Toshkent"
|
placeholder="Toshkent"
|
||||||
/>
|
/>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
</FormItem>
|
</FormItem>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
@@ -604,7 +613,7 @@ const OrderPage = () => {
|
|||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</Form>
|
</Form>
|
||||||
</div>
|
</>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -252,26 +252,6 @@ const ProductDetail = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Supplier/Agency Information Section */}
|
|
||||||
<div className="border border-gray-200 rounded-lg mb-4 bg-gradient-to-r from-blue-50 to-indigo-50">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div className="w-fit h-full rounded-lg overflow-hidden">
|
|
||||||
<Image
|
|
||||||
src={product.supplier.logo || '/placeholder.svg'}
|
|
||||||
alt={product.supplier.name}
|
|
||||||
width={60}
|
|
||||||
height={60}
|
|
||||||
className="w-full h-full object-contain p-2"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex-1">
|
|
||||||
<h4 className="font-bold text-gray-800 text-lg mb-1 line-clamp-1">
|
|
||||||
{product.supplier.name}
|
|
||||||
</h4>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Quantity Selector */}
|
{/* Quantity Selector */}
|
||||||
<div className="mb-6">
|
<div className="mb-6">
|
||||||
<label className="text-gray-700 font-medium mb-2 block">
|
<label className="text-gray-700 font-medium mb-2 block">
|
||||||
@@ -310,9 +290,9 @@ const ProductDetail = () => {
|
|||||||
<button
|
<button
|
||||||
onClick={addToCart}
|
onClick={addToCart}
|
||||||
disabled={!product.inStock}
|
disabled={!product.inStock}
|
||||||
className={`flex-1 py-4 rounded-lg font-semibold text-white flex items-center justify-center gap-2 transition ${
|
className={`flex-1 py-4 rounded-lg cursor-pointer font-semibold text-white flex items-center justify-center gap-2 transition ${
|
||||||
product.inStock
|
product.inStock
|
||||||
? 'bg-blue-600 hover:bg-blue-700'
|
? 'bg-green-600 hover:bg-green-700'
|
||||||
: 'bg-gray-400 cursor-not-allowed'
|
: 'bg-gray-400 cursor-not-allowed'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -67,8 +67,8 @@ export function CategoryCarousel({ category }: { category: SubCategory }) {
|
|||||||
))}
|
))}
|
||||||
</CarouselContent>
|
</CarouselContent>
|
||||||
|
|
||||||
<CarouselPrevious className="hidden lg:flex -top-12 right-12 w-9 h-9 bg-blue-600 text-white border-0" />
|
<CarouselPrevious className="hidden lg:flex -top-12 right-12 w-9 h-9 bg-green-600 hover:bg-green-600 text-white border-0 cursor-pointer" />
|
||||||
<CarouselNext className="hidden lg:flex -top-12 right-0 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-green-600 text-white border-0 hover:bg-green-600 cursor-pointer" />
|
||||||
</Carousel>
|
</Carousel>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -45,7 +45,7 @@ export function ProductCard({
|
|||||||
const decrease = (e: MouseEvent<HTMLButtonElement>) => {
|
const decrease = (e: MouseEvent<HTMLButtonElement>) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
setQuantity((q) => {
|
setQuantity((q) => {
|
||||||
if (q === '' || q <= 1) return 1;
|
if (q === '' || q <= 1) return 0;
|
||||||
return q - 1;
|
return q - 1;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
@@ -53,7 +53,7 @@ export function ProductCard({
|
|||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
onClick={() => router.push(`/product/${product.id}`)}
|
onClick={() => router.push(`/product/${product.id}`)}
|
||||||
className="group relative p-0 overflow-hidden border border-slate-200 bg-white shadow-sm hover:shadow-lg transition-all rounded-xl sm:rounded-2xl hover:border-blue-400"
|
className="group relative p-0 overflow-hidden border border-slate-200 bg-white shadow-sm hover:shadow-lg transition-all rounded-xl sm:rounded-2xl hover:border-green-400"
|
||||||
>
|
>
|
||||||
<CardContent className="p-0">
|
<CardContent className="p-0">
|
||||||
<div className="relative overflow-hidden">
|
<div className="relative overflow-hidden">
|
||||||
@@ -73,7 +73,7 @@ export function ProductCard({
|
|||||||
handleLiked(product.id);
|
handleLiked(product.id);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
className="absolute top-2 right-2 z-10 bg-white rounded-full p-1.5 sm:p-2 shadow hover:scale-110"
|
className="absolute top-2 right-2 z-10 bg-white hover:bg-gray-200 cursor-pointer rounded-full p-1.5 sm:p-2 shadow hover:scale-110"
|
||||||
>
|
>
|
||||||
<Heart
|
<Heart
|
||||||
className={`w-4 h-4 sm:w-5 sm:h-5 ${
|
className={`w-4 h-4 sm:w-5 sm:h-5 ${
|
||||||
@@ -94,7 +94,7 @@ export function ProductCard({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="p-3 sm:p-4 space-y-2 sm:space-y-3">
|
<div className="p-3 sm:p-4 space-y-1 sm:space-y-1">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Star className="w-3.5 h-3.5 sm:w-4 sm:h-4 fill-orange-400 text-orange-400" />
|
<Star className="w-3.5 h-3.5 sm:w-4 sm:h-4 fill-orange-400 text-orange-400" />
|
||||||
<span className="text-xs sm:text-sm font-semibold text-orange-600">
|
<span className="text-xs sm:text-sm font-semibold text-orange-600">
|
||||||
@@ -107,13 +107,13 @@ export function ProductCard({
|
|||||||
</h3>
|
</h3>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<span className="text-lg sm:text-xl font-bold text-blue-600">
|
<span className="text-lg sm:text-xl font-bold text-green-600">
|
||||||
{formatPrice(product.price)}
|
{formatPrice(product.price, true)}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
{product.oldPrice && (
|
{product.oldPrice && (
|
||||||
<div className="text-xs sm:text-sm text-slate-400 line-through">
|
<div className="text-xs sm:text-sm text-slate-400 line-through">
|
||||||
{formatPrice(product.oldPrice)}
|
{formatPrice(product.oldPrice, true)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -125,7 +125,7 @@ export function ProductCard({
|
|||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
setQuantity(1);
|
setQuantity(1);
|
||||||
}}
|
}}
|
||||||
className="w-full h-9 sm:h-11 text-sm"
|
className="w-full h-9 sm:h-11 text-sm bg-green-600 hover:bg-green-600/80 cursor-pointer"
|
||||||
>
|
>
|
||||||
<ShoppingCart className="w-4 h-4 mr-1" />
|
<ShoppingCart className="w-4 h-4 mr-1" />
|
||||||
Savatga
|
Savatga
|
||||||
@@ -133,7 +133,7 @@ export function ProductCard({
|
|||||||
) : (
|
) : (
|
||||||
<div
|
<div
|
||||||
onClick={(e) => e.stopPropagation()}
|
onClick={(e) => e.stopPropagation()}
|
||||||
className="flex items-center justify-between border border-blue-500 rounded-lg h-9 sm:h-11"
|
className="flex items-center justify-between border border-green-500 rounded-lg h-9 sm:h-11"
|
||||||
>
|
>
|
||||||
<Button size="icon" variant="ghost" onClick={decrease}>
|
<Button size="icon" variant="ghost" onClick={decrease}>
|
||||||
<Minus className="w-4 h-4" />
|
<Minus className="w-4 h-4" />
|
||||||
|
|||||||
@@ -9,7 +9,6 @@ import {
|
|||||||
Sheet,
|
Sheet,
|
||||||
SheetClose,
|
SheetClose,
|
||||||
SheetContent,
|
SheetContent,
|
||||||
SheetFooter,
|
|
||||||
SheetHeader,
|
SheetHeader,
|
||||||
SheetTitle,
|
SheetTitle,
|
||||||
SheetTrigger,
|
SheetTrigger,
|
||||||
@@ -165,7 +164,7 @@ const Navbar = () => {
|
|||||||
alt="logo"
|
alt="logo"
|
||||||
width={40}
|
width={40}
|
||||||
height={20}
|
height={20}
|
||||||
className="w-10 h-10"
|
className="w-10 h-fit"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="w-full flex justify-end items-center lg:hidden gap-2">
|
<div className="w-full flex justify-end items-center lg:hidden gap-2">
|
||||||
@@ -318,17 +317,6 @@ const Navbar = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<SheetFooter className="px-4 py-4 border-t border-slate-200 bg-slate-50">
|
|
||||||
<SheetClose asChild>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
className="w-full border-slate-300 hover:bg-slate-100"
|
|
||||||
>
|
|
||||||
Yopish
|
|
||||||
</Button>
|
|
||||||
</SheetClose>
|
|
||||||
</SheetFooter>
|
|
||||||
</SheetContent>
|
</SheetContent>
|
||||||
</Sheet>
|
</Sheet>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user