126 lines
3.8 KiB
TypeScript
126 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Home, LogOut } from "lucide-react";
|
|
import {
|
|
Popover,
|
|
PopoverTrigger,
|
|
PopoverContent,
|
|
} from "@/components/ui/popover";
|
|
import { usePathname } from "next/navigation";
|
|
import Link from "next/link";
|
|
|
|
interface UserData {
|
|
user_metadata: {
|
|
full_name: string;
|
|
};
|
|
app_metadata: {
|
|
user_role: string;
|
|
};
|
|
email: string;
|
|
}
|
|
|
|
interface Props {
|
|
userData: UserData;
|
|
sidebarCollapsed: boolean;
|
|
handleLogout: () => void;
|
|
isActive: boolean;
|
|
}
|
|
|
|
export default function SidebarUserSection({
|
|
userData,
|
|
sidebarCollapsed,
|
|
handleLogout,
|
|
isActive,
|
|
}: Props) {
|
|
const pathname = usePathname();
|
|
const menuItems: any[] = [
|
|
{ href: "/patient/schedule", icon: Home, label: "Agendar Consulta" },
|
|
{ href: "/patient/appointments", icon: Home, label: "Minhas Consultas" },
|
|
{ href: "/patient/reports", icon: Home, label: "Meus Laudos" },
|
|
{ href: "/patient/profile", icon: Home, label: "Meus Dados" },
|
|
]
|
|
return (
|
|
<div className="border-t p-4 mt-auto">
|
|
{/* POPUP DE INFORMAÇÕES DO USUÁRIO */}
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<div
|
|
className={`flex items-center space-x-3 mb-4 p-2 rounded-md transition-colors ${
|
|
isActive
|
|
? "cursor-pointer hover:bg-gray-100"
|
|
: "cursor-default pointer-events-none"
|
|
}`}>
|
|
<Avatar>
|
|
<AvatarImage src="/placeholder.svg?height=40&width=40" />
|
|
<AvatarFallback>
|
|
{userData.user_metadata.full_name
|
|
.split(" ")
|
|
.map((n) => n[0])
|
|
.join("")}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
|
|
{!sidebarCollapsed && (
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-gray-900 truncate">
|
|
{userData.user_metadata.full_name}
|
|
</p>
|
|
<p className="text-xs text-gray-500 truncate">
|
|
{userData.app_metadata.user_role}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</PopoverTrigger>
|
|
|
|
{/* Card flutuante */}
|
|
<PopoverContent
|
|
align="center"
|
|
side="top"
|
|
className="w-64 p-4 shadow-lg border bg-white"
|
|
>
|
|
<nav>
|
|
{menuItems.map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive = pathname === item.href;
|
|
return (
|
|
<Link key={item.label} href={item.href}>
|
|
<div
|
|
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
|
|
isActive
|
|
? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
|
|
: "text-gray-600 hover:bg-gray-50"
|
|
}`}
|
|
>
|
|
<Icon className="w-5 h-5 flex-shrink-0" />
|
|
{!sidebarCollapsed && (
|
|
<span className="font-medium">{item.label}</span>
|
|
)}
|
|
</div>
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
</PopoverContent>
|
|
</Popover>
|
|
|
|
{/* Botão de sair */}
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
className={
|
|
sidebarCollapsed
|
|
? "w-full bg-transparent flex justify-center items-center p-2"
|
|
: "w-full bg-transparent"
|
|
}
|
|
onClick={handleLogout}
|
|
>
|
|
<LogOut className={sidebarCollapsed ? "h-5 w-5" : "mr-2 h-4 w-4"} />
|
|
{!sidebarCollapsed && "Sair"}
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|