38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import { Calendar, Users, CheckSquare, Plus } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { useContactsStore } from "@/lib/contacts/contacts-store"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
export function RightPanel() {
|
|
const { panelOpen, togglePanel } = useContactsStore()
|
|
|
|
return (
|
|
<aside className="hidden w-10 shrink-0 flex-col items-center gap-2 bg-transparent py-3 sm:flex">
|
|
<Button variant="ghost" size="icon" className="h-9 w-9 text-gray-600 rounded-full">
|
|
<Calendar className="h-4 w-4" />
|
|
</Button>
|
|
<Button variant="ghost" size="icon" className="h-9 w-9 text-gray-600 rounded-full">
|
|
<CheckSquare className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className={cn(
|
|
"h-9 w-9 rounded-full",
|
|
panelOpen ? "bg-blue-100 text-[#1a73e8]" : "text-gray-600"
|
|
)}
|
|
onClick={togglePanel}
|
|
aria-label="Contacts"
|
|
>
|
|
<Users className="h-4 w-4" />
|
|
</Button>
|
|
<div className="flex-1" />
|
|
<Button variant="ghost" size="icon" className="h-9 w-9 text-gray-600 rounded-full">
|
|
<Plus className="h-4 w-4" />
|
|
</Button>
|
|
</aside>
|
|
)
|
|
}
|