107 lines
4.2 KiB
TypeScript
107 lines
4.2 KiB
TypeScript
"use client"
|
|
|
|
import { useState, useRef, useEffect } from "react"
|
|
import { Icon, addCollection } from "@iconify/react"
|
|
import { icons as mdiIcons } from "@iconify-json/mdi"
|
|
import { Pencil } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
addCollection(mdiIcons)
|
|
|
|
const googleApps = [
|
|
{ name: "Compte", icon: "/compte-mark.svg" },
|
|
{ name: "Agenda", icon: "/agenda-mark.svg" },
|
|
{ name: "Photos", icon: "/photos-mark.svg" },
|
|
{ name: "Ultimail", icon: "/brand/ultimail-header-icon.png" },
|
|
{ name: "UltiDrive", icon: "/ultidrive-mark.svg" },
|
|
{ name: "UltiMeet", icon: "/ultimeet-mark.svg" },
|
|
{ name: "Administration", icon: "/admin-mark.svg" },
|
|
{ name: "OpenMaps", icon: "/openstreetmap-mark.svg" },
|
|
{ name: "Mistral", icon: "/mistral-mark.svg" },
|
|
{ name: "Qwant", icon: "/qwant-mark.svg" },
|
|
{ name: "Ground News", icon: "/ground-news-mark.svg" },
|
|
]
|
|
|
|
interface HeaderAccountActionsProps {
|
|
className?: string
|
|
}
|
|
|
|
export function HeaderAccountActions({ className }: HeaderAccountActionsProps) {
|
|
const [appsMenuOpen, setAppsMenuOpen] = useState(false)
|
|
const menuRef = useRef<HTMLDivElement>(null)
|
|
|
|
useEffect(() => {
|
|
function handleClickOutside(event: MouseEvent) {
|
|
if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
|
|
setAppsMenuOpen(false)
|
|
}
|
|
}
|
|
document.addEventListener("mousedown", handleClickOutside)
|
|
return () => document.removeEventListener("mousedown", handleClickOutside)
|
|
}, [])
|
|
|
|
return (
|
|
<div className={cn("flex shrink-0 items-center gap-1", className)}>
|
|
<Button variant="ghost" size="icon" className="hidden text-gray-600 sm:inline-flex" aria-label="Aide">
|
|
<Icon icon="mdi:help-circle-outline" className="size-6 shrink-0" aria-hidden />
|
|
</Button>
|
|
<Button variant="ghost" size="icon" className="text-gray-600" aria-label="Réglages">
|
|
<Icon icon="mdi:cog-outline" className="size-6 shrink-0" aria-hidden />
|
|
</Button>
|
|
|
|
<div className="relative hidden sm:block" ref={menuRef}>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="text-gray-600"
|
|
aria-label="Applications"
|
|
onClick={() => setAppsMenuOpen(!appsMenuOpen)}
|
|
>
|
|
<Icon icon="mdi:view-grid-outline" className="size-6 shrink-0" aria-hidden />
|
|
</Button>
|
|
|
|
{appsMenuOpen && (
|
|
<div className="absolute right-0 top-12 z-50 w-96 rounded-2xl border border-gray-200 bg-white shadow-xl">
|
|
<div className="flex items-center justify-between border-b border-gray-100 p-4">
|
|
<span className="text-lg font-normal text-gray-800">Vos favoris</span>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8 text-gray-600">
|
|
<Pencil className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-1 p-3">
|
|
{googleApps.map((app) => (
|
|
<button
|
|
key={app.name}
|
|
type="button"
|
|
className="flex flex-col items-center gap-2 rounded-lg p-3 transition-colors hover:bg-gray-100"
|
|
>
|
|
<div className="flex h-10 w-10 items-center justify-center">
|
|
<img
|
|
src={app.icon}
|
|
alt={app.name}
|
|
className="h-10 w-10 object-contain"
|
|
onError={(e) => {
|
|
const target = e.target as HTMLImageElement
|
|
target.style.display = "none"
|
|
target.parentElement!.innerHTML = `<div class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-500 font-bold text-white">${app.name[0]}</div>`
|
|
}}
|
|
/>
|
|
</div>
|
|
<span className="w-full text-center text-xs text-gray-700">{app.name}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<Button variant="ghost" size="icon-lg" className="ml-2 size-11 overflow-hidden rounded-full p-0">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-purple-500 text-base font-bold text-white">
|
|
E
|
|
</div>
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|