added support page

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;