diff options
| author | Bobby <[email protected]> | 2026-04-22 08:10:30 +0530 |
|---|---|---|
| committer | Bobby <[email protected]> | 2026-04-22 08:10:30 +0530 |
| commit | 0bb36660ec4bceeb4bd9b18cf47a30ba8eded427 (patch) | |
| tree | f94aa2de99dcb7ee87639a3f60539fd376577bb9 /lib/components/MenuButton.svelte | |
| parent | e72162b34bddbf04998eea934335e9496b8649f8 (diff) | |
| download | hollowdark-0bb36660ec4bceeb4bd9b18cf47a30ba8eded427.tar.xz hollowdark-0bb36660ec4bceeb4bd9b18cf47a30ba8eded427.zip | |
Rename ui-lib to lib, split Begin into smaller components, add Credits, bump version to 1.0 from package.json
Diffstat (limited to 'lib/components/MenuButton.svelte')
| -rw-r--r-- | lib/components/MenuButton.svelte | 51 |
1 files changed, 51 insertions, 0 deletions
diff --git a/lib/components/MenuButton.svelte b/lib/components/MenuButton.svelte new file mode 100644 index 0000000..1753155 --- /dev/null +++ b/lib/components/MenuButton.svelte @@ -0,0 +1,51 @@ +<script lang="ts"> + type Variant = 'primary' | 'secondary' | 'tertiary' + + interface Props { + variant?: Variant + onclick: () => void + children: import('svelte').Snippet + } + + let { variant = 'primary', onclick, children }: Props = $props() +</script> + +<button class="menu-button {variant}" {onclick}> + {@render children()} +</button> + +<style> + .menu-button { + font-family: var(--font-body); + letter-spacing: 0.3px; + transition: color var(--transition-fast); + } + + .primary { + font-size: var(--text-lg); + color: var(--color-accent); + letter-spacing: 0.5px; + } + + .primary:hover { + color: var(--color-text); + } + + .secondary { + font-size: 15px; + color: var(--color-text-secondary); + } + + .secondary:hover { + color: var(--color-text); + } + + .tertiary { + font-size: 13px; + color: var(--color-text-tertiary); + } + + .tertiary:hover { + color: var(--color-text-secondary); + } +</style> |
