import { themeChange } from 'theme-change' import React, { useEffect, useState } from 'react' import { useSelector, useDispatch } from 'react-redux' import BellIcon from '@heroicons/react/24/outline/BellIcon' import Bars3Icon from '@heroicons/react/24/outline/Bars3Icon' import MoonIcon from '@heroicons/react/24/outline/MoonIcon' import SunIcon from '@heroicons/react/24/outline/SunIcon' import { openRightDrawer } from './features/common/rightDrawerSlice' import { RIGHT_DRAWER_TYPES } from '../../../public/utils/globalConstantUtil' import { Link } from '@inertiajs/react' import { useForm, usePage } from '@inertiajs/react' function Header() { const dispatch = useDispatch() const { noOfNotifications, pageTitle } = useSelector(state => state.header) const [theme, setTheme] = useState(localStorage.getItem("theme") || (window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light") ); const { auth } = usePage().props useEffect(() => { themeChange(false); document.documentElement.setAttribute("data-theme", theme); localStorage.setItem("theme", theme); }, [theme]); const toggleTheme = () => { setTheme(prevTheme => prevTheme === "dark" ? "light" : "dark"); } // const openNotification = () => { // dispatch(openRightDrawer({ header: "Notifications", bodyType: RIGHT_DRAWER_TYPES.NOTIFICATION })) // } const { post } = useForm() const logoutUser = (e) => { e.preventDefault() post('/logout') } return (