@xbg.solutions/create-frontend 1.1.2 → 1.2.0

package/src/registry/blocks/section-footer/SectionFooter03.svelte

@@ -0,0 +1,33 @@
+<!--
+  SectionFooter03.svelte
+  Save/Edit/View action buttons left. Description text center-right.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    description = 'This feature is available in the Pro Plan for additional $10 per month.',
+    onview = () => {},
+    onedit = () => {},
+    onsave = () => {}
+  }: {
+    class?: string;
+    description?: string;
+    onview?: () => void;
+    onedit?: () => void;
+    onsave?: () => void;
+  } = $props();
+</script>
+
+<div class={cn('flex flex-col gap-3 py-4 sm:flex-row sm:items-center sm:justify-between', className)}>
+  <div class="flex shrink-0 items-center gap-2">
+    <Button size="sm" onclick={onsave}>Save</Button>
+    <Button variant="outline" size="sm" onclick={onedit}>Edit</Button>
+    <Button variant="outline" size="sm" onclick={onview}>View</Button>
+  </div>
+  {#if description}
+    <p class="text-sm text-muted-foreground sm:text-right">{description}</p>
+  {/if}
+</div>

package/src/registry/blocks/section-footer/SectionFooter04.svelte

@@ -0,0 +1,34 @@
+<!--
+  SectionFooter04.svelte
+  Primary CTA button left. "Need more?" text + secondary link/button right.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    ctaLabel = 'Purchase credits',
+    needMoreText = 'Need more?',
+    contactLabel = 'Contact sales',
+    oncta = () => {},
+    oncontact = () => {}
+  }: {
+    class?: string;
+    ctaLabel?: string;
+    needMoreText?: string;
+    contactLabel?: string;
+    oncta?: () => void;
+    oncontact?: () => void;
+  } = $props();
+</script>
+
+<div class={cn('flex flex-col gap-3 py-4 sm:flex-row sm:items-center sm:justify-between', className)}>
+  <Button size="sm" onclick={oncta}>{ctaLabel}</Button>
+  <div class="flex items-center gap-2 text-sm">
+    {#if needMoreText}
+      <span class="text-muted-foreground">{needMoreText}</span>
+    {/if}
+    <Button variant="outline" size="sm" onclick={oncontact}>{contactLabel}</Button>
+  </div>
+</div>

package/src/registry/blocks/section-footer/SectionFooter05.svelte

@@ -0,0 +1,69 @@
+<!--
+  SectionFooter05.svelte
+  Pagination row: ← Previous | 1–7 of 120 | Next →
+  Mobile: icon-only prev/next buttons flanking the count.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    page = 1,
+    pageSize = 7,
+    total = 120,
+    onprev = () => {},
+    onnext = () => {}
+  }: {
+    class?: string;
+    page?: number;
+    pageSize?: number;
+    total?: number;
+    onprev?: () => void;
+    onnext?: () => void;
+  } = $props();
+
+  const start = $derived((page - 1) * pageSize + 1);
+  const end = $derived(Math.min(page * pageSize, total));
+  const hasPrev = $derived(page > 1);
+  const hasNext = $derived(end < total);
+</script>
+
+<div class={cn('flex items-center justify-between gap-4 py-4', className)}>
+  <!-- Desktop Previous -->
+  <Button
+    variant="outline"
+    size="sm"
+    onclick={onprev}
+    disabled={!hasPrev}
+    class="hidden gap-1 sm:inline-flex"
+  >
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+    Previous
+  </Button>
+
+  <!-- Mobile Previous (icon only) -->
+  <Button variant="outline" size="icon" class="h-8 w-8 sm:hidden" onclick={onprev} disabled={!hasPrev}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+  </Button>
+
+  <!-- Count -->
+  <span class="text-sm text-muted-foreground">{start}–{end} of {total}</span>
+
+  <!-- Desktop Next -->
+  <Button
+    variant="outline"
+    size="sm"
+    onclick={onnext}
+    disabled={!hasNext}
+    class="hidden gap-1 sm:inline-flex"
+  >
+    Next
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+  </Button>
+
+  <!-- Mobile Next (icon only) -->
+  <Button variant="outline" size="icon" class="h-8 w-8 sm:hidden" onclick={onnext} disabled={!hasNext}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+  </Button>
+</div>

