projectwallace.com/src/lib/components/css-form/InputModeSwitcher.svelte at db05ba5287a25ac61980c4f579e010b36e4c0a41 · projectwallace/projectwallace.com · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<script lang="ts">
	import { createTabs, melt } from '@melt-ui/svelte'
	import { untrack } from 'svelte'
	import type { Snippet } from 'svelte'

	type Props = {
		url_tab: Snippet
		file_tab: Snippet
		raw_tab: Snippet
		title: Snippet
		default_tab?: 'url' | 'file' | 'raw'
	}
	let { url_tab, file_tab, raw_tab, title, default_tab = 'url' }: Props = $props()

	const {
		states: { value },
		elements: { root, list, content: tab_content, trigger }
	} = createTabs({
		loop: false,
		defaultValue: untrack(() => default_tab)
	})
</script>

<div class="input-mode-switcher">
	<div use:melt={$root}>
		<div class="bar">
			{@render title()}
			<div use:melt={$list}>
				<button use:melt={$trigger('url')}>URL</button>
				<button use:melt={$trigger('file')}>File(s)</button>
				<button use:melt={$trigger('raw')}>Paste CSS</button>
			</div>
		</div>
	</div>

	<div use:melt={$tab_content('url')}>
		{#if $value === 'url'}
			{@render url_tab()}
		{/if}
	</div>

	<div use:melt={$tab_content('file')}>
		{#if $value === 'file'}
			{@render file_tab()}
		{/if}
	</div>

	<div use:melt={$tab_content('raw')}>
		{#if $value === 'raw'}
			{@render raw_tab()}
		{/if}
	</div>
</div>

<style>
	.input-mode-switcher {
		display: grid;
		gap: var(--space-3);
		--_input-mode-switcher-spacing: 0.25rem;
	}

	.bar {
		display: flex;
		gap: var(--space-4);
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
	}

	[role='tablist'] {
		display: flex;
		gap: var(--_input-mode-switcher-spacing);
		border: 1px solid var(--fg-600);
		justify-content: end;
		padding: var(--_input-mode-switcher-spacing);
		max-width: max-content;
	}

	[role='tab'] {
		display: block;
		padding: 0 var(--space-2);
		font-weight: var(--font-medium);
		color: var(--fg-300);
		font-size: var(--size-sm);
	}

	[role='tab'][data-state='active'] {
		background-color: var(--bg-200);
		color: var(--fg-100);
	}

	[role='tab']:not([data-state='active']):hover {
		background-color: var(--bg-100);
		color: var(--fg-200);
	}
</style>