Finish Project

src/components/Notification/Notification.tsx

@@ -0,0 +1,38 @@
+'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>
+    );
+}