mailstrike/components/Sidebar.tsx

52 lines
1.3 KiB
TypeScript
Raw Normal View History

import {
Sidebar as ScnSidebar,
SidebarHeader,
SidebarContent,
SidebarGroup,
SidebarGroupLabel,
SidebarGroupContent,
SidebarMenu,
SidebarMenuItem,
SidebarMenuButton,
} from "@/components/ui/sidebar"
import { TbMail, TbLayoutDashboard } from "react-icons/tb"
const items = [
{
title: "Dashboard",
url: "#",
icon: TbLayoutDashboard,
},
]
export default function Sidebar() {
return (
<ScnSidebar>
<SidebarHeader>
<div className="flex justify-center items-center mt-4">
<TbMail size={24} className="mr-2" />
<h1 className="text-2xl font-bold text-gray-800">MailStrike</h1>
</div>
</SidebarHeader>
<SidebarContent>
<SidebarGroup>
<SidebarGroupLabel>System</SidebarGroupLabel>
<SidebarGroupContent>
<SidebarMenu>
{items.map((item) => (
<SidebarMenuItem key={item.title}>
<SidebarMenuButton asChild>
<a href={item.url}>
<item.icon />
<span>{item.title}</span>
</a>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
</ScnSidebar>
)
}