mirror of
https://github.com/temetro/temetro.git
synced 2026-08-31 12:58:08 +00:00
Khalid Abdi
98c5341604
- MenuGroupLabel must live inside a MenuGroup (Base UI context) — wrap the label in nav-user, team-switcher, and nav-notifications. Fixes the 'MenuGroupContext is missing' runtime error. - Patient form/detail dialogs: COSS DialogPopup has no inner padding; move the body into DialogPanel (form as 'contents') so fields get p-6 instead of being flush to the edges. - Settings 'Delete' button used the default variant + bg override, keeping a near-white border-primary in dark mode. Use variant='destructive'. - Auth forms: COSS Field is items-start (no stretch). Make the submit button and the password-row/grid w-full, and underline the bottom sign-in/up link. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
59 lines
1.7 KiB
TypeScript
59 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Menu,
|
|
MenuGroup,
|
|
MenuGroupLabel,
|
|
MenuItem,
|
|
MenuPopup,
|
|
MenuSeparator,
|
|
MenuTrigger,
|
|
} from "@/components/ui/menu";
|
|
import { BellIcon } from "lucide-react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
type Notification = {
|
|
id: string;
|
|
avatar: string;
|
|
fallback: string;
|
|
text: string;
|
|
time: string;
|
|
};
|
|
|
|
export function NotificationsPopover({
|
|
notifications,
|
|
}: {
|
|
notifications: Notification[];
|
|
}) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<Menu>
|
|
<MenuTrigger render={<Button variant="ghost" size="icon" className="rounded-full" aria-label="Open notifications" />}><BellIcon className="size-5" /></MenuTrigger>
|
|
<MenuPopup side="right" className="w-80 my-6">
|
|
<MenuGroup>
|
|
<MenuGroupLabel>{t("nav.notifications")}</MenuGroupLabel>
|
|
</MenuGroup>
|
|
<MenuSeparator />
|
|
{notifications.map(({ id, avatar, fallback, text, time }) => (
|
|
<MenuItem key={id} className="flex items-start gap-3">
|
|
<Avatar className="size-8">
|
|
<AvatarImage src={avatar} alt="Avatar" />
|
|
<AvatarFallback>{fallback}</AvatarFallback>
|
|
</Avatar>
|
|
<div className="flex flex-col">
|
|
<span className="text-sm font-medium">{text}</span>
|
|
<span className="text-xs text-muted-foreground">{time}</span>
|
|
</div>
|
|
</MenuItem>
|
|
))}
|
|
<MenuSeparator />
|
|
<MenuItem className="justify-center text-sm text-muted-foreground hover:text-primary">
|
|
{t("nav.viewAllNotifications")}
|
|
</MenuItem>
|
|
</MenuPopup>
|
|
</Menu>
|
|
);
|
|
}
|