chore: init

src/lib/components/lnv/LocationSelect.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
+	import { tick } from "svelte";
+	import * as Command from "$lib/components/ui/command/index.js";
+	import * as Popover from "$lib/components/ui/popover/index.js";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+	
+	const frameworks = [
+		{
+			value: "sveltekit",
+			label: "SvelteKit",
+		},
+		{
+			value: "next.js",
+			label: "Next.js",
+		},
+		{
+			value: "nuxt.js",
+			label: "Nuxt.js",
+		},
+		{
+			value: "remix",
+			label: "Remix",
+		},
+		{
+			value: "astro",
+			label: "Astro",
+		},
+	];
+	
+	let open = $state(false);
+	let value = $state("");
+	let triggerRef = $state<HTMLButtonElement>(null!);
+	
+	const selectedValue = $derived(
+		value === "location" ? "My Location" : value
+	);
+	
+	// We want to refocus the trigger button when the user selects
+	// an item from the list so users can continue navigating the
+	// rest of the form with the keyboard.
+	function closeAndFocusTrigger() {
+		open = false;
+		tick().then(() => {
+			triggerRef.focus();
+		});
+	}
+</script>
+
+<Popover.Root bind:open>
+	<Popover.Trigger bind:ref={triggerRef}>
+		{#snippet child({ props }: { props: Record<string, any> })}
+			<Button
+				variant="outline"
+				class="justify-between"
+				{...props}
+				role="combobox"
+				aria-expanded={open}
+			>
+				{selectedValue || "Select a location..."}
+				<ChevronsUpDownIcon class="ml-2 size-4 shrink-0 opacity-50" />
+			</Button>
+		{/snippet}
+	</Popover.Trigger>
+	<Popover.Content class="w-[200px] p-0">
+		<Command.Root>
+		<Command.Input placeholder="Search..." />
+		<Command.List>
+			<Command.Empty>No location found.</Command.Empty>
+			<Command.Group>
+				<Command.Item
+				value={"location"}
+				onSelect={() => {
+					value = "location";
+					closeAndFocusTrigger();
+				}}
+				>
+				<CheckIcon
+					class={cn(
+					"mr-2 size-4",
+					value !== "location" && "text-transparent"
+					)}
+				/>
+				My Location
+				</Command.Item>
+			</Command.Group>
+			<Command.Group>
+			{#each frameworks as framework}
+				<Command.Item
+				value={framework.value}
+				onSelect={() => {
+					value = framework.value;
+					closeAndFocusTrigger();
+				}}
+				>
+				<CheckIcon
+					class={cn(
+					"mr-2 size-4",
+					value !== framework.value && "text-transparent"
+					)}
+				/>
+				{framework.label}
+				</Command.Item>
+			{/each}
+			</Command.Group>
+		</Command.List>
+		</Command.Root>
+	</Popover.Content>
+</Popover.Root>