38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
'use client'
|
|
|
|
import {Button} from "@/components/Button";
|
|
import Bell from "@/components/svg/notifications/bell";
|
|
import {useState} from "react";
|
|
|
|
export function Notification() {
|
|
const [notificationIsActive, setNotificationIsActive] = useState<boolean>(false);
|
|
|
|
return (
|
|
/* 'relative' sorgt dafür, dass das absolute Menü hier verankert bleibt */
|
|
<div className="relative inline-block">
|
|
<Button
|
|
className="w-min p-2"
|
|
onClick={() => setNotificationIsActive(!notificationIsActive)}
|
|
>
|
|
<Bell/>
|
|
</Button>
|
|
|
|
{notificationIsActive && <NotificationMenu/>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function NotificationMenu() {
|
|
return (
|
|
/* 'absolute' nimmt das Element aus dem Fluss.
|
|
'right-0' richtet es an der rechten Kante des Buttons aus.
|
|
'z-50' sorgt dafür, dass es über dem Footer/Content liegt.
|
|
*/
|
|
<div
|
|
className="absolute right-0 w-64 bg-white border-2 border-gray-200 transition shadow-lg rounded-md p-4 z-50">
|
|
<p className="text-sm font-semibold text-gray-700">Benachrichtigungen</p>
|
|
<hr className="my-2"/>
|
|
<div className="text-gray-600">Hello World</div>
|
|
</div>
|
|
);
|
|
} |