Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 16x 16x 16x 16x 16x 16x 16x 19x 3x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 114x 114x 114x 114x 114x 114x 114x 114x 114x 114x 114x 114x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x 19x | "use client";
import React from "react";
import { Session } from "next-auth";
import Image from "next/image";
import { Icon, IconName } from "@/components/ui/icons";
import { Button } from "@/components/ui";
interface AccountSidebarProps {
session: Session | null;
activeTab: string;
memberSince: string;
onTabChange: (tab: string) => void;
onLogout: () => void;
}
export default function AccountSidebar({
session,
activeTab,
memberSince,
onTabChange,
onLogout}: AccountSidebarProps) {
const menuItems: Array<{ id: string; icon: IconName; label: string }> = [
{ id: "dashboard", icon: "dashboard", label: "Dashboard" },
{ id: "orders", icon: "package", label: "Orders" },
{ id: "loyalty", icon: "gift", label: "Rewards" },
{ id: "downloads", icon: "download", label: "Downloads" },
{ id: "addresses", icon: "map-pin", label: "Addresses" },
{ id: "account-details", icon: "user", label: "Account Details" },
];
return (
<div className="xl:max-w-[370px] w-full bg-white dark:bg-gray-800 rounded-xl shadow-1">
<div className="flex xl:flex-col">
<div className="hidden lg:flex flex-wrap items-center gap-5 py-6 px-4 sm:px-7.5 xl:px-9 border-r xl:border-r-0 xl:border-b border-gray-3 dark:border-gray-700">
<div className="w-16 h-16 rounded-full overflow-hidden flex items-center justify-center bg-gray-100 dark:bg-gray-700">
{session?.user?.image ? (
<Image
src={session.user.image}
alt="user"
width={64}
height={64}
className="w-full h-full object-cover"
/>
) : (
<Icon name="user-circle" size={48} className="text-gray-400 dark:text-gray-500" />
)}
</div>
<div>
<p className="font-medium text-dark dark:text-gray-100 mb-0.5">
{session?.user?.name || "User"}
</p>
<p className="text-custom-xs dark:text-gray-400">
{memberSince || "Loading..."}
</p>
</div>
</div>
<div className="p-4 sm:p-7.5 xl:p-9">
<div className="flex flex-wrap xl:flex-nowrap xl:flex-col gap-4">
{menuItems.map((item) => (
<Button
key={item.id}
variant={activeTab === item.id ? "primary" : "secondary"}
size="md"
onClick={() => onTabChange(item.id)}
leftIcon={
<Icon name={item.icon} className="fill-current" size={22} />
}
className="justify-start"
>
{item.label}
</Button>
))}
<Button
variant="ghost"
size="md"
onClick={onLogout}
leftIcon={<Icon name="logout" className="fill-current" size={22} />}
className="justify-start hover:bg-red hover:text-white"
>
Logout
</Button>
</div>
</div>
</div>
</div>
);
}
|