package/src/registry/blocks/section-footer/index.ts

@@ -0,0 +1,5 @@
+export { default as SectionFooter01 } from './SectionFooter01.svelte';
+export { default as SectionFooter02 } from './SectionFooter02.svelte';
+export { default as SectionFooter03 } from './SectionFooter03.svelte';
+export { default as SectionFooter04 } from './SectionFooter04.svelte';
+export { default as SectionFooter05 } from './SectionFooter05.svelte';

package/src/registry/blocks/section-header/SectionHeader01.svelte

@@ -0,0 +1,39 @@
+<!--
+  SectionHeader01.svelte
+  Minimal two-slot horizontal layout: wide left slot + narrow right slot.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import type { Snippet } from 'svelte';
+
+  let {
+    class: className = '',
+    left,
+    right
+  }: {
+    class?: string;
+    left?: Snippet;
+    right?: Snippet;
+  } = $props();
+</script>
+
+<div class={cn('flex items-center gap-4 py-4', className)}>
+  <div class="flex-1">
+    {#if left}
+      {@render left()}
+    {:else}
+      <div class="flex min-h-10 items-center justify-center rounded-lg border border-dashed bg-background text-sm text-muted-foreground">
+        Slot (swap it with your content)
+      </div>
+    {/if}
+  </div>
+  <div class="w-44 shrink-0">
+    {#if right}
+      {@render right()}
+    {:else}
+      <div class="flex min-h-10 items-center justify-center rounded-lg border border-dashed bg-background text-sm text-muted-foreground">
+        Slot (swap it with your content)
+      </div>
+    {/if}
+  </div>
+</div>

package/src/registry/blocks/section-header/SectionHeader02.svelte

@@ -0,0 +1,58 @@
+<!--
+  SectionHeader02.svelte
+  Title + Status badge + description left. Search + View/Edit/Create New right.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    title = 'Storage',
+    badge = 'Status',
+    description = 'Read and write directly to databases and stores from your projects.',
+    searchPlaceholder = 'Search',
+    onview = () => {},
+    onedit = () => {},
+    oncreate = () => {}
+  }: {
+    class?: string;
+    title?: string;
+    badge?: string;
+    description?: string;
+    searchPlaceholder?: string;
+    onview?: () => void;
+    onedit?: () => void;
+    oncreate?: () => void;
+  } = $props();
+</script>
+
+<div class={cn('py-4', className)}>
+  <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+    <!-- Left: title + badge + description -->
+    <div>
+      <div class="flex items-center gap-2">
+        <h2 class="text-lg font-semibold">{title}</h2>
+        {#if badge}
+          <span class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium">{badge}</span>
+        {/if}
+      </div>
+      {#if description}
+        <p class="mt-0.5 text-sm text-muted-foreground">{description}</p>
+      {/if}
+    </div>
+
+    <!-- Right: search + actions -->
+    <div class="flex shrink-0 flex-col items-end gap-2 sm:flex-row sm:items-center">
+      <div class="flex items-center gap-2 rounded-md border bg-background px-3 py-1.5">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+        <input type="text" placeholder={searchPlaceholder} class="w-36 bg-transparent text-sm outline-none placeholder:text-muted-foreground" />
+      </div>
+      <div class="flex items-center gap-2">
+        <Button variant="outline" size="sm" onclick={onview}>View</Button>
+        <Button variant="outline" size="sm" onclick={onedit}>Edit</Button>
+        <Button size="sm" onclick={oncreate}>Create new</Button>
+      </div>
+    </div>
+  </div>
+</div>

package/src/registry/blocks/section-header/SectionHeader03.svelte

@@ -0,0 +1,88 @@
+<!--
+  SectionHeader03.svelte
+  Title + Status badge + description left. View/Edit/Create New right. Segmented tabs below.
+  Mobile: dropdown select for tabs.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    title = 'Storage',
+    badge = 'Status',
+    description = 'Read and write directly to databases and stores from your projects.',
+    tabs = ['Tab 1', 'Tab 2', 'Tab 3', 'Tab 4'],
+    activeTab = 'Tab 1',
+    onview = () => {},
+    onedit = () => {},
+    oncreate = () => {}
+  }: {
+    class?: string;
+    title?: string;
+    badge?: string;
+    description?: string;
+    tabs?: string[];
+    activeTab?: string;
+    onview?: () => void;
+    onedit?: () => void;
+    oncreate?: () => void;
+  } = $props();
+
+  let currentTab = $state(activeTab);
+</script>
+
+<div class={cn('py-4', className)}>
+  <!-- Top row: title/desc left, actions right -->
+  <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+    <div>
+      <div class="flex items-center gap-2">
+        <h2 class="text-lg font-semibold">{title}</h2>
+        {#if badge}
+          <span class="inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium">{badge}</span>
+        {/if}
+      </div>
+      {#if description}
+        <p class="mt-0.5 text-sm text-muted-foreground">{description}</p>
+      {/if}
+    </div>
+    <div class="flex shrink-0 items-center gap-2">
+      <Button variant="outline" size="sm" onclick={onview}>View</Button>
+      <Button variant="outline" size="sm" onclick={onedit}>Edit</Button>
+      <Button size="sm" onclick={oncreate}>Create new</Button>
+      <Button variant="ghost" size="icon" class="h-8 w-8">
+        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
+      </Button>
+    </div>
+  </div>
+
+  <!-- Tabs: pill/segmented on desktop, select on mobile -->
+  <div class="mt-4">
+    <!-- Desktop segmented tabs -->
+    <div class="hidden grid-flow-col grid-cols-[repeat(auto-fit,minmax(0,1fr))] overflow-hidden rounded-md border bg-muted p-1 sm:grid">
+      {#each tabs as tab}
+        <button
+          type="button"
+          onclick={() => (currentTab = tab)}
+          class={cn(
+            'rounded-sm px-4 py-1.5 text-sm font-medium transition-colors',
+            currentTab === tab
+              ? 'bg-background text-foreground shadow-sm'
+              : 'text-muted-foreground hover:text-foreground'
+          )}
+        >{tab}</button>
+      {/each}
+    </div>
+
+    <!-- Mobile select -->
+    <select
+      class="sm:hidden w-full rounded-md border bg-background px-3 py-1.5 text-sm"
+      value={currentTab}
+      onchange={(e) => (currentTab = (e.target as HTMLSelectElement).value)}
+    >
+      {#each tabs as tab}
+        <option value={tab}>{tab}</option>
+      {/each}
+    </select>
+  </div>
+</div>

package/src/registry/blocks/section-header/SectionHeader04.svelte

@@ -0,0 +1,45 @@
+<!--
+  SectionHeader04.svelte
+  Title + description left. Search + more (…) button right.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    title = 'Storage',
+    description = 'Read and write directly to databases and stores from your projects.',
+    searchPlaceholder = 'Search',
+    onmore = () => {}
+  }: {
+    class?: string;
+    title?: string;
+    description?: string;
+    searchPlaceholder?: string;
+    onmore?: () => void;
+  } = $props();
+</script>
+
+<div class={cn('py-4', className)}>
+  <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+    <!-- Left -->
+    <div>
+      <h2 class="text-lg font-semibold">{title}</h2>
+      {#if description}
+        <p class="mt-0.5 text-sm text-muted-foreground">{description}</p>
+      {/if}
+    </div>
+
+    <!-- Right: search + more -->
+    <div class="flex shrink-0 items-center gap-2">
+      <div class="flex items-center gap-2 rounded-md border bg-background px-3 py-1.5">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-muted-foreground"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+        <input type="text" placeholder={searchPlaceholder} class="w-36 bg-transparent text-sm outline-none placeholder:text-muted-foreground" />
+      </div>
+      <Button variant="ghost" size="icon" class="h-8 w-8" onclick={onmore}>
+        <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
+      </Button>
+    </div>
+  </div>
+</div>

package/src/registry/blocks/section-header/SectionHeader05.svelte

@@ -0,0 +1,64 @@
+<!--
+  SectionHeader05.svelte
+  Title + description left. Labeled toggle switch right.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  let {
+    class: className = '',
+    title = 'Storage',
+    description = 'Read and write directly to databases and stores from your projects.',
+    toggleLabel = 'Enabled',
+    enabled = false,
+    ontoggle = (_: boolean) => {}
+  }: {
+    class?: string;
+    title?: string;
+    description?: string;
+    toggleLabel?: string;
+    enabled?: boolean;
+    ontoggle?: (value: boolean) => void;
+  } = $props();
+
+  let isEnabled = $state(enabled);
+
+  function handleToggle() {
+    isEnabled = !isEnabled;
+    ontoggle(isEnabled);
+  }
+</script>
+
+<div class={cn('py-4', className)}>
+  <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+    <!-- Left -->
+    <div>
+      <h2 class="text-lg font-semibold">{title}</h2>
+      {#if description}
+        <p class="mt-0.5 text-sm text-muted-foreground">{description}</p>
+      {/if}
+    </div>
+
+    <!-- Right: toggle -->
+    <div class="flex shrink-0 items-center gap-2">
+      <span class="text-sm text-muted-foreground">{toggleLabel}</span>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={isEnabled}
+        onclick={handleToggle}
+        class={cn(
+          'relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+          isEnabled ? 'bg-foreground' : 'bg-input'
+        )}
+      >
+        <span
+          class={cn(
+            'pointer-events-none inline-block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform',
+            isEnabled ? 'translate-x-4' : 'translate-x-0'
+          )}
+        />
+      </button>
+    </div>
+  </div>
+</div>

package/src/registry/blocks/section-header/index.ts

@@ -0,0 +1,5 @@
+export { default as SectionHeader01 } from './SectionHeader01.svelte';
+export { default as SectionHeader02 } from './SectionHeader02.svelte';
+export { default as SectionHeader03 } from './SectionHeader03.svelte';
+export { default as SectionHeader04 } from './SectionHeader04.svelte';
+export { default as SectionHeader05 } from './SectionHeader05.svelte';

package/src/registry/blocks/settings/Settings01.svelte

@@ -0,0 +1,202 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		onSaveCard?: () => void;
+		onSaveClient?: () => void;
+	}
+
+	const { class: className, onSaveCard, onSaveClient }: Props = $props();
+
+	// Card details state
+	let nameOnCard = $state('Kathy Pacheco');
+	let cardExpiry = $state('05/2025');
+	let cardNumber = $state('•••• •••• •••• 4242');
+	let cardCvv = $state('•••');
+
+	// Client details state
+	let clientName = $state('Kathy Pacheco');
+	let clientEmail = $state('kathy@example.com');
+	let clientCountry = $state('United States');
+	let streetAddress = $state('2825 Winding Way');
+	let city = $state('Providence');
+	let state = $state('Rhode Island');
+
+	function handleSaveCard() {
+		onSaveCard?.();
+	}
+
+	function handleSaveClient() {
+		onSaveClient?.();
+	}
+
+	// SVG Icons
+	function GlobeIcon() {
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 1 10 4M12 22a14.5 14.5 0 0 1-10-4M2 12h20M12 2a14.5 14.5 0 0 0 0 20M12 22a14.5 14.5 0 0 0 0-20"/></svg>`;
+	}
+</script>
+
+<div class={cn('space-y-6', className)}>
+	<!-- Plan Banner -->
+	<div class="rounded-lg bg-black px-6 py-4 text-white sm:px-8 sm:py-6">
+		<div class="flex items-center justify-between">
+			<div>
+				<h2 class="text-lg font-semibold">You're using free plan</h2>
+				<p class="mt-1 text-sm text-gray-300">Upgrade your account to unlock more features and higher limits.</p>
+			</div>
+			<Button class="ml-4 flex-shrink-0">
+				View plans →
+			</Button>
+		</div>
+	</div>
+
+	<!-- Card Details Section -->
+	<div class="rounded-lg border bg-background p-4 sm:p-6">
+		<div class="mb-6">
+			<h3 class="text-lg font-semibold">Card details</h3>
+			<p class="mt-1 text-sm text-muted-foreground">Manage your payment method and billing information.</p>
+		</div>
+
+		<div class="grid gap-4 sm:grid-cols-2">
+			<div>
+				<label class="block text-sm font-medium mb-2">Name on card</label>
+				<input
+					type="text"
+					bind:value={nameOnCard}
+					placeholder="Full name"
+					class="w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring"
+				/>
+			</div>
+
+			<div>
+				<label class="block text-sm font-medium mb-2">Expiry</label>
+				<input
+					type="text"
+					bind:value={cardExpiry}
+					placeholder="MM/YYYY"
+					class="w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring"
+				/>
+			</div>
+
+			<div>
+				<label class="block text-sm font-medium mb-2">Card number</label>
+				<input
+					type="text"
+					bind:value={cardNumber}
+					placeholder="•••• •••• •••• ••••"
+					class="w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring"
+				/>
+			</div>
+
+			<div>
+				<label class="block text-sm font-medium mb-2">CVV</label>
+				<input
+					type="text"
+					bind:value={cardCvv}
+					placeholder="•••"
+					class="w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring"
+				/>
+			</div>
+		</div>
+
+		<div class="mt-6 flex justify-end">
+			<Button onclick={handleSaveCard}>
+				Save changes
+			</Button>
+		</div>
+	</div>
+
+	<!-- Client Details Section -->
+	<div class="rounded-lg border bg-background p-4 sm:p-6">
+		<div class="mb-6">
+			<h3 class="text-lg font-semibold">Client details</h3>
+			<p class="mt-1 text-sm text-muted-foreground">Update your personal and billing address information.</p>
+		</div>
+
+		<div class="grid gap-4 sm:grid-cols-2">
+			<div>
+				<label class="block text-sm font-medium mb-2">Client name</label>
+				<input
+					type="text"
+					bind:value={clientName}
+					placeholder="Full name"
+					class="w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring"
+				/>
+			</div>
+
+			<div>
+				<label class="block text-sm font-medium mb-2">Email address</label>
+				<input
+					type="email"
+					bind:value={clientEmail}
+					placeholder="email@example.com"
+					class="w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring"
+				/>
+			</div>
+
+			<div>
+				<label class="block text-sm font-medium mb-2">Country</label>
+				<div class="relative">
+					<select
+						bind:value={clientCountry}
+						class="w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring appearance-none pr-8"
+					>
+						<option>United States</option>
+						<option>Canada</option>
+						<option>United Kingdom</option>
+						<option>Australia</option>
+					</select>
+					<div class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground">
+						{@html GlobeIcon()}
+					</div>
+				</div>
+			</div>
+
+			<div>
+				<label class="block text-sm font-medium mb-2">Street address</label>
+				<input
+					type="text"
+					bind:value={streetAddress}
+					placeholder="Street address"
+					class="w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring"
+				/>
+			</div>
+
+			<div>
+				<label class="block text-sm font-medium mb-2">City</label>
+				<input
+					type="text"
+					bind:value={city}
+					placeholder="City"
+					class="w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring"
+				/>
+			</div>
+
+			<div>
+				<label class="block text-sm font-medium mb-2">State</label>
+				<div class="relative">
+					<select
+						bind:value={state}
+						class="w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring appearance-none pr-8"
+					>
+						<option>Alabama</option>
+						<option>Rhode Island</option>
+						<option>California</option>
+						<option>Texas</option>
+					</select>
+					<div class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground">
+						{@html GlobeIcon()}
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="mt-6 flex justify-end">
+			<Button onclick={handleSaveClient}>
+				Save changes
+			</Button>
+		</div>
+	</div>
+</div>