130 lines
4.1 KiB
JavaScript
130 lines
4.1 KiB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
|
|
import { Head } from "@inertiajs/react";
|
|
import { useState, useCallback, useEffect } from "react";
|
|
import { c as cn } from "./index-CY6fYws-.js";
|
|
import { Sun } from "lucide-react";
|
|
import { e as edit, S as SettingsLayout, H as HeadingSmall } from "./layout-BQI5MpcL.js";
|
|
import { A as AppLayout } from "./app-layout-BFyUFda2.js";
|
|
import "@radix-ui/react-slot";
|
|
import "class-variance-authority";
|
|
import "clsx";
|
|
import "tailwind-merge";
|
|
import "@radix-ui/react-separator";
|
|
import "./index-BuzAnds1.js";
|
|
import "./index-BRhO3_4E.js";
|
|
import "./index-BHwjGIZD.js";
|
|
import "./sheet-Bq2cyJmx.js";
|
|
import "@radix-ui/react-dialog";
|
|
import "@radix-ui/react-tooltip";
|
|
import "@radix-ui/react-dropdown-menu";
|
|
import "@radix-ui/react-avatar";
|
|
import "./app-logo-icon-kpljnLMz.js";
|
|
const prefersDark = () => {
|
|
if (typeof window === "undefined") {
|
|
return false;
|
|
}
|
|
return window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
};
|
|
const setCookie = (name, value, 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) => {
|
|
const isDark = appearance === "dark" || appearance === "system" && prefersDark();
|
|
document.documentElement.classList.toggle("dark", isDark);
|
|
document.documentElement.style.colorScheme = isDark ? "dark" : "light";
|
|
};
|
|
const mediaQuery = () => {
|
|
if (typeof window === "undefined") {
|
|
return null;
|
|
}
|
|
return window.matchMedia("(prefers-color-scheme: dark)");
|
|
};
|
|
const handleSystemThemeChange = () => {
|
|
const currentAppearance = localStorage.getItem("appearance");
|
|
applyTheme(currentAppearance || "system");
|
|
};
|
|
function useAppearance() {
|
|
const [appearance, setAppearance] = useState("light");
|
|
const updateAppearance = useCallback((mode) => {
|
|
setAppearance(mode);
|
|
localStorage.setItem("appearance", mode);
|
|
setCookie("appearance", mode);
|
|
applyTheme(mode);
|
|
}, []);
|
|
useEffect(() => {
|
|
const savedAppearance = localStorage.getItem(
|
|
"appearance"
|
|
);
|
|
updateAppearance(savedAppearance || "light");
|
|
return () => mediaQuery()?.removeEventListener(
|
|
"change",
|
|
handleSystemThemeChange
|
|
);
|
|
}, [updateAppearance]);
|
|
return { appearance, updateAppearance };
|
|
}
|
|
function AppearanceToggleTab({
|
|
className = "",
|
|
...props
|
|
}) {
|
|
const { appearance, updateAppearance } = useAppearance();
|
|
const tabs = [
|
|
{ value: "light", icon: Sun, label: "Light" }
|
|
// { value: 'dark', icon: Moon, label: 'Dark' },
|
|
// { value: 'system', icon: Monitor, label: 'System' },
|
|
];
|
|
return /* @__PURE__ */ jsx(
|
|
"div",
|
|
{
|
|
className: cn(
|
|
"inline-flex gap-1 rounded-lg bg-neutral-100 p-1 dark:bg-neutral-800",
|
|
className
|
|
),
|
|
...props,
|
|
children: tabs.map(({ value, icon: Icon, label }) => /* @__PURE__ */ jsxs(
|
|
"button",
|
|
{
|
|
onClick: () => updateAppearance(value),
|
|
className: cn(
|
|
"flex items-center rounded-md px-3.5 py-1.5 transition-colors",
|
|
appearance === value ? "bg-white shadow-xs dark:bg-neutral-700 dark:text-neutral-100" : "text-neutral-500 hover:bg-neutral-200/60 hover:text-black dark:text-neutral-400 dark:hover:bg-neutral-700/60"
|
|
),
|
|
children: [
|
|
/* @__PURE__ */ jsx(Icon, { className: "-ml-1 h-4 w-4" }),
|
|
/* @__PURE__ */ jsx("span", { className: "ml-1.5 text-sm", children: label })
|
|
]
|
|
},
|
|
value
|
|
))
|
|
}
|
|
);
|
|
}
|
|
const breadcrumbs = [
|
|
{
|
|
title: "Appearance settings",
|
|
href: edit().url
|
|
}
|
|
];
|
|
function Appearance() {
|
|
return /* @__PURE__ */ jsxs(AppLayout, { breadcrumbs, children: [
|
|
/* @__PURE__ */ jsx(Head, { title: "Appearance settings" }),
|
|
/* @__PURE__ */ jsx(SettingsLayout, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
|
|
/* @__PURE__ */ jsx(
|
|
HeadingSmall,
|
|
{
|
|
title: "Appearance settings",
|
|
description: "Update your account's appearance settings"
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsx(AppearanceToggleTab, {})
|
|
] }) })
|
|
] });
|
|
}
|
|
export {
|
|
Appearance as default
|
|
};
|