added support page
This commit is contained in:
Samandar Turgunboyev
BIN
public/logos/logo.png
Normal file
BIN
public/logos/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
@@ -153,7 +153,7 @@ const Login = () => {
|
|||||||
<div className="bg-gradient-to-r from-blue-600 to-indigo-600 p-8 text-white text-center">
|
<div className="bg-gradient-to-r from-blue-600 to-indigo-600 p-8 text-white text-center">
|
||||||
<div className="w-20 h-20 bg-white bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
|
<div className="w-20 h-20 bg-white bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
{step === 'phone' ? (
|
{step === 'phone' ? (
|
||||||
<Phone className="w-10 h-10" />
|
<Phone className="w-10 h-10 text-blue-500" />
|
||||||
) : (
|
) : (
|
||||||
<Lock className="w-10 h-10" />
|
<Lock className="w-10 h-10" />
|
||||||
)}
|
)}
|
||||||
|
|||||||
136
src/features/profile/lib/data.ts
Normal file
136
src/features/profile/lib/data.ts
Normal file
@@ -0,0 +1,136 @@
|
|||||||
|
export const orders = [
|
||||||
|
{
|
||||||
|
id: 'BUY-001',
|
||||||
|
date: '2024-12-10',
|
||||||
|
time: '14:30',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
name: 'RedBull',
|
||||||
|
quantity: 2,
|
||||||
|
price: 15000,
|
||||||
|
image: '/red-bull-energy-drink.jpg',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Coca-Cola 1.5L',
|
||||||
|
quantity: 1,
|
||||||
|
price: 12000,
|
||||||
|
image: '/classic-coca-cola.png',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Suv',
|
||||||
|
quantity: 1,
|
||||||
|
price: 18000,
|
||||||
|
image: '/small-mineral-water-bottle.jpg',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
total: 45000,
|
||||||
|
deliveryFee: 5000,
|
||||||
|
address: 'Chilonzor tumani, 12-kvartal, 5-uy',
|
||||||
|
paymentMethod: 'Naqd',
|
||||||
|
courierName: 'Javohir Karimov',
|
||||||
|
courierPhone: '+998 90 111 22 33',
|
||||||
|
status: 'delivered',
|
||||||
|
paymentStatus: 'paid',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'BUY-002',
|
||||||
|
date: '2024-12-08',
|
||||||
|
time: '19:15',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
name: 'Milka',
|
||||||
|
quantity: 3,
|
||||||
|
price: 25000,
|
||||||
|
image: '/milka-chocolate-bar.jpg',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
total: 62000,
|
||||||
|
deliveryFee: 7000,
|
||||||
|
address: 'Yunusobod tumani, 7-kvartal, 23-uy',
|
||||||
|
paymentMethod: 'Karta',
|
||||||
|
status: 'inTransit',
|
||||||
|
paymentStatus: 'paid',
|
||||||
|
estimatedTime: '15-20 daqiqa',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'BUY-003',
|
||||||
|
date: '2024-12-05',
|
||||||
|
time: '12:45',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
name: 'Coca-Cola',
|
||||||
|
quantity: 1,
|
||||||
|
price: 65000,
|
||||||
|
image: '/classic-coca-cola.png',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Monster',
|
||||||
|
quantity: 2,
|
||||||
|
price: 15000,
|
||||||
|
image: '/monster-energy-drink.jpg',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
total: 85000,
|
||||||
|
deliveryFee: 10000,
|
||||||
|
address: 'Sergeli tumani, 5-kvartal, 12-uy',
|
||||||
|
paymentMethod: 'Naqd',
|
||||||
|
status: 'atPickup',
|
||||||
|
paymentStatus: 'pending',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'BUY-004',
|
||||||
|
date: '2024-12-01',
|
||||||
|
time: '20:00',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
name: 'Milka',
|
||||||
|
quantity: 5,
|
||||||
|
price: 35000,
|
||||||
|
image: '/milka-chocolate-bar.jpg',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Suv',
|
||||||
|
quantity: 3,
|
||||||
|
price: 3000,
|
||||||
|
image: '/small-mineral-water-bottle.jpg',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
total: 184000,
|
||||||
|
deliveryFee: 8000,
|
||||||
|
address: 'Mirzo Ulugbek tumani, 3-kvartal',
|
||||||
|
paymentMethod: 'Karta',
|
||||||
|
status: 'delivered',
|
||||||
|
paymentStatus: 'paid',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'BUY-005',
|
||||||
|
date: '2024-11-28',
|
||||||
|
time: '13:20',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
name: 'Milka',
|
||||||
|
quantity: 1,
|
||||||
|
price: 120000,
|
||||||
|
image: '/milka-chocolate-bar.jpg',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
total: 120000,
|
||||||
|
deliveryFee: 15000,
|
||||||
|
address: "Yakkasaroy tumani, Bobur ko'chasi",
|
||||||
|
paymentMethod: 'Karta',
|
||||||
|
status: 'delivered',
|
||||||
|
paymentStatus: 'paid',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const user = {
|
||||||
|
phone: '+998 90 123 45 67',
|
||||||
|
email: 'akmal@example.com',
|
||||||
|
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Akmal',
|
||||||
|
memberSince: '2024-yil yanvar',
|
||||||
|
loyaltyPoints: 2450,
|
||||||
|
totalOrders: 47,
|
||||||
|
totalSpent: 3250000,
|
||||||
|
address: 'Toshkent sh., Chilonzor tumani, 12-kvartal, 5-uy',
|
||||||
|
birthDate: '1995-05-15',
|
||||||
|
};
|
||||||
24
src/features/profile/ui/Favourite.tsx
Normal file
24
src/features/profile/ui/Favourite.tsx
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
import { Heart } from 'lucide-react';
|
||||||
|
|
||||||
|
const Favourite = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h2 className="text-xl md:text-2xl font-bold text-foreground mb-4 md:mb-6">
|
||||||
|
Sevimlilar
|
||||||
|
</h2>
|
||||||
|
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||||
|
<div className="w-16 h-16 md:w-20 md:h-20 rounded-full bg-slate-100 flex items-center justify-center mb-4">
|
||||||
|
<Heart className="w-8 h-8 md:w-10 md:h-10 text-slate-400" />
|
||||||
|
</div>
|
||||||
|
<p className="text-muted-foreground text-sm md:text-base">
|
||||||
|
{"Sevimli mahsulotlar yo'q"}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs md:text-sm text-muted-foreground mt-1">
|
||||||
|
{"Mahsulotlarni sevimlilar ro'yxatiga qo'shing"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Favourite;
|
||||||
115
src/features/profile/ui/History.tsx
Normal file
115
src/features/profile/ui/History.tsx
Normal file
@@ -0,0 +1,115 @@
|
|||||||
|
import { Button } from '@/shared/ui/button';
|
||||||
|
import { Card, CardContent } from '@/shared/ui/card';
|
||||||
|
import { Tabs, TabsList, TabsTrigger } from '@/shared/ui/tabs';
|
||||||
|
import { Calendar, CheckCircle, Clock, RefreshCw } from 'lucide-react';
|
||||||
|
import Image from 'next/image';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { orders } from '../lib/data';
|
||||||
|
|
||||||
|
const HistoryTabs = () => {
|
||||||
|
const [historyTab, setHistoryTab] = useState('all');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="flex items-center justify-between mb-4 md:mb-6">
|
||||||
|
<h2 className="text-xl md:text-2xl font-bold text-foreground">Tarix</h2>
|
||||||
|
</div>
|
||||||
|
<Tabs
|
||||||
|
value={historyTab}
|
||||||
|
onValueChange={setHistoryTab}
|
||||||
|
className="mb-4 md:mb-6"
|
||||||
|
>
|
||||||
|
<TabsList className="bg-slate-100 w-full grid grid-cols-3 h-auto p-1">
|
||||||
|
<TabsTrigger
|
||||||
|
value="all"
|
||||||
|
className="data-[state=active]:bg-white text-xs md:text-sm py-2"
|
||||||
|
>
|
||||||
|
Barchasi
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
value="week"
|
||||||
|
className="data-[state=active]:bg-white text-xs md:text-sm py-2"
|
||||||
|
>
|
||||||
|
Bu hafta
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
value="month"
|
||||||
|
className="data-[state=active]:bg-white text-xs md:text-sm py-2"
|
||||||
|
>
|
||||||
|
Bu oy
|
||||||
|
</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
</Tabs>
|
||||||
|
|
||||||
|
<div className="space-y-3 md:space-y-4">
|
||||||
|
{orders
|
||||||
|
.filter((o) => o.status === 'delivered')
|
||||||
|
.map((order, idx) => (
|
||||||
|
<div key={order.id} className="flex gap-3 md:gap-4">
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<div className="w-8 h-8 md:w-10 md:h-10 rounded-full bg-emerald-100 flex items-center justify-center shrink-0">
|
||||||
|
<CheckCircle className="w-4 h-4 md:w-5 md:h-5 text-emerald-600" />
|
||||||
|
</div>
|
||||||
|
{idx <
|
||||||
|
orders.filter((o) => o.status === 'delivered').length - 1 && (
|
||||||
|
<div className="w-0.5 h-full bg-slate-200 my-2" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<Card className="flex-1 border-0 shadow-sm">
|
||||||
|
<CardContent className="p-3 md:p-4">
|
||||||
|
<div className="flex flex-col md:flex-row md:items-start justify-between mb-2 md:mb-3 gap-1">
|
||||||
|
<div>
|
||||||
|
<p className="font-semibold text-sm md:text-base text-foreground">
|
||||||
|
{order.id}
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-2 text-xs md:text-sm text-muted-foreground flex-wrap">
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<Calendar className="w-3 h-3 md:w-4 md:h-4" />
|
||||||
|
{order.date}
|
||||||
|
</span>
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<Clock className="w-3 h-3 md:w-4 md:h-4" />
|
||||||
|
{order.time}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="font-bold text-sm md:text-base text-foreground">
|
||||||
|
{(order.total + order.deliveryFee).toLocaleString()}{' '}
|
||||||
|
{"so'm"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 overflow-x-auto pb-2">
|
||||||
|
{order.items.map((item, i) => (
|
||||||
|
<Image
|
||||||
|
width={500}
|
||||||
|
height={500}
|
||||||
|
key={i}
|
||||||
|
src={item.image || '/placeholder.svg'}
|
||||||
|
alt={item.name}
|
||||||
|
className="w-8 h-8 md:w-10 md:h-10 rounded-lg object-cover shrink-0"
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
<span className="text-xs md:text-sm text-muted-foreground ml-1 truncate">
|
||||||
|
{order.items.map((i) => i.name).join(', ')}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2 mt-2 md:mt-3">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="bg-transparent gap-1 md:gap-2 text-xs md:text-sm h-8 md:h-9 px-2 md:px-3"
|
||||||
|
>
|
||||||
|
<RefreshCw className="w-3 h-3 md:w-4 md:h-4" />
|
||||||
|
Qayta
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HistoryTabs;
|
||||||
184
src/features/profile/ui/Orders.tsx
Normal file
184
src/features/profile/ui/Orders.tsx
Normal file
@@ -0,0 +1,184 @@
|
|||||||
|
import { Badge } from '@/shared/ui/badge';
|
||||||
|
import { Card, CardContent } from '@/shared/ui/card';
|
||||||
|
import { Tabs, TabsList, TabsTrigger } from '@/shared/ui/tabs';
|
||||||
|
import { CheckCircle, MapPin, Package, Truck } from 'lucide-react';
|
||||||
|
import Image from 'next/image';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { orders } from '../lib/data';
|
||||||
|
|
||||||
|
const Orders = () => {
|
||||||
|
const [ordersTab, setOrdersTab] = useState('active');
|
||||||
|
|
||||||
|
const getStatusInfo = (status: string) => {
|
||||||
|
const statusMap: Record<
|
||||||
|
string,
|
||||||
|
{ text: string; color: string; bgColor: string }
|
||||||
|
> = {
|
||||||
|
inTransit: {
|
||||||
|
text: "Yo'lda",
|
||||||
|
color: 'text-blue-600',
|
||||||
|
bgColor: 'bg-blue-100',
|
||||||
|
},
|
||||||
|
atPickup: {
|
||||||
|
text: 'Punktda',
|
||||||
|
color: 'text-amber-600',
|
||||||
|
bgColor: 'bg-amber-100',
|
||||||
|
},
|
||||||
|
delivered: {
|
||||||
|
text: 'Yetkazildi',
|
||||||
|
color: 'text-emerald-600',
|
||||||
|
bgColor: 'bg-emerald-100',
|
||||||
|
},
|
||||||
|
cancelled: {
|
||||||
|
text: 'Bekor qilindi',
|
||||||
|
color: 'text-red-600',
|
||||||
|
bgColor: 'bg-red-100',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
statusMap[status] || {
|
||||||
|
text: status,
|
||||||
|
color: 'text-muted-foreground',
|
||||||
|
bgColor: 'bg-muted',
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStatusIcon = (status: string) => {
|
||||||
|
switch (status) {
|
||||||
|
case 'inTransit':
|
||||||
|
return <Truck className="w-4 h-4" />;
|
||||||
|
case 'atPickup':
|
||||||
|
return <MapPin className="w-4 h-4" />;
|
||||||
|
case 'delivered':
|
||||||
|
return <CheckCircle className="w-4 h-4" />;
|
||||||
|
default:
|
||||||
|
return <Package className="w-4 h-4" />;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center justify-between mb-4 md:mb-6">
|
||||||
|
<h2 className="text-xl md:text-2xl font-bold text-foreground">
|
||||||
|
Buyurtmalar
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Tabs
|
||||||
|
value={ordersTab}
|
||||||
|
onValueChange={setOrdersTab}
|
||||||
|
className="mb-4 md:mb-6"
|
||||||
|
>
|
||||||
|
<TabsList className="bg-slate-100 w-full grid grid-cols-3 h-auto p-1">
|
||||||
|
<TabsTrigger
|
||||||
|
value="active"
|
||||||
|
className="data-[state=active]:bg-white text-xs md:text-sm py-2"
|
||||||
|
>
|
||||||
|
Faol ({orders.filter((o) => o.status !== 'delivered').length})
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
value="completed"
|
||||||
|
className="data-[state=active]:bg-white text-xs md:text-sm py-2"
|
||||||
|
>
|
||||||
|
Tugadi ({orders.filter((o) => o.status === 'delivered').length})
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
value="all"
|
||||||
|
className="data-[state=active]:bg-white text-xs md:text-sm py-2"
|
||||||
|
>
|
||||||
|
Barcha ({orders.length})
|
||||||
|
</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
</Tabs>
|
||||||
|
|
||||||
|
<div className="space-y-3 md:space-y-4">
|
||||||
|
{orders
|
||||||
|
.filter((o) => {
|
||||||
|
if (ordersTab === 'active') return o.status !== 'delivered';
|
||||||
|
if (ordersTab === 'completed') return o.status === 'delivered';
|
||||||
|
return true;
|
||||||
|
})
|
||||||
|
.map((order) => {
|
||||||
|
const statusInfo = getStatusInfo(order.status);
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
key={order.id}
|
||||||
|
className="border-0 shadow-sm hover:shadow-md transition-shadow"
|
||||||
|
>
|
||||||
|
<CardContent className="p-3 md:p-5">
|
||||||
|
<div className="flex items-start justify-between mb-3 md:mb-4">
|
||||||
|
<div className="flex items-center gap-2 md:gap-3">
|
||||||
|
<div
|
||||||
|
className={`w-10 h-10 md:w-12 md:h-12 rounded-xl ${statusInfo.bgColor} flex items-center justify-center shrink-0`}
|
||||||
|
>
|
||||||
|
<span className={statusInfo.color}>
|
||||||
|
{getStatusIcon(order.status)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="font-semibold text-sm md:text-base text-foreground">
|
||||||
|
{order.id}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs md:text-sm text-muted-foreground">
|
||||||
|
{order.date} • {order.time}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Badge
|
||||||
|
className={`${statusInfo.bgColor} ${statusInfo.color} border-0 text-xs`}
|
||||||
|
>
|
||||||
|
{statusInfo.text}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-2 md:gap-3 mb-3 md:mb-4 overflow-x-auto pb-2 -mx-1 px-1 scrollbar-hide">
|
||||||
|
{order.items.map((item, idx) => (
|
||||||
|
<div
|
||||||
|
key={idx}
|
||||||
|
className="flex items-center gap-2 md:gap-3 bg-slate-50 rounded-xl p-2 md:p-3 min-w-fit shrink-0"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
width={500}
|
||||||
|
height={500}
|
||||||
|
src={item.image || '/placeholder.svg'}
|
||||||
|
alt={item.name}
|
||||||
|
className="w-10 h-10 md:w-12 md:h-12 rounded-lg object-cover"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-xs md:text-sm text-foreground">
|
||||||
|
{item.name}
|
||||||
|
</p>
|
||||||
|
<p className="text-[10px] md:text-xs text-muted-foreground">
|
||||||
|
{item.quantity} × {item.price.toLocaleString()}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col md:flex-row md:items-center justify-between pt-3 md:pt-4 border-t border-slate-100 gap-2">
|
||||||
|
<div className="flex items-center gap-2 text-xs md:text-sm text-muted-foreground">
|
||||||
|
<MapPin className="w-3 h-3 md:w-4 md:h-4 shrink-0" />
|
||||||
|
<span className="truncate">{order.address}</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<p className="font-bold text-sm md:text-base text-foreground">
|
||||||
|
{(order.total + order.deliveryFee).toLocaleString()}{' '}
|
||||||
|
{"so'm"}
|
||||||
|
</p>
|
||||||
|
<p className="text-[10px] md:text-xs text-muted-foreground">
|
||||||
|
Yetkazish: {order.deliveryFee.toLocaleString()} {"so'm"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Orders;
|
||||||
@@ -2,192 +2,41 @@
|
|||||||
|
|
||||||
import { PartnershipForm } from '@/features/about/ui/AboutPage';
|
import { PartnershipForm } from '@/features/about/ui/AboutPage';
|
||||||
import Faq from '@/features/faq/ui/Faq';
|
import Faq from '@/features/faq/ui/Faq';
|
||||||
|
import Favourite from '@/features/favourite/ui/Favourite';
|
||||||
import { useRouter } from '@/shared/config/i18n/navigation';
|
import { useRouter } from '@/shared/config/i18n/navigation';
|
||||||
import { Avatar, AvatarFallback, AvatarImage } from '@/shared/ui/avatar';
|
import { Avatar, AvatarFallback, AvatarImage } from '@/shared/ui/avatar';
|
||||||
import { Badge } from '@/shared/ui/badge';
|
import { Badge } from '@/shared/ui/badge';
|
||||||
import { Button } from '@/shared/ui/button';
|
import { Button } from '@/shared/ui/button';
|
||||||
import { Card, CardContent } from '@/shared/ui/card';
|
import { Card, CardContent } from '@/shared/ui/card';
|
||||||
import { Input } from '@/shared/ui/input';
|
|
||||||
import { Label } from '@/shared/ui/label';
|
|
||||||
import { Switch } from '@/shared/ui/switch';
|
|
||||||
import { Tabs, TabsList, TabsTrigger } from '@/shared/ui/tabs';
|
|
||||||
import {
|
import {
|
||||||
Bell,
|
Bell,
|
||||||
Calendar,
|
|
||||||
Camera,
|
|
||||||
CheckCircle,
|
CheckCircle,
|
||||||
ChevronDown,
|
|
||||||
ChevronRight,
|
ChevronRight,
|
||||||
Clock,
|
|
||||||
CreditCard,
|
|
||||||
Edit3,
|
|
||||||
Globe,
|
|
||||||
Handshake,
|
Handshake,
|
||||||
Heart,
|
HelpCircle,
|
||||||
History,
|
History,
|
||||||
Home,
|
Home,
|
||||||
LogOut,
|
LogOut,
|
||||||
MapPin,
|
MapPin,
|
||||||
MessageCircleQuestion,
|
MessageCircleQuestion,
|
||||||
Moon,
|
|
||||||
Package,
|
Package,
|
||||||
Plus,
|
|
||||||
RefreshCw,
|
RefreshCw,
|
||||||
Settings,
|
|
||||||
Shield,
|
|
||||||
ShoppingBag,
|
ShoppingBag,
|
||||||
Star,
|
Star,
|
||||||
TrendingUp,
|
TrendingUp,
|
||||||
Truck,
|
Truck,
|
||||||
User,
|
|
||||||
Wallet,
|
Wallet,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import Image from 'next/image';
|
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
import { orders, user } from '../lib/data';
|
||||||
|
import HistoryTabs from './History';
|
||||||
|
import Orders from './Orders';
|
||||||
|
import CustomerSupport from './Support';
|
||||||
|
|
||||||
const Profile = () => {
|
const Profile = () => {
|
||||||
const [activeSection, setActiveSection] = useState('overview');
|
const [activeSection, setActiveSection] = useState('overview');
|
||||||
const [ordersTab, setOrdersTab] = useState('active');
|
|
||||||
const [historyTab, setHistoryTab] = useState('all');
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
const user = {
|
|
||||||
phone: '+998 90 123 45 67',
|
|
||||||
email: 'akmal@example.com',
|
|
||||||
avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Akmal',
|
|
||||||
memberSince: '2024-yil yanvar',
|
|
||||||
loyaltyPoints: 2450,
|
|
||||||
totalOrders: 47,
|
|
||||||
totalSpent: 3250000,
|
|
||||||
address: 'Toshkent sh., Chilonzor tumani, 12-kvartal, 5-uy',
|
|
||||||
birthDate: '1995-05-15',
|
|
||||||
};
|
|
||||||
|
|
||||||
const orders = [
|
|
||||||
{
|
|
||||||
id: 'BUY-001',
|
|
||||||
date: '2024-12-10',
|
|
||||||
time: '14:30',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
name: 'RedBull',
|
|
||||||
quantity: 2,
|
|
||||||
price: 15000,
|
|
||||||
image: '/red-bull-energy-drink.jpg',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Coca-Cola 1.5L',
|
|
||||||
quantity: 1,
|
|
||||||
price: 12000,
|
|
||||||
image: '/classic-coca-cola.png',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Suv',
|
|
||||||
quantity: 1,
|
|
||||||
price: 18000,
|
|
||||||
image: '/small-mineral-water-bottle.jpg',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
total: 45000,
|
|
||||||
deliveryFee: 5000,
|
|
||||||
address: 'Chilonzor tumani, 12-kvartal, 5-uy',
|
|
||||||
paymentMethod: 'Naqd',
|
|
||||||
courierName: 'Javohir Karimov',
|
|
||||||
courierPhone: '+998 90 111 22 33',
|
|
||||||
status: 'delivered',
|
|
||||||
paymentStatus: 'paid',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'BUY-002',
|
|
||||||
date: '2024-12-08',
|
|
||||||
time: '19:15',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
name: 'Milka',
|
|
||||||
quantity: 3,
|
|
||||||
price: 25000,
|
|
||||||
image: '/milka-chocolate-bar.jpg',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
total: 62000,
|
|
||||||
deliveryFee: 7000,
|
|
||||||
address: 'Yunusobod tumani, 7-kvartal, 23-uy',
|
|
||||||
paymentMethod: 'Karta',
|
|
||||||
status: 'inTransit',
|
|
||||||
paymentStatus: 'paid',
|
|
||||||
estimatedTime: '15-20 daqiqa',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'BUY-003',
|
|
||||||
date: '2024-12-05',
|
|
||||||
time: '12:45',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
name: 'Coca-Cola',
|
|
||||||
quantity: 1,
|
|
||||||
price: 65000,
|
|
||||||
image: '/classic-coca-cola.png',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Monster',
|
|
||||||
quantity: 2,
|
|
||||||
price: 15000,
|
|
||||||
image: '/monster-energy-drink.jpg',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
total: 85000,
|
|
||||||
deliveryFee: 10000,
|
|
||||||
address: 'Sergeli tumani, 5-kvartal, 12-uy',
|
|
||||||
paymentMethod: 'Naqd',
|
|
||||||
status: 'atPickup',
|
|
||||||
paymentStatus: 'pending',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'BUY-004',
|
|
||||||
date: '2024-12-01',
|
|
||||||
time: '20:00',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
name: 'Milka',
|
|
||||||
quantity: 5,
|
|
||||||
price: 35000,
|
|
||||||
image: '/milka-chocolate-bar.jpg',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Suv',
|
|
||||||
quantity: 3,
|
|
||||||
price: 3000,
|
|
||||||
image: '/small-mineral-water-bottle.jpg',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
total: 184000,
|
|
||||||
deliveryFee: 8000,
|
|
||||||
address: 'Mirzo Ulugbek tumani, 3-kvartal',
|
|
||||||
paymentMethod: 'Karta',
|
|
||||||
status: 'delivered',
|
|
||||||
paymentStatus: 'paid',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'BUY-005',
|
|
||||||
date: '2024-11-28',
|
|
||||||
time: '13:20',
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
name: 'Milka',
|
|
||||||
quantity: 1,
|
|
||||||
price: 120000,
|
|
||||||
image: '/milka-chocolate-bar.jpg',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
total: 120000,
|
|
||||||
deliveryFee: 15000,
|
|
||||||
address: "Yakkasaroy tumani, Bobur ko'chasi",
|
|
||||||
paymentMethod: 'Karta',
|
|
||||||
status: 'delivered',
|
|
||||||
paymentStatus: 'paid',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const getStatusInfo = (status: string) => {
|
const getStatusInfo = (status: string) => {
|
||||||
const statusMap: Record<
|
const statusMap: Record<
|
||||||
string,
|
string,
|
||||||
@@ -242,6 +91,7 @@ const Profile = () => {
|
|||||||
{ id: 'history', label: 'Tarix', icon: History },
|
{ id: 'history', label: 'Tarix', icon: History },
|
||||||
{ id: 'agency', label: "Hamkor bo'lish", icon: Handshake },
|
{ id: 'agency', label: "Hamkor bo'lish", icon: Handshake },
|
||||||
{ id: 'faq', label: 'Savol javoblar', icon: MessageCircleQuestion },
|
{ id: 'faq', label: 'Savol javoblar', icon: MessageCircleQuestion },
|
||||||
|
{ id: 'support', label: "Qo'llab-quvvatlash", icon: HelpCircle },
|
||||||
];
|
];
|
||||||
|
|
||||||
const statistics = {
|
const statistics = {
|
||||||
@@ -253,486 +103,23 @@ const Profile = () => {
|
|||||||
const renderContent = () => {
|
const renderContent = () => {
|
||||||
switch (activeSection) {
|
switch (activeSection) {
|
||||||
case 'orders':
|
case 'orders':
|
||||||
return (
|
return <Orders />;
|
||||||
<div>
|
|
||||||
<div className="flex items-center justify-between mb-4 md:mb-6">
|
|
||||||
<h2 className="text-xl md:text-2xl font-bold text-foreground">
|
|
||||||
Buyurtmalar
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Tabs
|
|
||||||
value={ordersTab}
|
|
||||||
onValueChange={setOrdersTab}
|
|
||||||
className="mb-4 md:mb-6"
|
|
||||||
>
|
|
||||||
<TabsList className="bg-slate-100 w-full grid grid-cols-3 h-auto p-1">
|
|
||||||
<TabsTrigger
|
|
||||||
value="active"
|
|
||||||
className="data-[state=active]:bg-white text-xs md:text-sm py-2"
|
|
||||||
>
|
|
||||||
Faol ({orders.filter((o) => o.status !== 'delivered').length})
|
|
||||||
</TabsTrigger>
|
|
||||||
<TabsTrigger
|
|
||||||
value="completed"
|
|
||||||
className="data-[state=active]:bg-white text-xs md:text-sm py-2"
|
|
||||||
>
|
|
||||||
Tugadi (
|
|
||||||
{orders.filter((o) => o.status === 'delivered').length})
|
|
||||||
</TabsTrigger>
|
|
||||||
<TabsTrigger
|
|
||||||
value="all"
|
|
||||||
className="data-[state=active]:bg-white text-xs md:text-sm py-2"
|
|
||||||
>
|
|
||||||
Barcha ({orders.length})
|
|
||||||
</TabsTrigger>
|
|
||||||
</TabsList>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
<div className="space-y-3 md:space-y-4">
|
|
||||||
{orders
|
|
||||||
.filter((o) => {
|
|
||||||
if (ordersTab === 'active') return o.status !== 'delivered';
|
|
||||||
if (ordersTab === 'completed')
|
|
||||||
return o.status === 'delivered';
|
|
||||||
return true;
|
|
||||||
})
|
|
||||||
.map((order) => {
|
|
||||||
const statusInfo = getStatusInfo(order.status);
|
|
||||||
return (
|
|
||||||
<Card
|
|
||||||
key={order.id}
|
|
||||||
className="border-0 shadow-sm hover:shadow-md transition-shadow"
|
|
||||||
>
|
|
||||||
<CardContent className="p-3 md:p-5">
|
|
||||||
<div className="flex items-start justify-between mb-3 md:mb-4">
|
|
||||||
<div className="flex items-center gap-2 md:gap-3">
|
|
||||||
<div
|
|
||||||
className={`w-10 h-10 md:w-12 md:h-12 rounded-xl ${statusInfo.bgColor} flex items-center justify-center shrink-0`}
|
|
||||||
>
|
|
||||||
<span className={statusInfo.color}>
|
|
||||||
{getStatusIcon(order.status)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="font-semibold text-sm md:text-base text-foreground">
|
|
||||||
{order.id}
|
|
||||||
</p>
|
|
||||||
<p className="text-xs md:text-sm text-muted-foreground">
|
|
||||||
{order.date} • {order.time}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Badge
|
|
||||||
className={`${statusInfo.bgColor} ${statusInfo.color} border-0 text-xs`}
|
|
||||||
>
|
|
||||||
{statusInfo.text}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-2 md:gap-3 mb-3 md:mb-4 overflow-x-auto pb-2 -mx-1 px-1 scrollbar-hide">
|
|
||||||
{order.items.map((item, idx) => (
|
|
||||||
<div
|
|
||||||
key={idx}
|
|
||||||
className="flex items-center gap-2 md:gap-3 bg-slate-50 rounded-xl p-2 md:p-3 min-w-fit shrink-0"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
width={500}
|
|
||||||
height={500}
|
|
||||||
src={item.image || '/placeholder.svg'}
|
|
||||||
alt={item.name}
|
|
||||||
className="w-10 h-10 md:w-12 md:h-12 rounded-lg object-cover"
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
<p className="font-medium text-xs md:text-sm text-foreground">
|
|
||||||
{item.name}
|
|
||||||
</p>
|
|
||||||
<p className="text-[10px] md:text-xs text-muted-foreground">
|
|
||||||
{item.quantity} ×{' '}
|
|
||||||
{item.price.toLocaleString()}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-col md:flex-row md:items-center justify-between pt-3 md:pt-4 border-t border-slate-100 gap-2">
|
|
||||||
<div className="flex items-center gap-2 text-xs md:text-sm text-muted-foreground">
|
|
||||||
<MapPin className="w-3 h-3 md:w-4 md:h-4 shrink-0" />
|
|
||||||
<span className="truncate">{order.address}</span>
|
|
||||||
</div>
|
|
||||||
<div className="text-right">
|
|
||||||
<p className="font-bold text-sm md:text-base text-foreground">
|
|
||||||
{(
|
|
||||||
order.total + order.deliveryFee
|
|
||||||
).toLocaleString()}{' '}
|
|
||||||
{"so'm"}
|
|
||||||
</p>
|
|
||||||
<p className="text-[10px] md:text-xs text-muted-foreground">
|
|
||||||
Yetkazish: {order.deliveryFee.toLocaleString()}{' '}
|
|
||||||
{"so'm"}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
case 'history':
|
case 'history':
|
||||||
return (
|
return <HistoryTabs />;
|
||||||
<div>
|
|
||||||
<div className="flex items-center justify-between mb-4 md:mb-6">
|
|
||||||
<h2 className="text-xl md:text-2xl font-bold text-foreground">
|
|
||||||
Tarix
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Tabs
|
|
||||||
value={historyTab}
|
|
||||||
onValueChange={setHistoryTab}
|
|
||||||
className="mb-4 md:mb-6"
|
|
||||||
>
|
|
||||||
<TabsList className="bg-slate-100 w-full grid grid-cols-3 h-auto p-1">
|
|
||||||
<TabsTrigger
|
|
||||||
value="all"
|
|
||||||
className="data-[state=active]:bg-white text-xs md:text-sm py-2"
|
|
||||||
>
|
|
||||||
Barchasi
|
|
||||||
</TabsTrigger>
|
|
||||||
<TabsTrigger
|
|
||||||
value="week"
|
|
||||||
className="data-[state=active]:bg-white text-xs md:text-sm py-2"
|
|
||||||
>
|
|
||||||
Bu hafta
|
|
||||||
</TabsTrigger>
|
|
||||||
<TabsTrigger
|
|
||||||
value="month"
|
|
||||||
className="data-[state=active]:bg-white text-xs md:text-sm py-2"
|
|
||||||
>
|
|
||||||
Bu oy
|
|
||||||
</TabsTrigger>
|
|
||||||
</TabsList>
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
<div className="space-y-3 md:space-y-4">
|
|
||||||
{orders
|
|
||||||
.filter((o) => o.status === 'delivered')
|
|
||||||
.map((order, idx) => (
|
|
||||||
<div key={order.id} className="flex gap-3 md:gap-4">
|
|
||||||
<div className="flex flex-col items-center">
|
|
||||||
<div className="w-8 h-8 md:w-10 md:h-10 rounded-full bg-emerald-100 flex items-center justify-center shrink-0">
|
|
||||||
<CheckCircle className="w-4 h-4 md:w-5 md:h-5 text-emerald-600" />
|
|
||||||
</div>
|
|
||||||
{idx <
|
|
||||||
orders.filter((o) => o.status === 'delivered').length -
|
|
||||||
1 && (
|
|
||||||
<div className="w-0.5 h-full bg-slate-200 my-2" />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<Card className="flex-1 border-0 shadow-sm">
|
|
||||||
<CardContent className="p-3 md:p-4">
|
|
||||||
<div className="flex flex-col md:flex-row md:items-start justify-between mb-2 md:mb-3 gap-1">
|
|
||||||
<div>
|
|
||||||
<p className="font-semibold text-sm md:text-base text-foreground">
|
|
||||||
{order.id}
|
|
||||||
</p>
|
|
||||||
<div className="flex items-center gap-2 text-xs md:text-sm text-muted-foreground flex-wrap">
|
|
||||||
<span className="flex items-center gap-1">
|
|
||||||
<Calendar className="w-3 h-3 md:w-4 md:h-4" />
|
|
||||||
{order.date}
|
|
||||||
</span>
|
|
||||||
<span className="flex items-center gap-1">
|
|
||||||
<Clock className="w-3 h-3 md:w-4 md:h-4" />
|
|
||||||
{order.time}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p className="font-bold text-sm md:text-base text-foreground">
|
|
||||||
{(order.total + order.deliveryFee).toLocaleString()}{' '}
|
|
||||||
{"so'm"}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2 overflow-x-auto pb-2">
|
|
||||||
{order.items.map((item, i) => (
|
|
||||||
<Image
|
|
||||||
width={500}
|
|
||||||
height={500}
|
|
||||||
key={i}
|
|
||||||
src={item.image || '/placeholder.svg'}
|
|
||||||
alt={item.name}
|
|
||||||
className="w-8 h-8 md:w-10 md:h-10 rounded-lg object-cover shrink-0"
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
<span className="text-xs md:text-sm text-muted-foreground ml-1 truncate">
|
|
||||||
{order.items.map((i) => i.name).join(', ')}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex gap-2 mt-2 md:mt-3">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
className="bg-transparent gap-1 md:gap-2 text-xs md:text-sm h-8 md:h-9 px-2 md:px-3"
|
|
||||||
>
|
|
||||||
<RefreshCw className="w-3 h-3 md:w-4 md:h-4" />
|
|
||||||
Qayta
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
case 'settings':
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h2 className="text-xl md:text-2xl font-bold text-foreground mb-4 md:mb-6">
|
|
||||||
Sozlamalar
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<Card className="border-0 shadow-sm mb-4 md:mb-6">
|
|
||||||
<CardContent className="p-4 md:p-6">
|
|
||||||
<h3 className="font-semibold text-foreground mb-4 flex items-center gap-2 text-sm md:text-base">
|
|
||||||
<User className="w-4 h-4 md:w-5 md:h-5" />
|
|
||||||
{"Shaxsiy ma'lumotlar"}
|
|
||||||
</h3>
|
|
||||||
<div className="flex flex-col md:flex-row items-center gap-4 md:gap-6 mb-4 md:mb-6">
|
|
||||||
<div className="relative">
|
|
||||||
<Avatar className="w-16 h-16 md:w-20 md:h-20">
|
|
||||||
<AvatarImage
|
|
||||||
src={user.avatar || '/placeholder.svg'}
|
|
||||||
alt={user.phone}
|
|
||||||
/>
|
|
||||||
<AvatarFallback className="bg-emerald-500 text-white text-lg md:text-xl">
|
|
||||||
U
|
|
||||||
</AvatarFallback>
|
|
||||||
</Avatar>
|
|
||||||
<Button
|
|
||||||
size="icon"
|
|
||||||
className="absolute -bottom-1 -right-1 w-7 h-7 md:w-8 md:h-8 rounded-full bg-emerald-500 hover:bg-emerald-600"
|
|
||||||
>
|
|
||||||
<Camera className="w-3 h-3 md:w-4 md:h-4 text-white" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div className="text-center md:text-left">
|
|
||||||
<p className="text-xs md:text-sm text-muted-foreground">
|
|
||||||
{"A'zo"}: {user.memberSince}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4">
|
|
||||||
<div className="space-y-1.5 md:space-y-2">
|
|
||||||
<Label htmlFor="phone" className="text-xs md:text-sm">
|
|
||||||
Telefon raqam
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id="phone"
|
|
||||||
defaultValue={user.phone}
|
|
||||||
className="bg-slate-50 h-9 md:h-10 text-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1.5 md:space-y-2">
|
|
||||||
<Label htmlFor="email" className="text-xs md:text-sm">
|
|
||||||
Email
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id="email"
|
|
||||||
defaultValue={user.email}
|
|
||||||
className="bg-slate-50 h-9 md:h-10 text-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1.5 md:space-y-2">
|
|
||||||
<Label htmlFor="birthdate" className="text-xs md:text-sm">
|
|
||||||
{"Tug'ilgan sana"}
|
|
||||||
</Label>
|
|
||||||
<Input
|
|
||||||
id="birthdate"
|
|
||||||
type="date"
|
|
||||||
defaultValue={user.birthDate}
|
|
||||||
className="bg-slate-50 h-9 md:h-10 text-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Button className="mt-4 bg-emerald-500 hover:bg-emerald-600 h-9 md:h-10 text-sm w-full md:w-auto">
|
|
||||||
<Edit3 className="w-4 h-4 mr-2" />
|
|
||||||
Saqlash
|
|
||||||
</Button>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="border-0 shadow-sm mb-4 md:mb-6">
|
|
||||||
<CardContent className="p-4 md:p-6">
|
|
||||||
<div className="flex items-center justify-between mb-4">
|
|
||||||
<h3 className="font-semibold text-foreground flex items-center gap-2 text-sm md:text-base">
|
|
||||||
<CreditCard className="w-4 h-4 md:w-5 md:h-5" />
|
|
||||||
{"To'lov usullari"}
|
|
||||||
</h3>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
className="bg-transparent gap-1 md:gap-2 h-8 text-xs md:text-sm"
|
|
||||||
>
|
|
||||||
<Plus className="w-3 h-3 md:w-4 md:h-4" />
|
|
||||||
{"Qo'shish"}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between p-3 md:p-4 rounded-xl bg-gradient-to-r from-slate-800 to-slate-900 text-white">
|
|
||||||
<div className="flex items-center gap-2 md:gap-3">
|
|
||||||
<div className="w-10 h-6 md:w-12 md:h-8 bg-amber-400 rounded flex items-center justify-center text-slate-900 font-bold text-[10px] md:text-xs">
|
|
||||||
VISA
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p className="font-medium text-xs md:text-sm">
|
|
||||||
•••• •••• •••• 4532
|
|
||||||
</p>
|
|
||||||
<p className="text-[10px] md:text-sm text-slate-400">
|
|
||||||
12/26
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Badge className="bg-emerald-500/20 text-emerald-400 border-0 text-[10px] md:text-xs">
|
|
||||||
Asosiy
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card className="border-0 shadow-sm mb-4 md:mb-6">
|
|
||||||
<CardContent className="p-4 md:p-6">
|
|
||||||
<h3 className="font-semibold text-foreground mb-4 flex items-center gap-2 text-sm md:text-base">
|
|
||||||
<Settings className="w-4 h-4 md:w-5 md:h-5" />
|
|
||||||
Ilova sozlamalari
|
|
||||||
</h3>
|
|
||||||
<div className="space-y-3 md:space-y-4">
|
|
||||||
<div className="flex items-center justify-between py-2 md:py-3 border-b border-slate-100">
|
|
||||||
<div className="flex items-center gap-2 md:gap-3">
|
|
||||||
<Bell className="w-4 h-4 md:w-5 md:h-5 text-muted-foreground" />
|
|
||||||
<div>
|
|
||||||
<p className="font-medium text-foreground text-sm">
|
|
||||||
Bildirishnomalar
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-muted-foreground">
|
|
||||||
Push xabarlar
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Switch defaultChecked />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between py-2 md:py-3 border-b border-slate-100">
|
|
||||||
<div className="flex items-center gap-2 md:gap-3">
|
|
||||||
<Moon className="w-4 h-4 md:w-5 md:h-5 text-muted-foreground" />
|
|
||||||
<div>
|
|
||||||
<p className="font-medium text-foreground text-sm">
|
|
||||||
{"Qorong'u rejim"}
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-muted-foreground">
|
|
||||||
Tungi rejim
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Switch />
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between py-2 md:py-3 border-b border-slate-100">
|
|
||||||
<div className="flex items-center gap-2 md:gap-3">
|
|
||||||
<Globe className="w-4 h-4 md:w-5 md:h-5 text-muted-foreground" />
|
|
||||||
<div>
|
|
||||||
<p className="font-medium text-foreground text-sm">
|
|
||||||
Til
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-muted-foreground">
|
|
||||||
Ilova tili
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
className="bg-transparent gap-1 h-8 text-xs"
|
|
||||||
>
|
|
||||||
{"O'zbek"} <ChevronDown className="w-3 h-3" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between py-2 md:py-3">
|
|
||||||
<div className="flex items-center gap-2 md:gap-3">
|
|
||||||
<Shield className="w-4 h-4 md:w-5 md:h-5 text-muted-foreground" />
|
|
||||||
<div>
|
|
||||||
<p className="font-medium text-foreground text-sm">
|
|
||||||
Xavfsizlik
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-muted-foreground">
|
|
||||||
{"Parolni o'zgartirish"}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ChevronRight className="w-4 h-4 md:w-5 md:h-5 text-muted-foreground" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Danger Zone */}
|
|
||||||
<Card className="border-0 shadow-sm border-red-100">
|
|
||||||
<CardContent className="p-4 md:p-6">
|
|
||||||
<h3 className="font-semibold text-red-600 mb-3 md:mb-4 text-sm md:text-base">
|
|
||||||
Xavfli zona
|
|
||||||
</h3>
|
|
||||||
<div className="flex flex-col md:flex-row md:items-center justify-between gap-3">
|
|
||||||
<div>
|
|
||||||
<p className="font-medium text-foreground text-sm">
|
|
||||||
{"Hisobni o'chirish"}
|
|
||||||
</p>
|
|
||||||
<p className="text-xs text-muted-foreground">
|
|
||||||
{"Barcha ma'lumotlar o'chiriladi"}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
className="border-red-200 text-red-600 hover:bg-red-50 hover:text-red-700 bg-transparent h-9 text-sm w-full md:w-auto"
|
|
||||||
>
|
|
||||||
{"O'chirish"}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
case 'favorites':
|
case 'favorites':
|
||||||
return (
|
return <Favourite />;
|
||||||
<div>
|
|
||||||
<h2 className="text-xl md:text-2xl font-bold text-foreground mb-4 md:mb-6">
|
|
||||||
Sevimlilar
|
|
||||||
</h2>
|
|
||||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
|
||||||
<div className="w-16 h-16 md:w-20 md:h-20 rounded-full bg-slate-100 flex items-center justify-center mb-4">
|
|
||||||
<Heart className="w-8 h-8 md:w-10 md:h-10 text-slate-400" />
|
|
||||||
</div>
|
|
||||||
<p className="text-muted-foreground text-sm md:text-base">
|
|
||||||
{"Sevimli mahsulotlar yo'q"}
|
|
||||||
</p>
|
|
||||||
<p className="text-xs md:text-sm text-muted-foreground mt-1">
|
|
||||||
{"Mahsulotlarni sevimlilar ro'yxatiga qo'shing"}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
case 'agency':
|
case 'agency':
|
||||||
return <PartnershipForm />;
|
return <PartnershipForm />;
|
||||||
|
|
||||||
case 'faq':
|
case 'faq':
|
||||||
return <Faq />;
|
return <Faq />;
|
||||||
|
case 'support':
|
||||||
|
return <CustomerSupport />;
|
||||||
|
|
||||||
default:
|
default:
|
||||||
// Overview section
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="grid grid-cols-2 gap-3 md:gap-4 mb-6 md:mb-8">
|
<div className="grid grid-cols-2 gap-3 md:gap-4 mb-6 md:mb-8">
|
||||||
|
|||||||
231
src/features/profile/ui/Setting.tsx
Normal file
231
src/features/profile/ui/Setting.tsx
Normal file
@@ -0,0 +1,231 @@
|
|||||||
|
import { Avatar, AvatarFallback, AvatarImage } from '@/shared/ui/avatar';
|
||||||
|
import { Badge } from '@/shared/ui/badge';
|
||||||
|
import { Button } from '@/shared/ui/button';
|
||||||
|
import { Card, CardContent } from '@/shared/ui/card';
|
||||||
|
import { Input } from '@/shared/ui/input';
|
||||||
|
import { Label } from '@/shared/ui/label';
|
||||||
|
import { Switch } from '@/shared/ui/switch';
|
||||||
|
import {
|
||||||
|
Bell,
|
||||||
|
Camera,
|
||||||
|
ChevronDown,
|
||||||
|
ChevronRight,
|
||||||
|
CreditCard,
|
||||||
|
Edit3,
|
||||||
|
Globe,
|
||||||
|
Moon,
|
||||||
|
Plus,
|
||||||
|
Settings,
|
||||||
|
Shield,
|
||||||
|
User,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { user } from '../lib/data';
|
||||||
|
|
||||||
|
const Setting = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h2 className="text-xl md:text-2xl font-bold text-foreground mb-4 md:mb-6">
|
||||||
|
Sozlamalar
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<Card className="border-0 shadow-sm mb-4 md:mb-6">
|
||||||
|
<CardContent className="p-4 md:p-6">
|
||||||
|
<h3 className="font-semibold text-foreground mb-4 flex items-center gap-2 text-sm md:text-base">
|
||||||
|
<User className="w-4 h-4 md:w-5 md:h-5" />
|
||||||
|
{"Shaxsiy ma'lumotlar"}
|
||||||
|
</h3>
|
||||||
|
<div className="flex flex-col md:flex-row items-center gap-4 md:gap-6 mb-4 md:mb-6">
|
||||||
|
<div className="relative">
|
||||||
|
<Avatar className="w-16 h-16 md:w-20 md:h-20">
|
||||||
|
<AvatarImage
|
||||||
|
src={user.avatar || '/placeholder.svg'}
|
||||||
|
alt={user.phone}
|
||||||
|
/>
|
||||||
|
<AvatarFallback className="bg-emerald-500 text-white text-lg md:text-xl">
|
||||||
|
U
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<Button
|
||||||
|
size="icon"
|
||||||
|
className="absolute -bottom-1 -right-1 w-7 h-7 md:w-8 md:h-8 rounded-full bg-emerald-500 hover:bg-emerald-600"
|
||||||
|
>
|
||||||
|
<Camera className="w-3 h-3 md:w-4 md:h-4 text-white" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="text-center md:text-left">
|
||||||
|
<p className="text-xs md:text-sm text-muted-foreground">
|
||||||
|
{"A'zo"}: {user.memberSince}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-4">
|
||||||
|
<div className="space-y-1.5 md:space-y-2">
|
||||||
|
<Label htmlFor="phone" className="text-xs md:text-sm">
|
||||||
|
Telefon raqam
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="phone"
|
||||||
|
defaultValue={user.phone}
|
||||||
|
className="bg-slate-50 h-9 md:h-10 text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1.5 md:space-y-2">
|
||||||
|
<Label htmlFor="email" className="text-xs md:text-sm">
|
||||||
|
Email
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="email"
|
||||||
|
defaultValue={user.email}
|
||||||
|
className="bg-slate-50 h-9 md:h-10 text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1.5 md:space-y-2">
|
||||||
|
<Label htmlFor="birthdate" className="text-xs md:text-sm">
|
||||||
|
{"Tug'ilgan sana"}
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="birthdate"
|
||||||
|
type="date"
|
||||||
|
defaultValue={user.birthDate}
|
||||||
|
className="bg-slate-50 h-9 md:h-10 text-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button className="mt-4 bg-emerald-500 hover:bg-emerald-600 h-9 md:h-10 text-sm w-full md:w-auto">
|
||||||
|
<Edit3 className="w-4 h-4 mr-2" />
|
||||||
|
Saqlash
|
||||||
|
</Button>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="border-0 shadow-sm mb-4 md:mb-6">
|
||||||
|
<CardContent className="p-4 md:p-6">
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<h3 className="font-semibold text-foreground flex items-center gap-2 text-sm md:text-base">
|
||||||
|
<CreditCard className="w-4 h-4 md:w-5 md:h-5" />
|
||||||
|
{"To'lov usullari"}
|
||||||
|
</h3>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="bg-transparent gap-1 md:gap-2 h-8 text-xs md:text-sm"
|
||||||
|
>
|
||||||
|
<Plus className="w-3 h-3 md:w-4 md:h-4" />
|
||||||
|
{"Qo'shish"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between p-3 md:p-4 rounded-xl bg-gradient-to-r from-slate-800 to-slate-900 text-white">
|
||||||
|
<div className="flex items-center gap-2 md:gap-3">
|
||||||
|
<div className="w-10 h-6 md:w-12 md:h-8 bg-amber-400 rounded flex items-center justify-center text-slate-900 font-bold text-[10px] md:text-xs">
|
||||||
|
VISA
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-xs md:text-sm">
|
||||||
|
•••• •••• •••• 4532
|
||||||
|
</p>
|
||||||
|
<p className="text-[10px] md:text-sm text-slate-400">12/26</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Badge className="bg-emerald-500/20 text-emerald-400 border-0 text-[10px] md:text-xs">
|
||||||
|
Asosiy
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="border-0 shadow-sm mb-4 md:mb-6">
|
||||||
|
<CardContent className="p-4 md:p-6">
|
||||||
|
<h3 className="font-semibold text-foreground mb-4 flex items-center gap-2 text-sm md:text-base">
|
||||||
|
<Settings className="w-4 h-4 md:w-5 md:h-5" />
|
||||||
|
Ilova sozlamalari
|
||||||
|
</h3>
|
||||||
|
<div className="space-y-3 md:space-y-4">
|
||||||
|
<div className="flex items-center justify-between py-2 md:py-3 border-b border-slate-100">
|
||||||
|
<div className="flex items-center gap-2 md:gap-3">
|
||||||
|
<Bell className="w-4 h-4 md:w-5 md:h-5 text-muted-foreground" />
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-foreground text-sm">
|
||||||
|
Bildirishnomalar
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-muted-foreground">Push xabarlar</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Switch defaultChecked />
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between py-2 md:py-3 border-b border-slate-100">
|
||||||
|
<div className="flex items-center gap-2 md:gap-3">
|
||||||
|
<Moon className="w-4 h-4 md:w-5 md:h-5 text-muted-foreground" />
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-foreground text-sm">
|
||||||
|
{"Qorong'u rejim"}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-muted-foreground">Tungi rejim</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Switch />
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between py-2 md:py-3 border-b border-slate-100">
|
||||||
|
<div className="flex items-center gap-2 md:gap-3">
|
||||||
|
<Globe className="w-4 h-4 md:w-5 md:h-5 text-muted-foreground" />
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-foreground text-sm">Til</p>
|
||||||
|
<p className="text-xs text-muted-foreground">Ilova tili</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="bg-transparent gap-1 h-8 text-xs"
|
||||||
|
>
|
||||||
|
{"O'zbek"} <ChevronDown className="w-3 h-3" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between py-2 md:py-3">
|
||||||
|
<div className="flex items-center gap-2 md:gap-3">
|
||||||
|
<Shield className="w-4 h-4 md:w-5 md:h-5 text-muted-foreground" />
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-foreground text-sm">
|
||||||
|
Xavfsizlik
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{"Parolni o'zgartirish"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ChevronRight className="w-4 h-4 md:w-5 md:h-5 text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Danger Zone */}
|
||||||
|
<Card className="border-0 shadow-sm border-red-100">
|
||||||
|
<CardContent className="p-4 md:p-6">
|
||||||
|
<h3 className="font-semibold text-red-600 mb-3 md:mb-4 text-sm md:text-base">
|
||||||
|
Xavfli zona
|
||||||
|
</h3>
|
||||||
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-3">
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-foreground text-sm">
|
||||||
|
{"Hisobni o'chirish"}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{"Barcha ma'lumotlar o'chiriladi"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="border-red-200 text-red-600 hover:bg-red-50 hover:text-red-700 bg-transparent h-9 text-sm w-full md:w-auto"
|
||||||
|
>
|
||||||
|
{"O'chirish"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Setting;
|
||||||
168
src/features/profile/ui/Support.tsx
Normal file
168
src/features/profile/ui/Support.tsx
Normal file
@@ -0,0 +1,168 @@
|
|||||||
|
import {
|
||||||
|
AlertTriangle,
|
||||||
|
CheckCircle,
|
||||||
|
HelpCircle,
|
||||||
|
MessageCircle,
|
||||||
|
RotateCcw,
|
||||||
|
Send,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
export default function CustomerSupport() {
|
||||||
|
const [selectedCategory, setSelectedCategory] = useState('');
|
||||||
|
const [message, setMessage] = useState('');
|
||||||
|
const [showSuccess, setShowSuccess] = useState(false);
|
||||||
|
|
||||||
|
const categories = [
|
||||||
|
{
|
||||||
|
id: 'vozvrat',
|
||||||
|
title: 'Vozvrat (Qaytarish)',
|
||||||
|
description: "Mahsulotni qaytarish bo'yicha savol",
|
||||||
|
icon: RotateCcw,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'brak',
|
||||||
|
title: 'Brak mahsulotlar',
|
||||||
|
description: 'Nuqsonli yoki shikastlangan mahsulotlar',
|
||||||
|
icon: AlertTriangle,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'umumiy',
|
||||||
|
title: 'Umumiy murojaatlar',
|
||||||
|
description: 'Boshqa savollar va takliflar',
|
||||||
|
icon: HelpCircle,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleSendToTelegram = () => {
|
||||||
|
if (!selectedCategory || !message.trim()) {
|
||||||
|
alert('Iltimos, kategoriya va xabar matnini kiriting');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const category = categories.find((c) => c.id === selectedCategory);
|
||||||
|
|
||||||
|
if (!category) {
|
||||||
|
alert('Kategoriya topilmadi');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const telegramText = `🔔 Yangi murojaat\n\n📋 Kategoriya: ${category.title}\n\n💬 Xabar:\n${message}`;
|
||||||
|
|
||||||
|
const telegramUsername = 'web_app_0515_bot';
|
||||||
|
const telegramUrl = `https://t.me/${telegramUsername}?text=${encodeURIComponent(
|
||||||
|
telegramText,
|
||||||
|
)}`;
|
||||||
|
|
||||||
|
window.open(telegramUrl, '_blank');
|
||||||
|
|
||||||
|
setShowSuccess(true);
|
||||||
|
setTimeout(() => {
|
||||||
|
setShowSuccess(false);
|
||||||
|
setSelectedCategory('');
|
||||||
|
setMessage('');
|
||||||
|
}, 3000);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="custom-sontainer">
|
||||||
|
<>
|
||||||
|
{/* 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">
|
||||||
|
{"Qo'llab-quvvatlash"}
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-600">Sizga yordam berish uchun tayyormiz</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Success Message */}
|
||||||
|
{showSuccess && (
|
||||||
|
<div className="mb-6 bg-white border border-green-500 p-4 rounded-lg flex items-center gap-3">
|
||||||
|
<CheckCircle className="w-6 h-6 text-green-500" />
|
||||||
|
<p className="text-gray-800">
|
||||||
|
Xabaringiz yuborildi! Tez orada javob beramiz.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Categories */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-800 mb-3">
|
||||||
|
{"Murojaat yo'nalishini tanlang"}
|
||||||
|
</h2>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{categories.map((category) => {
|
||||||
|
const Icon = category.icon;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={category.id}
|
||||||
|
onClick={() => setSelectedCategory(category.id)}
|
||||||
|
className={`w-full p-4 rounded-lg border-2 transition-all text-left flex items-start gap-3 ${
|
||||||
|
selectedCategory === category.id
|
||||||
|
? 'border-green-500 bg-white'
|
||||||
|
: 'border-gray-300 bg-white hover:border-gray-400'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<Icon className="w-5 h-5 text-gray-700 mt-1" />
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-gray-800">
|
||||||
|
{category.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-gray-600">
|
||||||
|
{category.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Message Input */}
|
||||||
|
<div className="bg-white rounded-lg border border-gray-300 p-6 mb-6">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-800 mb-3">
|
||||||
|
Xabar yozing
|
||||||
|
</h2>
|
||||||
|
<textarea
|
||||||
|
value={message}
|
||||||
|
onChange={(e) => setMessage(e.target.value)}
|
||||||
|
placeholder="Savolingiz yoki murojaatingizni batafsil yozing..."
|
||||||
|
className="w-full h-32 p-3 border border-gray-300 rounded-lg focus:border-gray-500 focus:outline-none resize-none text-gray-700"
|
||||||
|
/>
|
||||||
|
<div className="mt-4 flex items-center justify-between">
|
||||||
|
<p className="text-sm text-gray-500">{message.length}/1000 belgi</p>
|
||||||
|
<button
|
||||||
|
onClick={handleSendToTelegram}
|
||||||
|
disabled={!selectedCategory || !message.trim()}
|
||||||
|
className={`flex items-center gap-2 px-5 py-2 rounded-lg font-medium transition-all ${
|
||||||
|
selectedCategory && message.trim()
|
||||||
|
? 'bg-gray-800 text-white hover:bg-gray-700'
|
||||||
|
: 'bg-gray-300 text-gray-500 cursor-not-allowed'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<Send className="w-4 h-4" />
|
||||||
|
Telegram orqali yuborish
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Info Box */}
|
||||||
|
<div className="bg-white border border-gray-300 rounded-lg p-5">
|
||||||
|
<h3 className="font-semibold text-gray-800 mb-2">
|
||||||
|
{"Aloqa ma'lumotlari"}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 text-sm mb-3">
|
||||||
|
Barcha murojaatlarga 24 soat ichida javob beramiz
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col gap-2 text-sm text-gray-600">
|
||||||
|
<div>Dushanba-Shanba: 9:00-18:00</div>
|
||||||
|
<div>Yakshanba: Dam olish</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,8 +1,8 @@
|
|||||||
const PRODUCT_INFO = {
|
const PRODUCT_INFO = {
|
||||||
name: 'FIAS App',
|
name: 'GASTRO',
|
||||||
description: 'Generated by create next app',
|
description: 'Generated by create next app',
|
||||||
logo: '/favicon.png',
|
logo: '/logos/logo.png',
|
||||||
favicon: '/favicon.svg',
|
favicon: '/logos/logo.png',
|
||||||
url: 'https://www.shadcnblocks.com',
|
url: 'https://www.shadcnblocks.com',
|
||||||
socials: {
|
socials: {
|
||||||
telegram: 'https://t.me/usmanov_dev',
|
telegram: 'https://t.me/usmanov_dev',
|
||||||
|
|||||||
@@ -12,15 +12,15 @@ const Footer = () => {
|
|||||||
<div className="custom-container max-lg:hidden">
|
<div className="custom-container max-lg:hidden">
|
||||||
<div className="flex w-full gap-10 flex-col items-center justify-between text-center lg:flex-row lg:items-start lg:text-left">
|
<div className="flex w-full gap-10 flex-col items-center justify-between text-center lg:flex-row lg:items-start lg:text-left">
|
||||||
<div className="flex w-fit flex-col items-center justify-between gap-4 lg:items-start mb-8 lg:mb-0">
|
<div className="flex w-fit flex-col items-center justify-between gap-4 lg:items-start mb-8 lg:mb-0">
|
||||||
<div className="flex items-center gap-3 lg:justify-start">
|
<div className="flex items-center gap-1 lg:justify-start">
|
||||||
<div className="p-2 bg-blue-600 rounded-xl">
|
<div className="p-2">
|
||||||
<Image
|
<Image
|
||||||
width={500}
|
width={500}
|
||||||
height={500}
|
height={500}
|
||||||
src={PRODUCT_INFO.logo || '/placeholder.svg'}
|
src={PRODUCT_INFO.logo || '/placeholder.svg'}
|
||||||
alt={PRODUCT_INFO.name}
|
alt={PRODUCT_INFO.name}
|
||||||
title={PRODUCT_INFO.name}
|
title={PRODUCT_INFO.name}
|
||||||
className="h-6 w-6 brightness-0 invert"
|
className="h-10 w-10"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<h2 className="text-xl font-bold text-slate-800">
|
<h2 className="text-xl font-bold text-slate-800">
|
||||||
|
|||||||
@@ -107,17 +107,16 @@ const Navbar = () => {
|
|||||||
>
|
>
|
||||||
<div className="custom-container h-6 flex justify-between items-center gap-3">
|
<div className="custom-container h-6 flex justify-between items-center gap-3">
|
||||||
<div
|
<div
|
||||||
className="p-2 flex gap-2 rounded-xl cursor-pointer"
|
className="p-2 flex gap-2 rounded-xl cursor-pointer items-center"
|
||||||
onClick={() => router.push('/')}
|
onClick={() => router.push('/')}
|
||||||
>
|
>
|
||||||
<Image
|
<Image
|
||||||
src="/favicon.png"
|
src="/logos/logo.png"
|
||||||
alt="logo"
|
alt="logo"
|
||||||
width={40}
|
width={40}
|
||||||
height={20}
|
height={20}
|
||||||
className="w-6 h-6"
|
className="w-10 h-10"
|
||||||
/>
|
/>
|
||||||
<h3>Fias</h3>
|
|
||||||
</div>
|
</div>
|
||||||
<div className="w-full flex justify-end lg:hidden gap-2">
|
<div className="w-full flex justify-end lg:hidden gap-2">
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
Reference in New Issue
Block a user