gohorsejobs/frontend/src/components/company-sidebar.tsx

123 lines
3.5 KiB
TypeScript

"use client";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
LayoutDashboard,
Briefcase,
Users,
MessageSquare,
Settings,
Building2,
BarChart3,
Plus,
Zap,
} from "lucide-react";
import Link from "next/link";
import { usePathname } from "next/navigation";
interface CompanySidebarProps {
className?: string;
}
export function CompanySidebar({ className }: CompanySidebarProps) {
const pathname = usePathname();
const routes = [
{
label: "Dashboard",
icon: LayoutDashboard,
href: "/dashboard/company",
active: pathname === "/dashboard/company",
},
{
label: "My jobs",
icon: Briefcase,
href: "/dashboard/company/jobs",
active: pathname?.startsWith("/dashboard/company/jobs"),
},
{
label: "Applications",
icon: Users,
href: "/dashboard/company/applications",
active: pathname?.startsWith("/dashboard/company/applications"),
},
{
label: "Messages",
icon: MessageSquare,
href: "/dashboard/company/messages",
active: pathname?.startsWith("/dashboard/company/messages"),
},
{
label: "Reports",
icon: BarChart3,
href: "/dashboard/company/reports",
active: pathname?.startsWith("/dashboard/company/reports"),
},
{
label: "Company profile",
icon: Building2,
href: "/dashboard/company/profile",
active: pathname?.startsWith("/dashboard/company/profile"),
},
{
label: "Settings",
icon: Settings,
href: "/dashboard/company/settings",
active: pathname?.startsWith("/dashboard/company/settings"),
},
{
label: "Services (Gigs)",
icon: Zap,
href: "/dashboard/company/services",
active: pathname?.startsWith("/dashboard/company/services"),
},
];
return (
<div className={cn("pb-12 min-h-screen border-r bg-muted/10", className)}>
<div className="space-y-4 py-4">
<div className="px-3 py-2">
<div className="flex items-center gap-3 mb-6 px-3">
<Avatar className="h-10 w-10">
<AvatarImage src="" />
<AvatarFallback className="bg-primary/10 text-primary">
<Building2 className="h-5 w-5" />
</AvatarFallback>
</Avatar>
<div className="flex-1 min-w-0">
<h2 className="text-lg font-semibold truncate">TechCorp</h2>
<p className="text-xs text-muted-foreground truncate">Company</p>
</div>
</div>
<Link href="/dashboard/company/jobs/new">
<Button className="w-full mb-4" size="lg">
<Plus className="h-4 w-4 mr-2" />
New job
</Button>
</Link>
<div className="space-y-1">
{routes.map((route) => (
<Link key={route.href} href={route.href}>
<Button
variant={route.active ? "secondary" : "ghost"}
className={cn(
"w-full justify-start",
route.active && "bg-secondary"
)}
>
<route.icon className="mr-2 h-4 w-4" />
{route.label}
</Button>
</Link>
))}
</div>
</div>
</div>
</div>
);
}