Add src/app/my-orders/page.tsx
This commit is contained in:
146
src/app/my-orders/page.tsx
Normal file
146
src/app/my-orders/page.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
|
||||
export default function MyOrdersPage() {
|
||||
const orders = [
|
||||
{ id: "#1001", service: "Instagram Likes", quantity: "1000", status: "Completed", date: "2024-07-20" },
|
||||
{ id: "#1002", service: "YouTube Views", quantity: "5000", status: "Processing", date: "2024-07-21" },
|
||||
{ id: "#1003", service: "TikTok Followers", quantity: "100", status: "Pending", date: "2024-07-21" },
|
||||
{ id: "#1004", service: "Twitter Retweets", quantity: "500", status: "Completed", date: "2024-07-19" },
|
||||
{ id: "#1005", service: "Facebook Comments", quantity: "10", status: "Cancelled", date: "2024-07-18" }
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="large"
|
||||
background="grid"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Pricing", id: "/pricing" },
|
||||
{ name: "My Orders", id: "/my-orders" },
|
||||
{ name: "Add Funds", id: "/add-funds" },
|
||||
{ name: "Profile", id: "/profile" },
|
||||
{ name: "FAQ", id: "/faq" },
|
||||
{ name: "Contact", id: "/contact" }
|
||||
]}
|
||||
logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
|
||||
logoAlt="SocBoost Logo"
|
||||
brandName="SocBoost"
|
||||
button={{
|
||||
text: "Register", href: "/register"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen py-16 px-4 sm:px-6 lg:px-8 bg-background">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h1 className="text-4xl font-bold text-foreground text-center mb-6">My Orders</h1>
|
||||
<p className="text-lg text-muted-foreground text-center mb-10">View and manage your recent orders.</p>
|
||||
|
||||
<div className="mb-8 flex justify-end">
|
||||
<select className="p-2 rounded-md bg-card border border-border text-foreground">
|
||||
<option value="all">All Statuses</option>
|
||||
<option value="pending">Pending</option>
|
||||
<option value="processing">Processing</option>
|
||||
<option value="completed">Completed</option>
|
||||
<option value="cancelled">Cancelled</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto rounded-lg shadow-md border border-border">
|
||||
<table className="min-w-full divide-y divide-border">
|
||||
<thead className="bg-card">
|
||||
<tr>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">ID</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">Service</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">Quantity</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">Status</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-background divide-y divide-border">
|
||||
{orders.map((order) => (
|
||||
<tr key={order.id}>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-foreground">{order.id}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">{order.service}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">{order.quantity}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">
|
||||
<span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
|
||||
order.status === 'Completed' ? 'bg-green-100 text-green-800' :
|
||||
order.status === 'Processing' ? 'bg-blue-100 text-blue-800' :
|
||||
order.status === 'Pending' ? 'bg-yellow-100 text-yellow-800' :
|
||||
'bg-red-100 text-red-800'
|
||||
}`}>
|
||||
{order.status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-foreground">{order.date}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "Instagram", href: "/services#instagram" },
|
||||
{ label: "YouTube", href: "/services#youtube" },
|
||||
{ label: "TikTok", href: "/services#tiktok" },
|
||||
{ label: "Twitter", href: "/services#twitter" },
|
||||
{ label: "Facebook", href: "/services#facebook" },
|
||||
{ label: "Telegram", href: "/services#telegram" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/#features" },
|
||||
{ label: "Pricing", href: "/pricing" },
|
||||
{ label: "FAQ", href: "/faq" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Terms of Service", href: "/terms" },
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "Blog", href: "#" },
|
||||
{ label: "API Docs", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoSrc="http://img.b2bpic.net/free-photo/isolated-white-house-silhouette-minimal-black-landscape_1194-641505.jpg"
|
||||
logoAlt="SocBoost Logo"
|
||||
logoText="SocBoost"
|
||||
copyrightText="© 2024 SocBoost. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user