teidesu/mtcute-repl
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Theme switcher

Browse source
This commit is contained in:
Полина 2025-01-18 07:56:58 +03:00
parent fddb93dff9
commit cb9aa57e64
2 changed files with 76 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/repl/src/App.tsx
View file

@ -33,12 +33,13 @@ export function App() {
class="invisible size-0"
src={import.meta.env.VITE_IFRAME_URL}
/>
<nav class="relative flex h-auto w-full shrink-0 flex-row items-center overflow-hidden px-4 py-2">
<nav class="relative flex h-auto w-full shrink-0 flex-row items-center justify-between overflow-hidden px-4 py-2">
<h1 class="font-mono text-base">
@mtcute/
<b>playground</b>
</h1>
<div class="flex items-center gap-1">
<NavbarMenu
onShowAccounts={() => {
setShowSettings(true)
@ -48,6 +49,7 @@ export function App() {
setShowSettings(true)
}}
/>
</div>
</nav>
<div class="h-px shrink-0 bg-border" />
<Show

71
packages/repl/src/components/nav/NavbarMenu.tsx
View file

@ -1,7 +1,9 @@
import type { ConfigColorMode, MaybeConfigColorMode } from '@kobalte/core'
import type { DropdownMenuTriggerProps } from '@kobalte/core/dropdown-menu'
import { LucideCheck, LucideChevronDown, LucideExternalLink, LucideLogIn, LucideUsers } from 'lucide-solid'
import { useColorMode } from '@kobalte/core'
import { LucideCheck, LucideChevronRight, LucideExternalLink, LucideLaptop, LucideLogIn, LucideMoon, LucideSun, LucideUsers } from 'lucide-solid'
import { SiGithub } from 'solid-icons/si'
import { For, Show } from 'solid-js'
import { createSignal, For, Show } from 'solid-js'
import { Button } from '../../lib/components/ui/button.tsx'
import {
DropdownMenu,
@ -10,6 +12,9 @@ import {
DropdownMenuGroupLabel,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from '../../lib/components/ui/dropdown-menu.tsx'
import { cn } from '../../lib/utils.ts'
@ -21,9 +26,17 @@ export function NavbarMenu(props: {
onShowAccounts: () => void
onShowSettings: () => void
}) {
const { setColorMode } = useColorMode()
const [localColorMode, setLocalColorMode] = createSignal(localStorage.getItem('kb-color-mode') as MaybeConfigColorMode)
const activeAccount = useStore($activeAccount)
const accounts = useStore($accounts)
// See: https://github.com/kobaltedev/kobalte/issues/543
function updateColorMode(mode: ConfigColorMode) {
setLocalColorMode(mode)
setColorMode(mode)
}
return (
<Show
when={activeAccount() != null}
@ -31,7 +44,7 @@ export function NavbarMenu(props: {
<Button
variant="ghost"
size="icon"
class="ml-auto w-auto px-2"
class="w-auto px-2"
onClick={props.onShowAccounts}
>
<LucideLogIn class="mr-2 size-4 shrink-0" />
@ -43,15 +56,14 @@ export function NavbarMenu(props: {
<DropdownMenuTrigger
as={(props: DropdownMenuTriggerProps) => (
<Button
class="z-10 ml-auto px-2"
class="px-3"
variant="ghost"
{...props}
>
<AccountAvatar class="size-6" account={activeAccount()!} />
<span class="ml-2 max-w-[120px] truncate">
<span class="mr-3 max-w-[120px] truncate">
{activeAccount()!.name}
</span>
<LucideChevronDown class="ml-2 size-4" />
<AccountAvatar class="size-6" account={activeAccount()!} />
</Button>
)}
/>
@ -87,6 +99,51 @@ export function NavbarMenu(props: {
<LucideUsers class="mr-2 size-4" />
Manage accounts
</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger class="flex items-center justify-between">
<div class="flex flex-row items-center">
<LucideSun class="mr-2 size-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<LucideMoon class="absolute mr-2 size-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
Theme
</div>
<LucideChevronRight class="size-4" />
</DropdownMenuSubTrigger>
<DropdownMenuSubContent class="w-[128px]">
<DropdownMenuItem onSelect={() => updateColorMode('light')}>
<div class="flex w-full items-center justify-between">
<div class="flex flex-row items-center">
<LucideSun class="mr-2 size-4" />
<span>Light</span>
</div>
<div>
<LucideCheck class={`ml-auto size-4 ${localColorMode() !== 'light' ? 'hidden' : ''}`} />
</div>
</div>
</DropdownMenuItem>
<DropdownMenuItem onSelect={() => updateColorMode('dark')}>
<div class="flex w-full items-center justify-between">
<div class="flex flex-row items-center">
<LucideMoon class="mr-2 size-4" />
<span>Dark</span>
</div>
<div>
<LucideCheck class={`ml-auto size-4 ${localColorMode() !== 'dark' ? 'hidden' : ''}`} />
</div>
</div>
</DropdownMenuItem>
<DropdownMenuItem onSelect={() => updateColorMode('system')}>
<div class="flex w-full items-center justify-between">
<div class="flex flex-row items-center">
<LucideLaptop class="mr-2 size-4" />
<span>System</span>
</div>
<div>
<LucideCheck class={`ml-auto size-4 ${localColorMode() !== 'system' ? 'hidden' : ''}`} />
</div>
</div>
</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuSub>
<DropdownMenuItem
as="a"
class="cursor-pointer"