Switch to version 2: added src/app/order-history/page.tsx

2026-06-09 22:47:47 +00:00
parent f10addaa2e
commit 7bd2ef2f70
1 changed files with 119 additions and 0 deletions
--- a/src/app/order-history/page.tsx
+++ b/src/app/order-history/page.tsx
@@ -0,0 +1,119 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+
+export default function OrderHistoryPage() {
+  // Placeholder for order history data
+  const orders = [
+    { id: "ORD001", date: "2024-03-15", total: "$1,250", status: "Delivered", items: ["Chronos Elegance Watch"] },
+    { id: "ORD002", date: "2024-02-28", total: "$450", status: "Shipped", items: ["Versailles Silk Scarf"] },
+    { id: "ORD003", date: "2024-01-10", total: "$8,900", status: "Delivered", items: ["Empress Alligator Handbag"] },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="compact"
+      sizing="largeSmall"
+      background="circleGradient"
+      cardStyle="glass-depth"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="light"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "#hero" },
+              { name: "About", id: "#about" },
+              { name: "Products", id: "#products" },
+              { name: "Features", id: "#features" },
+              { name: "Testimonials", id: "#testimonials" },
+              { name: "Contact", id: "#contact" },
+              { name: "Signup", id: "/signup" },
+              { name: "Order History", id: "/order-history" },
+              { name: "Account", id: "/account" },
+            ]}
+            logoSrc="http://img.b2bpic.net/free-vector/wedding-badge-vector-gold-vintage-ornamental-style_53876-140182.jpg"
+            logoAlt="Elegance Atelier Logo"
+            brandName="Elegance Atelier"
+            button={{
+              text: "Login",              href: "/login"}}
+            animateOnLoad={true}
+          />
+        </div>
+
+        <main className="container mx-auto py-12 px-4 min-h-[calc(100vh-200px)]">
+          <h1 className="text-4xl font-bold mb-8 text-center">Your Order History</h1>
+          {
+            orders.length === 0 ? (
+              <p className="text-center text-lg text-foreground">You haven't placed any orders yet.</p>
+            ) : (
+              <div className="space-y-6">
+                {orders.map((order) => (
+                  <div key={order.id} className="p-6 rounded-lg shadow-md bg-card border border-border">
+                    <div className="flex justify-between items-center mb-4">
+                      <h2 className="text-xl font-semibold text-foreground">Order ID: {order.id}</h2>
+                      <span className="text-sm font-medium text-accent">{order.status}</span>
+                    </div>
+                    <p className="text-foreground mb-2">Date: {order.date}</p>
+                    <p className="text-foreground mb-4">Total: {order.total}</p>
+                    <div className="border-t border-border pt-4">
+                      <h3 className="text-lg font-medium text-foreground mb-2">Items:</h3>
+                      <ul className="list-disc list-inside text-foreground">
+                        {order.items.map((item, index) => (
+                          <li key={index}>{item}</li>
+                        ))}
+                      </ul>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )
+          }
+        </main>
+
+        <div id="footer" data-section="footer">
+          <FooterLogoEmphasis
+            logoSrc="http://img.b2bpic.net/free-vector/wedding-badge-vector-gold-vintage-ornamental-style_53876-140182.jpg"
+            logoAlt="Elegance Atelier Logo"
+            columns={[
+              {
+                items: [
+                  { label: "Home", href: "#hero" },
+                  { label: "About Us", href: "#about" },
+                  { label: "Collections", href: "#products" },
+                  { label: "Membership", href: "#pricing" },
+                ],
+              },
+              {
+                items: [
+                  { label: "Contact", href: "#contact" },
+                  { label: "FAQ", href: "#faq" },
+                  { label: "Login", href: "/login" },
+                  { label: "Signup", href: "/signup" },
+                  { label: "Order History", href: "/order-history" },
+                  { label: "Account", href: "/account" },
+                ],
+              },
+              {
+                items: [
+                  { label: "Privacy Policy", href: "#" },
+                  { label: "Terms of Service", href: "#" },
+                  { label: "Shipping & Returns", href: "#" },
+                ],
+              },
+            ]}
+            logoText="Elegance Atelier"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}