bender/437f4e98-ef5c-4514-9247-4a4844a40e22
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Update src/app/orders/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-09 09:49:41 +00:00
parent ca3caaf4a8
commit fef807e2f0
1 changed files with 21 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
src/app/orders/page.tsx
View File

@@ -1,18 +1,16 @@
'use client';
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import TimelineCardStack from '@/components/cardStack/layouts/timelines/TimelineCardStack';
import { Package } from 'lucide-react';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
const navItems = [
{ name: 'Home', id: '/' },
{ name: 'Dashboard', id: '/dashboard' },
{ name: 'Orders', id: '/orders' },
{ name: 'Sign In', id: '/login' },
];
export default function OrdersPage() {
const navItems = [
{ name: 'Home', id: '/' },
{ name: 'Dashboard', id: '/dashboard' },
{ name: 'Orders', id: '/orders' },
{ name: 'Account', id: '/account' },
];
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
@@ -20,105 +18,24 @@ export default function OrdersPage() {
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
background="none"
cardStyle="solid"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<NavbarLayoutFloatingOverlay
navItems={navItems}
brandName="Webild"
button={{
text: 'Account',
href: '/account',
}}
/>
<div className="py-20 px-4">
<div className="max-w-6xl mx-auto">
<TimelineCardStack
title="Your Order History"
description="Track the progress of your orders from placement to delivery"
tag="Order Tracking"
tagIcon={Package}
textboxLayout="default"
buttons={[
{ text: 'View Dashboard', href: '/dashboard' },
]}
useInvertedBackground={false}
>
<div className="bg-card rounded-lg p-6 border border-accent/20">
<h3 className="text-xl font-semibold mb-2">Order #12345</h3>
<p className="text-foreground/70 mb-4">Placed on January 15, 2025</p>
<div className="space-y-2">
<div className="flex items-center">
<span className="w-2 h-2 bg-primary-cta rounded-full mr-3"></span>
<p className="text-sm">Order Confirmed - January 15</p>
</div>
<div className="flex items-center">
<span className="w-2 h-2 bg-primary-cta rounded-full mr-3"></span>
<p className="text-sm">Processing - January 16</p>
</div>
<div className="flex items-center">
<span className="w-2 h-2 bg-primary-cta rounded-full mr-3"></span>
<p className="text-sm">Shipped - January 17</p>
</div>
<div className="flex items-center">
<span className="w-2 h-2 bg-accent rounded-full mr-3"></span>
<p className="text-sm">In Transit - Expected January 22</p>
</div>
</div>
<p className="text-sm text-foreground/60 mt-4">Total: $125.99</p>
</div>
<div className="bg-card rounded-lg p-6 border border-accent/20">
<h3 className="text-xl font-semibold mb-2">Order #12340</h3>
<p className="text-foreground/70 mb-4">Placed on January 10, 2025</p>
<div className="space-y-2">
<div className="flex items-center">
<span className="w-2 h-2 bg-primary-cta rounded-full mr-3"></span>
<p className="text-sm">Order Confirmed - January 10</p>
</div>
<div className="flex items-center">
<span className="w-2 h-2 bg-primary-cta rounded-full mr-3"></span>
<p className="text-sm">Processing - January 11</p>
</div>
<div className="flex items-center">
<span className="w-2 h-2 bg-primary-cta rounded-full mr-3"></span>
<p className="text-sm">Shipped - January 12</p>
</div>
<div className="flex items-center">
<span className="w-2 h-2 bg-primary-cta rounded-full mr-3"></span>
<p className="text-sm">Delivered - January 18</p>
</div>
</div>
<p className="text-sm text-foreground/60 mt-4">Total: $89.50</p>
</div>
<div className="bg-card rounded-lg p-6 border border-accent/20">
<h3 className="text-xl font-semibold mb-2">Order #12335</h3>
<p className="text-foreground/70 mb-4">Placed on January 5, 2025</p>
<div className="space-y-2">
<div className="flex items-center">
<span className="w-2 h-2 bg-primary-cta rounded-full mr-3"></span>
<p className="text-sm">Order Confirmed - January 5</p>
</div>
<div className="flex items-center">
<span className="w-2 h-2 bg-primary-cta rounded-full mr-3"></span>
<p className="text-sm">Processing - January 6</p>
</div>
<div className="flex items-center">
<span className="w-2 h-2 bg-primary-cta rounded-full mr-3"></span>
<p className="text-sm">Shipped - January 7</p>
</div>
<div className="flex items-center">
<span className="w-2 h-2 bg-primary-cta rounded-full mr-3"></span>
<p className="text-sm">Delivered - January 12</p>
</div>
</div>
<p className="text-sm text-foreground/60 mt-4">Total: $245.00</p>
</div>
</TimelineCardStack>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={navItems}
brandName="Webild"
/>
</div>
<div className="min-h-screen bg-gradient-to-br from-background to-card pt-24">
<div className="max-w-4xl mx-auto px-4 py-12">
<h1 className="text-4xl font-bold text-foreground mb-4">Your Orders</h1>
<p className="text-foreground/60 text-lg">Track and manage your orders.</p>
</div>
</div>
</ThemeProvider>
);
}
}