Update app/tracking/page.tsx

app/tracking/page.tsx

@@ -0,0 +1,116 @@
+"use client";
+import { useState } from "react";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Search, Truck, Package, MapPin, CheckCircle2 } from "lucide-react";
+
+import { NavBar } from "@/components/navbar";
+import { Footer } from "@/components/footer";
+
+export default function TrackingPage() {
+  const [orderId, setOrderId] = useState("");
+  const [order, setOrder] = useState<any>(null);
+  const [error, setError] = useState(false);
+
+  const handleSearch = () => {
+    const data = localStorage.getItem(`order_${orderId.toUpperCase()}`);
+    if (data) {
+      setOrder(JSON.parse(data));
+      setError(false);
+    } else {
+      setOrder(null);
+      setError(true);
+    }
+  };
+
+  return (
+    <main>
+      <NavBar />
+      <Container className="py-32 max-w-3xl">
+      <div className="text-center mb-12">
+        <Heading>Rastrea tu Pedido</Heading>
+        <p className="text-neutral-600 mt-4">Ingresa tu número de orden o guía para conocer el estado de tu envío</p>
+      </div>
+
+      <div className="flex gap-2 mb-12">
+        <Input 
+          placeholder="Ej: PAL-X1Y2Z3 o ID de Orden" 
+          value={orderId} 
+          onChange={(e) => setOrderId(e.target.value)}
+          className="h-12"
+        />
+        <Button onClick={handleSearch} className="h-12 px-8">
+          <Search className="w-4 h-4 mr-2" /> Buscar
+        </Button>
+      </div>
+
+      {error && (
+        <div className="p-4 bg-red-50 text-red-600 rounded-lg text-center">
+          No se encontró ningún pedido con ese número. Por favor verifica tus datos.
+        </div>
+      )}
+
+      {order && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex justify-between items-center">
+              <span>Detalles del Envío</span>
+              <span className="text-sm font-normal text-neutral-500">Orden #{orderId}</span>
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-8">
+            <div className="relative">
+              <div className="absolute left-4 top-0 bottom-0 w-0.5 bg-neutral-200"></div>
+              
+              <TrackingStep 
+                active={true} 
+                done={true}
+                icon={<CheckCircle2 className="w-5 h-5" />} 
+                title="Pedido Recibido" 
+                date={new Date(order.date).toLocaleDateString()} 
+              />
+              <TrackingStep 
+                active={order.status !== "Pendiente"} 
+                done={order.status !== "Pendiente"}
+                icon={<Package className="w-5 h-5" />} 
+                title="Pago Confirmado" 
+                date="Verificado" 
+              />
+              <TrackingStep 
+                active={order.status === "Enviado" || order.status === "Entregado"} 
+                done={order.status === "Enviado" || order.status === "Entregado"}
+                icon={<Truck className="w-5 h-5" />} 
+                title="En Camino" 
+                date={order.trackingNumber} 
+              />
+              <TrackingStep 
+                active={order.status === "Entregado"} 
+                done={order.status === "Entregado"}
+                icon={<MapPin className="w-5 h-5" />} 
+                title="Entregado" 
+                date="Destino Final" 
+              />
+            </div>
+          </CardContent>
+        </Card>
+      )}
+      </Container>
+      <Footer />
+    </main>
+  );
+}
+
+function TrackingStep({ active, done, icon, title, date }: any) {
+  return (
+    <div className={`relative pl-12 pb-8 last:pb-0 ${active ? 'text-neutral-900' : 'text-neutral-400'}`}>
+      <div className={`absolute left-0 w-8 h-8 rounded-full flex items-center justify-center z-10 ${done ? 'bg-green-600 text-white' : active ? 'bg-blue-600 text-white' : 'bg-neutral-200 text-neutral-500'}`}>
+        {icon}
+      </div>
+      <h4 className="font-bold">{title}</h4>
+      <p className="text-sm">{date}</p>
+    </div>
+  );
+}