mirror of
https://github.com/LukeHagar/better-auth.git
synced 2025-12-10 04:19:32 +00:00
chore: lint
This commit is contained in:
Bereket Engida
@@ -9,50 +9,50 @@ import { useState } from "react";
|
|||||||
import { MenuIcon, X } from "lucide-react";
|
import { MenuIcon, X } from "lucide-react";
|
||||||
|
|
||||||
export const Navbar = () => {
|
export const Navbar = () => {
|
||||||
return (
|
return (
|
||||||
<nav className="sticky z-40 top-0 flex items-center justify-between bg-background backdrop-blur-md">
|
<nav className="sticky z-40 top-0 flex items-center justify-between bg-background backdrop-blur-md">
|
||||||
<Link
|
<Link
|
||||||
href="/"
|
href="/"
|
||||||
className="md:border-r md:px-5 px-2.5 py-4 text-foreground md:col-span-2 shrink-0 transition-colors md:w-[--fd-sidebar-width]"
|
className="md:border-r md:px-5 px-2.5 py-4 text-foreground md:col-span-2 shrink-0 transition-colors md:w-[--fd-sidebar-width]"
|
||||||
>
|
>
|
||||||
<div className="flex flex-col gap-2 w-full">
|
<div className="flex flex-col gap-2 w-full">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Logo />
|
<Logo />
|
||||||
<p>BETTER-AUTH.</p>
|
<p>BETTER-AUTH.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
<div className="md:col-span-10 flex items-center justify-end sticky top-0 z-30 pb-3 w-full font-geist border-b border-black/10 transition duration-200 ease-in-out md:bg-transparent animate-header-slide-down-fade dark:border-white/10 md:backdrop-blur-md">
|
<div className="md:col-span-10 flex items-center justify-end sticky top-0 z-30 pb-3 w-full font-geist border-b border-black/10 transition duration-200 ease-in-out md:bg-transparent animate-header-slide-down-fade dark:border-white/10 md:backdrop-blur-md">
|
||||||
<ul className="md:flex items-center divide-x w-max border-r hidden shrink-0">
|
<ul className="md:flex items-center divide-x w-max border-r hidden shrink-0">
|
||||||
{navMenu.map((menu, i) => (
|
{navMenu.map((menu, i) => (
|
||||||
<NavLink key={menu.name} href={menu.path}>
|
<NavLink key={menu.name} href={menu.path}>
|
||||||
{menu.name}
|
{menu.name}
|
||||||
</NavLink>
|
</NavLink>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
<ThemeToggle />
|
<ThemeToggle />
|
||||||
<NavbarMobileBtn />
|
<NavbarMobileBtn />
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const navMenu = [
|
export const navMenu = [
|
||||||
{
|
{
|
||||||
name: "helo_",
|
name: "helo_",
|
||||||
path: "/",
|
path: "/",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "docs",
|
name: "docs",
|
||||||
path: "/docs",
|
path: "/docs",
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
name: "changelogs",
|
name: "changelogs",
|
||||||
path: "/changelogs",
|
path: "/changelogs",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "community",
|
name: "community",
|
||||||
path: "https://discord.gg/GYC3W7tZzb",
|
path: "https://discord.gg/GYC3W7tZzb",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|||||||
@@ -3,233 +3,233 @@ import { Menu, Sun, X } from "lucide-react";
|
|||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { Fragment, createContext, useContext, useState } from "react";
|
import { Fragment, createContext, useContext, useState } from "react";
|
||||||
import {
|
import {
|
||||||
Accordion,
|
Accordion,
|
||||||
AccordionContent,
|
AccordionContent,
|
||||||
AccordionItem,
|
AccordionItem,
|
||||||
AccordionTrigger,
|
AccordionTrigger,
|
||||||
} from "@/components/ui/accordion";
|
} from "@/components/ui/accordion";
|
||||||
import { AnimatePresence, FadeIn } from "@/components/ui/fade-in";
|
import { AnimatePresence, FadeIn } from "@/components/ui/fade-in";
|
||||||
import { contents } from "./sidebar-content";
|
import { contents } from "./sidebar-content";
|
||||||
import { MobileThemeToggle, ThemeToggle } from "./theme-toggler";
|
import { MobileThemeToggle, ThemeToggle } from "./theme-toggler";
|
||||||
|
|
||||||
interface NavbarMobileContextProps {
|
interface NavbarMobileContextProps {
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
toggleNavbar: () => void;
|
toggleNavbar: () => void;
|
||||||
isDocsOpen: boolean;
|
isDocsOpen: boolean;
|
||||||
toggleDocsNavbar: () => void;
|
toggleDocsNavbar: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const NavbarContext = createContext<NavbarMobileContextProps | undefined>(
|
const NavbarContext = createContext<NavbarMobileContextProps | undefined>(
|
||||||
undefined
|
undefined,
|
||||||
);
|
);
|
||||||
|
|
||||||
export const NavbarProvider = ({ children }: { children: React.ReactNode }) => {
|
export const NavbarProvider = ({ children }: { children: React.ReactNode }) => {
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
const [isDocsOpen, setIsDocsOpen] = useState(false);
|
const [isDocsOpen, setIsDocsOpen] = useState(false);
|
||||||
|
|
||||||
const toggleNavbar = () => {
|
const toggleNavbar = () => {
|
||||||
setIsOpen((prevIsOpen) => !prevIsOpen);
|
setIsOpen((prevIsOpen) => !prevIsOpen);
|
||||||
};
|
};
|
||||||
const toggleDocsNavbar = () => {
|
const toggleDocsNavbar = () => {
|
||||||
setIsDocsOpen((prevIsOpen) => !prevIsOpen);
|
setIsDocsOpen((prevIsOpen) => !prevIsOpen);
|
||||||
};
|
};
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
return (
|
return (
|
||||||
<NavbarContext.Provider
|
<NavbarContext.Provider
|
||||||
value={{ isOpen, toggleNavbar, isDocsOpen, toggleDocsNavbar }}
|
value={{ isOpen, toggleNavbar, isDocsOpen, toggleDocsNavbar }}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</NavbarContext.Provider>
|
</NavbarContext.Provider>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const useNavbarMobile = (): NavbarMobileContextProps => {
|
export const useNavbarMobile = (): NavbarMobileContextProps => {
|
||||||
const context = useContext(NavbarContext);
|
const context = useContext(NavbarContext);
|
||||||
if (!context) {
|
if (!context) {
|
||||||
throw new Error(
|
throw new Error(
|
||||||
"useNavbarMobile must be used within a NavbarMobileProvider"
|
"useNavbarMobile must be used within a NavbarMobileProvider",
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return context;
|
return context;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const NavbarMobileBtn: React.FC = () => {
|
export const NavbarMobileBtn: React.FC = () => {
|
||||||
const { toggleNavbar } = useNavbarMobile();
|
const { toggleNavbar } = useNavbarMobile();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex pt-2 items-center">
|
<div className="flex pt-2 items-center">
|
||||||
<MobileThemeToggle />
|
<MobileThemeToggle />
|
||||||
<button
|
<button
|
||||||
className="text-muted-foreground overflow-hidden px-2.5 block md:hidden"
|
className="text-muted-foreground overflow-hidden px-2.5 block md:hidden"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
toggleNavbar();
|
toggleNavbar();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Menu />
|
<Menu />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const NavbarMobile = () => {
|
export const NavbarMobile = () => {
|
||||||
const { isOpen, toggleNavbar } = useNavbarMobile();
|
const { isOpen, toggleNavbar } = useNavbarMobile();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fixed top-[50px] left-0 z-30 px-4 mx-auto w-full h-auto backdrop-blur-lg dark:bg-black md:hidden transform-gpu [border:1px_solid_rgba(255,255,255,.1)] [box-shadow:0_-40px_80px_-20px_#8686f01f_inset]">
|
<div className="fixed top-[50px] left-0 z-30 px-4 mx-auto w-full h-auto backdrop-blur-lg dark:bg-black md:hidden transform-gpu [border:1px_solid_rgba(255,255,255,.1)] [box-shadow:0_-40px_80px_-20px_#8686f01f_inset]">
|
||||||
<AnimatePresence>
|
<AnimatePresence>
|
||||||
{isOpen && (
|
{isOpen && (
|
||||||
<FadeIn
|
<FadeIn
|
||||||
fromTopToBottom
|
fromTopToBottom
|
||||||
className="bg-transparent p-5 divide-y overflow-y-auto"
|
className="bg-transparent p-5 divide-y overflow-y-auto"
|
||||||
>
|
>
|
||||||
{navMenu.map((menu, i) => (
|
{navMenu.map((menu, i) => (
|
||||||
<Fragment key={menu.name}>
|
<Fragment key={menu.name}>
|
||||||
{menu.child ? (
|
{menu.child ? (
|
||||||
<Accordion type="single" collapsible>
|
<Accordion type="single" collapsible>
|
||||||
<AccordionItem value={menu.name}>
|
<AccordionItem value={menu.name}>
|
||||||
<AccordionTrigger className="text-2xl font-normal text-foreground">
|
<AccordionTrigger className="text-2xl font-normal text-foreground">
|
||||||
{menu.name}
|
{menu.name}
|
||||||
</AccordionTrigger>
|
</AccordionTrigger>
|
||||||
<AccordionContent className="pl-5 divide-y">
|
<AccordionContent className="pl-5 divide-y">
|
||||||
{menu.child.map((child, j) => (
|
{menu.child.map((child, j) => (
|
||||||
<Link
|
<Link
|
||||||
href={child.path}
|
href={child.path}
|
||||||
key={child.name}
|
key={child.name}
|
||||||
className="block text-xl py-2 first:pt-0 last:pb-0 border-b last:border-0 text-muted-foreground"
|
className="block text-xl py-2 first:pt-0 last:pb-0 border-b last:border-0 text-muted-foreground"
|
||||||
onClick={toggleNavbar}
|
onClick={toggleNavbar}
|
||||||
>
|
>
|
||||||
{child.name}
|
{child.name}
|
||||||
</Link>
|
</Link>
|
||||||
))}
|
))}
|
||||||
</AccordionContent>
|
</AccordionContent>
|
||||||
</AccordionItem>
|
</AccordionItem>
|
||||||
</Accordion>
|
</Accordion>
|
||||||
) : (
|
) : (
|
||||||
<Link
|
<Link
|
||||||
href={menu.path}
|
href={menu.path}
|
||||||
className="block text-2xl py-4 first:pt-0 last:pb-0"
|
className="block text-2xl py-4 first:pt-0 last:pb-0"
|
||||||
onClick={toggleNavbar}
|
onClick={toggleNavbar}
|
||||||
>
|
>
|
||||||
{menu.name}
|
{menu.name}
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
</Fragment>
|
</Fragment>
|
||||||
))}
|
))}
|
||||||
</FadeIn>
|
</FadeIn>
|
||||||
)}
|
)}
|
||||||
</AnimatePresence>
|
</AnimatePresence>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const DocsNavbarMobileBtn: React.FC = () => {
|
export const DocsNavbarMobileBtn: React.FC = () => {
|
||||||
const { toggleDocsNavbar: toggleNavbar } = useNavbarMobile();
|
const { toggleDocsNavbar: toggleNavbar } = useNavbarMobile();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
className="text-muted-foreground ml-auto block md:hidden"
|
className="text-muted-foreground ml-auto block md:hidden"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
toggleNavbar();
|
toggleNavbar();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
width="1.4em"
|
width="1.4em"
|
||||||
height="1.4em"
|
height="1.4em"
|
||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
fillRule="evenodd"
|
fillRule="evenodd"
|
||||||
d="M2.25 6A.75.75 0 0 1 3 5.25h18a.75.75 0 0 1 0 1.5H3A.75.75 0 0 1 2.25 6m0 4A.75.75 0 0 1 3 9.25h18a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75m0 4a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75m0 4a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75"
|
d="M2.25 6A.75.75 0 0 1 3 5.25h18a.75.75 0 0 1 0 1.5H3A.75.75 0 0 1 2.25 6m0 4A.75.75 0 0 1 3 9.25h18a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75m0 4a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75m0 4a.75.75 0 0 1 .75-.75h7a.75.75 0 0 1 0 1.5H3a.75.75 0 0 1-.75-.75"
|
||||||
clipRule="evenodd"
|
clipRule="evenodd"
|
||||||
opacity=".5"
|
opacity=".5"
|
||||||
></path>
|
></path>
|
||||||
<path
|
<path
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
d="M13.43 14.512a.75.75 0 0 1 1.058-.081l3.012 2.581l3.012-2.581a.75.75 0 1 1 .976 1.139l-3.5 3a.75.75 0 0 1-.976 0l-3.5-3a.75.75 0 0 1-.081-1.058"
|
d="M13.43 14.512a.75.75 0 0 1 1.058-.081l3.012 2.581l3.012-2.581a.75.75 0 1 1 .976 1.139l-3.5 3a.75.75 0 0 1-.976 0l-3.5-3a.75.75 0 0 1-.081-1.058"
|
||||||
></path>
|
></path>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const DocsNavBarMobile = () => {
|
export const DocsNavBarMobile = () => {
|
||||||
const { isDocsOpen: isOpen, toggleDocsNavbar: toggleNavbar } =
|
const { isDocsOpen: isOpen, toggleDocsNavbar: toggleNavbar } =
|
||||||
useNavbarMobile();
|
useNavbarMobile();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AnimatePresence>
|
<AnimatePresence>
|
||||||
{isOpen && (
|
{isOpen && (
|
||||||
<FadeIn
|
<FadeIn
|
||||||
fromTopToBottom
|
fromTopToBottom
|
||||||
className="absolute top-[100px] left-0 bg-background h-[calc(100%-57px-27px)] w-full z-[1000] p-5 divide-y overflow-y-auto"
|
className="absolute top-[100px] left-0 bg-background h-[calc(100%-57px-27px)] w-full z-[1000] p-5 divide-y overflow-y-auto"
|
||||||
>
|
>
|
||||||
{contents.map((menu, i) => (
|
{contents.map((menu, i) => (
|
||||||
<Accordion type="single" collapsible key={menu.title}>
|
<Accordion type="single" collapsible key={menu.title}>
|
||||||
<AccordionItem value={menu.title}>
|
<AccordionItem value={menu.title}>
|
||||||
<AccordionTrigger className=" font-normal text-foreground ">
|
<AccordionTrigger className=" font-normal text-foreground ">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
{!!menu.Icon && <menu.Icon className="w-5 h-5" />}
|
{!!menu.Icon && <menu.Icon className="w-5 h-5" />}
|
||||||
{menu.title}
|
{menu.title}
|
||||||
</div>
|
</div>
|
||||||
</AccordionTrigger>
|
</AccordionTrigger>
|
||||||
<AccordionContent className="pl-5 divide-y">
|
<AccordionContent className="pl-5 divide-y">
|
||||||
{menu.list.map((child, j) => (
|
{menu.list.map((child, j) => (
|
||||||
<Link
|
<Link
|
||||||
href={child.href}
|
href={child.href}
|
||||||
key={child.title}
|
key={child.title}
|
||||||
className="block text-sm py-2 first:pt-0 last:pb-0 border-b last:border-0 text-muted-foreground"
|
className="block text-sm py-2 first:pt-0 last:pb-0 border-b last:border-0 text-muted-foreground"
|
||||||
onClick={toggleNavbar}
|
onClick={toggleNavbar}
|
||||||
>
|
>
|
||||||
{child.group ? (
|
{child.group ? (
|
||||||
<div className="flex flex-row gap-2 items-center ">
|
<div className="flex flex-row gap-2 items-center ">
|
||||||
<line className="flex-grow h-px bg-gradient-to-r from-stone-800/90 to-stone-800/60" />
|
<line className="flex-grow h-px bg-gradient-to-r from-stone-800/90 to-stone-800/60" />
|
||||||
<p className="text-sm bg-gradient-to-tr dark:from-gray-100 dark:to-stone-200 bg-clip-text text-transparent from-gray-900 to-stone-900">
|
<p className="text-sm bg-gradient-to-tr dark:from-gray-100 dark:to-stone-200 bg-clip-text text-transparent from-gray-900 to-stone-900">
|
||||||
{child.title}
|
{child.title}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<child.icon />
|
<child.icon />
|
||||||
{child.title}
|
{child.title}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</Link>
|
</Link>
|
||||||
))}
|
))}
|
||||||
</AccordionContent>
|
</AccordionContent>
|
||||||
</AccordionItem>
|
</AccordionItem>
|
||||||
</Accordion>
|
</Accordion>
|
||||||
))}
|
))}
|
||||||
</FadeIn>
|
</FadeIn>
|
||||||
)}
|
)}
|
||||||
</AnimatePresence>
|
</AnimatePresence>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const navMenu: {
|
export const navMenu: {
|
||||||
name: string;
|
name: string;
|
||||||
path: string;
|
path: string;
|
||||||
child?: {
|
child?: {
|
||||||
name: string;
|
name: string;
|
||||||
path: string;
|
path: string;
|
||||||
}[];
|
}[];
|
||||||
}[] = [
|
}[] = [
|
||||||
{
|
{
|
||||||
name: "_helo",
|
name: "_helo",
|
||||||
path: "/",
|
path: "/",
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
name: "_docs",
|
name: "_docs",
|
||||||
path: "/docs",
|
path: "/docs",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "_changelogs",
|
name: "_changelogs",
|
||||||
path: "/changelogs",
|
path: "/changelogs",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "_community",
|
name: "_community",
|
||||||
path: "https://discord.gg/GYC3W7tZzb",
|
path: "https://discord.gg/GYC3W7tZzb",
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|||||||
@@ -5,74 +5,74 @@ import { useTheme } from "next-themes";
|
|||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
import {
|
||||||
DropdownMenu,
|
DropdownMenu,
|
||||||
DropdownMenuContent,
|
DropdownMenuContent,
|
||||||
DropdownMenuItem,
|
DropdownMenuItem,
|
||||||
DropdownMenuTrigger,
|
DropdownMenuTrigger,
|
||||||
} from "@/components/ui/dropdown-menu";
|
} from "@/components/ui/dropdown-menu";
|
||||||
|
|
||||||
export function ThemeToggle() {
|
export function ThemeToggle() {
|
||||||
const { setTheme } = useTheme();
|
const { setTheme } = useTheme();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
className="border-l ring-0 rounded-none h-14 w-14 hidden md:flex shrink-0"
|
className="border-l ring-0 rounded-none h-14 w-14 hidden md:flex shrink-0"
|
||||||
>
|
>
|
||||||
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
||||||
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
||||||
<span className="sr-only">Toggle theme</span>
|
<span className="sr-only">Toggle theme</span>
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
<DropdownMenuContent align="end">
|
<DropdownMenuContent align="end">
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
data-umami-event="theme-toggle-light"
|
data-umami-event="theme-toggle-light"
|
||||||
onClick={() => setTheme("light")}
|
onClick={() => setTheme("light")}
|
||||||
>
|
>
|
||||||
Light
|
Light
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
data-umami-event="theme-toggle-dark"
|
data-umami-event="theme-toggle-dark"
|
||||||
onClick={() => setTheme("dark")}
|
onClick={() => setTheme("dark")}
|
||||||
>
|
>
|
||||||
Dark
|
Dark
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
data-umami-event="theme-toggle-system"
|
data-umami-event="theme-toggle-system"
|
||||||
onClick={() => setTheme("system")}
|
onClick={() => setTheme("system")}
|
||||||
>
|
>
|
||||||
System
|
System
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
export function MobileThemeToggle() {
|
export function MobileThemeToggle() {
|
||||||
const { theme, setTheme } = useTheme();
|
const { theme, setTheme } = useTheme();
|
||||||
return (
|
return (
|
||||||
<div className="">
|
<div className="">
|
||||||
{theme === "dark" ? (
|
{theme === "dark" ? (
|
||||||
<Button
|
<Button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setTheme("light");
|
setTheme("light");
|
||||||
}}
|
}}
|
||||||
variant={"ghost"}
|
variant={"ghost"}
|
||||||
>
|
>
|
||||||
<Sun className="w-4 h-4" />
|
<Sun className="w-4 h-4" />
|
||||||
</Button>
|
</Button>
|
||||||
) : (
|
) : (
|
||||||
<Button
|
<Button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setTheme("dark");
|
setTheme("dark");
|
||||||
}}
|
}}
|
||||||
variant={"ghost"}
|
variant={"ghost"}
|
||||||
>
|
>
|
||||||
<MoonIcon className="w-4 h-4" />
|
<MoonIcon className="w-4 h-4" />
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user