Huakun Shen b7724a25ee
Upgrade svelte templates to use @kksh/svelte5 (#29)
* chore: add workspace settings in root package.json

* update dependencies

* upgrade: @kksh/svelte to @kksh/svelte5 in two svelte tempaltes

* feat: add fallback for image multiplexer

* ci: remove bun.lockb from root to avoid cloudflare error
2024-11-21 01:57:48 -05:00

98 lines
2.4 KiB
Svelte

<script lang="ts">
import { notification, ui } from "@kksh/api/ui/iframe"
import {
Button,
Command,
// CommandFooter,
ModeWatcher,
Separator,
ThemeWrapper,
updateTheme
} from "@kksh/svelte5"
import ThemeCustomizer from "$lib/components/ThemeCustomizer.svelte"
import {
Calculator,
Calendar,
CreditCard,
Settings,
SettingsIcon,
Smile,
User
} from "lucide-svelte"
import { onMount } from "svelte"
onMount(() => {
ui.registerDragRegion()
ui.getTheme().then((theme) => {
updateTheme(theme)
})
notification.sendNotification("Hello from template-ext-svelte")
})
let highlighted = ""
$: {
console.log("highlighted:", highlighted)
}
let searchTerm = ""
$: {
console.log("search term:", searchTerm)
}
</script>
<ModeWatcher />
<ThemeWrapper>
<Command.Root class="h-screen rounded-lg border shadow-md" bind:value={highlighted}>
<Command.Input placeholder="Type a command or search..." autofocus bind:value={searchTerm} />
<div class="grow">
<Command.List>
<Command.Empty>No results found.</Command.Empty>
<Command.Group heading="Suggestions">
<Command.Item>
<Calendar class="mr-2 h-4 w-4" />
<span>Calendar</span>
</Command.Item>
<Command.Item>
<Smile class="mr-2 h-4 w-4" />
<span>Search Emoji</span>
</Command.Item>
<Command.Item>
<Calculator class="mr-2 h-4 w-4" />
<span>Calculator</span>
</Command.Item>
</Command.Group>
<Command.Separator />
<Command.Group heading="Settings">
<Command.Item>
<User class="mr-2 h-4 w-4" />
<span>Profile</span>
<Command.Shortcut>⌘P</Command.Shortcut>
</Command.Item>
<Command.Item value="billllling">
<CreditCard class="mr-2 h-4 w-4" />
<span>Billing</span>
<Command.Shortcut>⌘B</Command.Shortcut>
</Command.Item>
<Command.Item>
<Settings class="mr-2 h-4 w-4" />
<span>Settings</span>
<Command.Shortcut>⌘S</Command.Shortcut>
</Command.Item>
</Command.Group>
</Command.List>
</div>
<div class="flex items-center justify-between">
<SettingsIcon class="ml-2 h-4 w-4" />
<div class="flex items-center space-x-2">
<Button variant="ghost" size="sm">
Open Application
<kbd class="ml-1"></kbd>
</Button>
<Separator orientation="vertical" />
<ThemeCustomizer />
</div>
</div>
</Command.Root>
</ThemeWrapper>