style : update style

Deskripsi:
- add package
- update layout
- update home
- update yarn.lock

No Issue

src/module/home/ui/view_home.tsx

@@ -1,6 +1,7 @@
-import { LayoutNavbarHome } from '@/module/_global';
-import { Box, Group, Stack, Text } from '@mantine/core';
-import React from 'react';
+"use client"
+import { LayoutNavbarHome, WARNA } from '@/module/_global';
+import { Box, Group, Notification, Stack, Text } from '@mantine/core';
+import React, { useState } from 'react';
 import Carosole from './carosole';
 import Features from './features';
 import IconNavbar from './icon_navbar';
@@ -10,9 +11,34 @@ import ListDiscussion from './list_discussion';
 import ListEventHome from './list_event';
 import ChartProgressHome from './chart_progress_tugas';
 import ChartDocumentHome from './chart_document';
+import { useShallowEffect } from '@mantine/hooks';
+import { notifications, Notifications } from '@mantine/notifications';
+import { IoNotifications } from 'react-icons/io5';
+import { ImCheckboxUnchecked } from 'react-icons/im';
 
 
 export default function ViewHome() {
+  const [isNotif, setIsNotif] = useState(true);
+
+  useShallowEffect(() => {
+    if (isNotif) {
+      notifications.show({
+        color: WARNA.biruTua,
+        title: <Text lineClamp={1}>Pengumuman Upacara bendera Upacara bendera Upacara bendera Upacara bendera</Text>,
+        message: <Text lineClamp={1}>Upacara bendera Upacara bendera Upacara bendera Upacara bendera Upacara bendera</Text>,
+        icon: <IoNotifications/>,
+        loading: false,
+        autoClose: 5000,
+        position: "top-center",
+        radius: 'lg',
+        bg: "white",
+        style: {
+          border: `1px solid #0A8072FF`,
+        },
+        onClose: () => setIsNotif(false)
+      });
+    }
+  }, [isNotif]);
   return (
     <>
       <LayoutNavbarHome>