added support page

src/features/auth/ui/Login.tsx

@@ -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="w-20 h-20 bg-white bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4">
             {step === 'phone' ? (
-              <Phone className="w-10 h-10" />
+              <Phone className="w-10 h-10 text-blue-500" />
             ) : (
               <Lock className="w-10 h-10" />
             )}

src/features/profile/lib/data.ts

@@ -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',
+};

src/features/profile/ui/Favourite.tsx

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

src/features/profile/ui/History.tsx

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

src/features/profile/ui/Orders.tsx

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

src/features/profile/ui/Profile.tsx

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

src/features/profile/ui/Setting.tsx

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

src/features/profile/ui/Support.tsx

@@ -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>
+  );
+}