added support page
This commit is contained in:
Samandar Turgunboyev
@@ -2,192 +2,41 @@
|
||||
|
||||
import { PartnershipForm } from '@/features/about/ui/AboutPage';
|
||||
import Faq from '@/features/faq/ui/Faq';
|
||||
import Favourite from '@/features/favourite/ui/Favourite';
|
||||
import { useRouter } from '@/shared/config/i18n/navigation';
|
||||
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 { Tabs, TabsList, TabsTrigger } from '@/shared/ui/tabs';
|
||||
import {
|
||||
Bell,
|
||||
Calendar,
|
||||
Camera,
|
||||
CheckCircle,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
Clock,
|
||||
CreditCard,
|
||||
Edit3,
|
||||
Globe,
|
||||
Handshake,
|
||||
Heart,
|
||||
HelpCircle,
|
||||
History,
|
||||
Home,
|
||||
LogOut,
|
||||
MapPin,
|
||||
MessageCircleQuestion,
|
||||
Moon,
|
||||
Package,
|
||||
Plus,
|
||||
RefreshCw,
|
||||
Settings,
|
||||
Shield,
|
||||
ShoppingBag,
|
||||
Star,
|
||||
TrendingUp,
|
||||
Truck,
|
||||
User,
|
||||
Wallet,
|
||||
} from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
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 [activeSection, setActiveSection] = useState('overview');
|
||||
const [ordersTab, setOrdersTab] = useState('active');
|
||||
const [historyTab, setHistoryTab] = useState('all');
|
||||
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 statusMap: Record<
|
||||
string,
|
||||
@@ -242,6 +91,7 @@ const Profile = () => {
|
||||
{ id: 'history', label: 'Tarix', icon: History },
|
||||
{ id: 'agency', label: "Hamkor bo'lish", icon: Handshake },
|
||||
{ id: 'faq', label: 'Savol javoblar', icon: MessageCircleQuestion },
|
||||
{ id: 'support', label: "Qo'llab-quvvatlash", icon: HelpCircle },
|
||||
];
|
||||
|
||||
const statistics = {
|
||||
@@ -253,486 +103,23 @@ const Profile = () => {
|
||||
const renderContent = () => {
|
||||
switch (activeSection) {
|
||||
case 'orders':
|
||||
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>
|
||||
);
|
||||
return <Orders />;
|
||||
|
||||
case 'history':
|
||||
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">
|
||||
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>
|
||||
);
|
||||
return <HistoryTabs />;
|
||||
|
||||
case 'favorites':
|
||||
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>
|
||||
);
|
||||
return <Favourite />;
|
||||
|
||||
case 'agency':
|
||||
return <PartnershipForm />;
|
||||
|
||||
case 'faq':
|
||||
return <Faq />;
|
||||
case 'support':
|
||||
return <CustomerSupport />;
|
||||
|
||||
default:
|
||||
// Overview section
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-2 gap-3 md:gap-4 mb-6 md:mb-8">
|
||||
|
||||
Reference in New Issue
Block a user