style : update style

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

No Issue

src/module/home/ui/icon_navbar.tsx

@@ -1,6 +1,6 @@
 "use client"
 import { WARNA } from '@/module/_global';
-import { ActionIcon, Box, Group } from '@mantine/core';
+import { ActionIcon, Box, Group, Indicator, Text } from '@mantine/core';
 import { useRouter } from 'next/navigation';
 import React from 'react';
 import { HiMagnifyingGlass, HiOutlineBell, HiOutlineUser } from 'react-icons/hi2';
@@ -13,9 +13,11 @@ export default function IconNavbar() {
         <ActionIcon onClick={() => router.push('/home?cat=search')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
           <HiMagnifyingGlass size={20} color='white' />
         </ActionIcon>
+        <Indicator inline label={"9"} size={18} color={"red"} offset={3}>
         <ActionIcon onClick={() => router.push('/home?cat=notification')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
-          <HiOutlineBell size={20} color='white' />
+            <HiOutlineBell size={20} color='white' />
         </ActionIcon>
+          </Indicator>
         <ActionIcon onClick={() => router.push('/profile')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
           <HiOutlineUser size={20} color='white' />
         </ActionIcon>

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>