New CPM with Laravel 12 and React

resources/js/hooks/use-appearance.tsx

@@ -0,0 +1,73 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export type Appearance = 'light' | 'dark' | 'system';
+
+const prefersDark = () => {
+    if (typeof window === 'undefined') {
+        return false;
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+};
+
+const setCookie = (name: string, value: string, days = 365) => {
+    if (typeof document === 'undefined') {
+        return;
+    }
+
+    const maxAge = days * 24 * 60 * 60;
+    document.cookie = `${name}=${value};path=/;max-age=${maxAge};SameSite=Lax`;
+};
+
+const applyTheme = (appearance: Appearance) => {
+    const isDark = appearance === 'dark' || (appearance === 'system' && prefersDark());
+
+    document.documentElement.classList.toggle('dark', isDark);
+};
+
+const mediaQuery = () => {
+    if (typeof window === 'undefined') {
+        return null;
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)');
+};
+
+const handleSystemThemeChange = () => {
+    const currentAppearance = localStorage.getItem('appearance') as Appearance;
+    applyTheme(currentAppearance || 'system');
+};
+
+export function initializeTheme() {
+    const savedAppearance = (localStorage.getItem('appearance') as Appearance) || 'system';
+
+    applyTheme(savedAppearance);
+
+    // Add the event listener for system theme changes...
+    mediaQuery()?.addEventListener('change', handleSystemThemeChange);
+}
+
+export function useAppearance() {
+    const [appearance, setAppearance] = useState<Appearance>('system');
+
+    const updateAppearance = useCallback((mode: Appearance) => {
+        setAppearance(mode);
+
+        // Store in localStorage for client-side persistence...
+        localStorage.setItem('appearance', mode);
+
+        // Store in cookie for SSR...
+        setCookie('appearance', mode);
+
+        applyTheme(mode);
+    }, []);
+
+    useEffect(() => {
+        const savedAppearance = localStorage.getItem('appearance') as Appearance | null;
+        updateAppearance(savedAppearance || 'system');
+
+        return () => mediaQuery()?.removeEventListener('change', handleSystemThemeChange);
+    }, [updateAppearance]);
+
+    return { appearance, updateAppearance } as const;
+}

resources/js/hooks/use-initials.tsx

@@ -0,0 +1,17 @@
+import { useCallback } from 'react';
+
+export function useInitials() {
+    const getInitials = useCallback((fullName: string): string => {
+        const names = fullName.trim().split(' ');
+
+        if (names.length === 0) return '';
+        if (names.length === 1) return names[0].charAt(0).toUpperCase();
+
+        const firstInitial = names[0].charAt(0);
+        const lastInitial = names[names.length - 1].charAt(0);
+
+        return `${firstInitial}${lastInitial}`.toUpperCase();
+    }, []);
+
+    return getInitials;
+}

resources/js/hooks/use-mobile-navigation.ts

@@ -0,0 +1,10 @@
+import { useCallback } from 'react';
+
+export function useMobileNavigation() {
+    const cleanup = useCallback(() => {
+        // Remove pointer-events style from body...
+        document.body.style.removeProperty('pointer-events');
+    }, []);
+
+    return cleanup;
+}

resources/js/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

resources/js/hooks/use-mobile.tsx

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+    const [isMobile, setIsMobile] = useState<boolean>();
+
+    useEffect(() => {
+        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+
+        const onChange = () => {
+            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        };
+
+        mql.addEventListener('change', onChange);
+        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+
+        return () => mql.removeEventListener('change', onChange);
+    }, []);
+
+    return !!isMobile;
+}