diff --git a/package.json b/package.json index 8ce3ce0..2516225 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@mantine/form": "^7.11.0", "@mantine/hooks": "^7.11.0", "@mantine/modals": "^7.11.0", - "@mantine/notifications": "^7.11.0", + "@mantine/notifications": "^7.12.2", "@mantine/nprogress": "^7.11.0", "@mantine/spotlight": "^7.11.0", "@mantine/tiptap": "^7.11.0", diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 79c6a58..04459c5 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -11,6 +11,8 @@ import { Lato } from "next/font/google"; import '@mantine/carousel/styles.css'; import { Toaster } from 'react-hot-toast'; import '@mantine/dates/styles.css'; +import '@mantine/notifications/styles.css'; +import { Notifications } from '@mantine/notifications' export const metadata = { title: "SISTEM DESA MANDIRI", @@ -35,6 +37,7 @@ export default function RootLayout({ + diff --git a/src/module/home/ui/icon_navbar.tsx b/src/module/home/ui/icon_navbar.tsx index 82c5c6d..4bac861 100644 --- a/src/module/home/ui/icon_navbar.tsx +++ b/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() { router.push('/home?cat=search')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings"> + router.push('/home?cat=notification')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings"> - + + router.push('/profile')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings"> diff --git a/src/module/home/ui/view_home.tsx b/src/module/home/ui/view_home.tsx index 7fb4c93..c547f23 100644 --- a/src/module/home/ui/view_home.tsx +++ b/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: Pengumuman Upacara bendera Upacara bendera Upacara bendera Upacara bendera, + message: Upacara bendera Upacara bendera Upacara bendera Upacara bendera Upacara bendera, + icon: , + loading: false, + autoClose: 5000, + position: "top-center", + radius: 'lg', + bg: "white", + style: { + border: `1px solid #0A8072FF`, + }, + onClose: () => setIsNotif(false) + }); + } + }, [isNotif]); return ( <> diff --git a/yarn.lock b/yarn.lock index 5e5d4d5..7b66708 100644 --- a/yarn.lock +++ b/yarn.lock @@ -232,12 +232,12 @@ resolved "https://registry.yarnpkg.com/@mantine/modals/-/modals-7.11.1.tgz#6759e8422f84acf63d4e32a3376bb06050efa870" integrity sha512-SDHhpt7O+Y8rTW5RaXFqIIjuD87efUqhC5kxqLyRsuivQ+tk4gMY37R5gR8o0yC6vifKBzjjYVFeeGTLocRTBg== -"@mantine/notifications@^7.11.0": - version "7.11.1" - resolved "https://registry.yarnpkg.com/@mantine/notifications/-/notifications-7.11.1.tgz#27eae093259b438bc9ffd26a0c87a498176e1372" - integrity sha512-4MpuePstpWvCwiEX75oUAdxp3SXWsiq0+fd4zb5YMu+CaqiaDbUIOupEpi/uCez3lYhY0ojHyjNgYsqZ7cy1Fg== +"@mantine/notifications@^7.12.2": + version "7.12.2" + resolved "https://registry.yarnpkg.com/@mantine/notifications/-/notifications-7.12.2.tgz#531a6a3f23adc579b0a8f322ccf42b1789327698" + integrity sha512-gTvLHkoAZ42v5bZxibP9A50djp5ndEwumVhHSa7mxQ8oSS23tt3It/6hOqH7M+9kHY0a8s+viMiflUzTByA9qg== dependencies: - "@mantine/store" "7.11.1" + "@mantine/store" "7.12.2" react-transition-group "4.4.5" "@mantine/nprogress@^7.11.0": @@ -259,6 +259,11 @@ resolved "https://registry.yarnpkg.com/@mantine/store/-/store-7.11.1.tgz#3e833cffacbc964cb5fe71707c6dafdbf4f4c55e" integrity sha512-5xOompA7pADDvYlw6KEr0YIr95bdFI0W/KZizi8E/BKOLVUpku1UvqcClodq4U0Xjz5eZt/Jf3gEV9lyJbt8Zw== +"@mantine/store@7.12.2": + version "7.12.2" + resolved "https://registry.yarnpkg.com/@mantine/store/-/store-7.12.2.tgz#da576a63d860d44525bd18c9dd3977b6d2840011" + integrity sha512-NqL31sO/KcAETEWP/CiXrQOQNoE4168vZsxyXacQHGBueVMJa64WIDQtKLHrCnFRMws3vsXF02/OO4bH4XGcMQ== + "@mantine/tiptap@^7.11.0": version "7.11.1" resolved "https://registry.yarnpkg.com/@mantine/tiptap/-/tiptap-7.11.1.tgz#faff7bdc369457c9c8cf9c690b97db234e94c1d9"