@xbg.solutions/create-frontend 1.1.2 → 1.2.0

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

@@ -0,0 +1,248 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Invoice {
+		id: string;
+		name: string;
+		status: 'Paid' | 'Due' | 'Sent';
+		date: string;
+		plan: string;
+	}
+
+	interface Props {
+		class?: string;
+		invoices?: Invoice[];
+		onUpgrade?: () => void;
+		onDownloadAll?: () => void;
+	}
+
+	const {
+		class: className,
+		invoices = [
+			{ id: '2', name: 'Invoice #2', status: 'Paid', date: 'Sep 5 2024', plan: 'Pro' },
+			{ id: '5', name: 'Invoice #5', status: 'Paid', date: 'Aug 26 2024', plan: 'Pro' },
+			{ id: '4', name: 'Invoice #4', status: 'Paid', date: 'Sep 18 2024', plan: 'Pro' },
+			{ id: '3', name: 'Invoice #3', status: 'Due', date: 'Sep 11 2024', plan: 'Pro' },
+			{ id: '12', name: 'Invoice #12', status: 'Sent', date: 'Sep 19 2024', plan: 'Pro' },
+			{ id: '13', name: 'Invoice #13', status: 'Sent', date: 'Sep 19 2024', plan: 'Pro' }
+		],
+		onUpgrade,
+		onDownloadAll
+	}: Props = $props();
+
+	let searchQuery = $state('');
+	let currentPage = $state(1);
+	let selectedCheckboxes = $state<Set<string>>(new Set());
+
+	const itemsPerPage = 5;
+	const filteredInvoices = $derived(
+		invoices.filter((inv) => inv.name.toLowerCase().includes(searchQuery.toLowerCase()))
+	);
+	const totalPages = $derived(Math.ceil(filteredInvoices.length / itemsPerPage));
+	const paginatedInvoices = $derived(
+		filteredInvoices.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage)
+	);
+
+	function toggleCheckbox(id: string) {
+		if (selectedCheckboxes.has(id)) {
+			selectedCheckboxes.delete(id);
+		} else {
+			selectedCheckboxes.add(id);
+		}
+	}
+
+	function goToPage(page: number) {
+		if (page >= 1 && page <= totalPages) {
+			currentPage = page;
+		}
+	}
+
+	const pages = $derived.by(() => {
+		const result: (number | string)[] = [];
+		for (let i = 1; i <= totalPages; i++) {
+			if (i === 1 || i === totalPages || (i >= currentPage - 1 && i <= currentPage + 1)) {
+				result.push(i);
+			} else if (result[result.length - 1] !== '...') {
+				result.push('...');
+			}
+		}
+		return result;
+	});
+
+	// SVG Icons
+	const ExternalLinkIcon = `<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"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>`;
+
+	const ChevronLeftIcon = `<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"><polyline points="15 18 9 12 15 6"></polyline></svg>`;
+
+	const ChevronRightIcon = `<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"><polyline points="9 18 15 12 9 6"></polyline></svg>`;
+</script>
+
+<div class={cn('space-y-6', className)}>
+	<!-- Header -->
+	<div class="flex items-start justify-between">
+		<div>
+			<h2 class="text-2xl font-semibold">Billing & Invoices</h2>
+			<p class="text-sm text-muted-foreground mt-1">Manage your billing and view invoices</p>
+		</div>
+		<Button variant="outline">Contact support</Button>
+	</div>
+
+	<!-- Your Plan Section -->
+	<div class="border rounded-lg p-6 space-y-4">
+		<div>
+			<h3 class="text-lg font-semibold">Your plan</h3>
+			<p class="text-sm text-muted-foreground">Manage or upgrade your plan.</p>
+		</div>
+
+		<div class="border rounded-lg p-4 space-y-4">
+			<div>
+				<p class="text-xs text-muted-foreground mb-2">Plan Summary</p>
+				<div class="flex items-center gap-2">
+					<span class="text-xs border rounded px-2 py-0.5 bg-muted">Free Plan</span>
+				</div>
+			</div>
+
+			<div>
+				<p class="font-semibold">100 credits left</p>
+			</div>
+
+			<div class="space-y-1">
+				<div class="h-1 bg-muted rounded-full overflow-hidden">
+					<div class="bg-foreground h-full rounded-full" style="width: 50%"></div>
+				</div>
+				<p class="text-xs text-muted-foreground text-right">50% of 200 credits used</p>
+			</div>
+
+			<div class="grid grid-cols-3 gap-4">
+				<div>
+					<p class="text-xs text-muted-foreground">Price/Month</p>
+					<p class="font-semibold">$0</p>
+				</div>
+				<div>
+					<p class="text-xs text-muted-foreground">Included Credits</p>
+					<p class="font-semibold">200</p>
+				</div>
+				<div>
+					<p class="text-xs text-muted-foreground">Renewal Date</p>
+					<p class="font-semibold text-sm">Oct 3, 2024</p>
+				</div>
+			</div>
+
+			<Button class="w-full" onclick={onUpgrade}>
+				Upgrade plan
+				<span class="ml-2">
+					{@html ExternalLinkIcon}
+				</span>
+			</Button>
+		</div>
+	</div>
+
+	<!-- Invoices Section -->
+	<div class="border rounded-lg p-6 space-y-4">
+		<div>
+			<h3 class="text-lg font-semibold">Invoices</h3>
+			<p class="text-sm text-muted-foreground">View and download your invoices</p>
+		</div>
+
+		<div class="flex items-center gap-2">
+			<input
+				type="text"
+				placeholder="Search invoices..."
+				bind:value={searchQuery}
+				class="flex-1 px-3 py-2 border rounded-md bg-background text-sm"
+			/>
+			<Button variant="outline" onclick={onDownloadAll}>↓ Download all</Button>
+		</div>
+
+		<div class="border rounded-lg overflow-hidden">
+			<table class="w-full text-sm">
+				<thead class="bg-muted border-b">
+					<tr>
+						<th class="w-8 px-4 py-2 text-left">
+							<input type="checkbox" class="rounded" />
+						</th>
+						<th class="px-4 py-2 text-left font-semibold">Name</th>
+						<th class="px-4 py-2 text-left font-semibold">Status</th>
+						<th class="px-4 py-2 text-left font-semibold">Billing date</th>
+						<th class="px-4 py-2 text-left font-semibold">Plan</th>
+						<th class="w-8 px-4 py-2 text-center">Actions</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each paginatedInvoices as invoice (invoice.id)}
+						<tr class="border-b hover:bg-muted/50">
+							<td class="px-4 py-3">
+								<input
+									type="checkbox"
+									class="rounded"
+									checked={selectedCheckboxes.has(invoice.id)}
+									onchange={() => toggleCheckbox(invoice.id)}
+								/>
+							</td>
+							<td class="px-4 py-3">{invoice.name}</td>
+							<td class="px-4 py-3">
+								{#if invoice.status === 'Paid'}
+									<span class="inline-block bg-foreground text-background text-xs px-2 py-1 rounded-full"
+										>{invoice.status}</span
+									>
+								{:else if invoice.status === 'Due'}
+									<span
+										class="inline-block text-destructive border border-destructive rounded-full px-2 py-1 text-xs"
+										>{invoice.status}</span
+									>
+								{:else}
+									<span class="text-xs">{invoice.status}</span>
+								{/if}
+							</td>
+							<td class="px-4 py-3">{invoice.date}</td>
+							<td class="px-4 py-3">{invoice.plan}</td>
+							<td class="px-4 py-3 text-center">
+								<button class="text-muted-foreground hover:text-foreground">...</button>
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+
+		<!-- Pagination -->
+		{#if totalPages > 1}
+			<div class="flex items-center justify-center gap-1">
+				<Button
+					variant="outline"
+					size="sm"
+					disabled={currentPage === 1}
+					onclick={() => goToPage(currentPage - 1)}
+				>
+					{@html ChevronLeftIcon}
+					Previous
+				</Button>
+
+				{#each pages as page}
+					{#if page === '...'}
+						<span class="px-2">...</span>
+					{:else}
+						<Button
+							variant={currentPage === page ? 'default' : 'outline'}
+							size="sm"
+							onclick={() => goToPage(page as number)}
+						>
+							{page}
+						</Button>
+					{/if}
+				{/each}
+
+				<Button
+					variant="outline"
+					size="sm"
+					disabled={currentPage === totalPages}
+					onclick={() => goToPage(currentPage + 1)}
+				>
+					Next
+					{@html ChevronRightIcon}
+				</Button>
+			</div>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,120 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	type NotifOption = 'All' | 'Email' | 'In app' | 'None';
+
+	interface Props {
+		class?: string;
+		onSave?: () => void;
+	}
+
+	const { class: className, onSave }: Props = $props();
+
+	let generalSettings = $state<Record<string, NotifOption>>({
+		newMessages: 'All',
+		accountActivity: 'All',
+		mentions: 'All',
+		appUpdates: 'All'
+	});
+
+	let summarySettings = $state<Record<string, NotifOption>>({
+		dailySummary: 'All',
+		weeklyReport: 'All',
+		monthlyBilling: 'All',
+		eventReminder: 'All'
+	});
+
+	const notificationOptions: NotifOption[] = ['All', 'Email', 'In app', 'None'];
+
+	function handleSave() {
+		onSave?.();
+	}
+</script>
+
+<div class={cn('space-y-6', className)}>
+	<!-- Header -->
+	<div>
+		<h2 class="text-2xl font-semibold">Notifications</h2>
+		<p class="text-sm text-muted-foreground mt-1">
+			Stay informed with customizable notifications about your account and activities.
+		</p>
+	</div>
+
+	<!-- General Notifications -->
+	<div class="border rounded-lg p-6 space-y-4">
+		<div>
+			<h3 class="text-lg font-semibold">General notifications</h3>
+			<p class="text-sm text-muted-foreground">Choose how you receive general updates</p>
+		</div>
+
+		<div class="space-y-4">
+			{#each [
+				{ key: 'newMessages', label: 'New messages' },
+				{ key: 'accountActivity', label: 'Account activity' },
+				{ key: 'mentions', label: 'Mentions in discussions' },
+				{ key: 'appUpdates', label: 'Application updates' }
+			] as item}
+				<div class="flex items-center justify-between">
+					<label class="text-sm font-medium">{item.label}</label>
+					<div class="flex gap-1">
+						{#each notificationOptions as option}
+							<button
+								class={cn(
+									'px-2.5 py-1 rounded text-sm border transition-colors',
+									generalSettings[item.key] === option
+										? 'bg-foreground text-background border-foreground'
+										: 'border-muted-foreground/20 hover:border-muted-foreground/40'
+								)}
+								onclick={() => (generalSettings[item.key] = option)}
+							>
+								{option}
+							</button>
+						{/each}
+					</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+
+	<!-- Summary Notifications -->
+	<div class="border rounded-lg p-6 space-y-4">
+		<div>
+			<h3 class="text-lg font-semibold">Summary notifications</h3>
+			<p class="text-sm text-muted-foreground">Receive digest summaries of your activity</p>
+		</div>
+
+		<div class="space-y-4">
+			{#each [
+				{ key: 'dailySummary', label: 'Daily activity summary' },
+				{ key: 'weeklyReport', label: 'Weekly progress report' },
+				{ key: 'monthlyBilling', label: 'Monthly billing summary' },
+				{ key: 'eventReminder', label: 'Event reminder summary' }
+			] as item}
+				<div class="flex items-center justify-between">
+					<label class="text-sm font-medium">{item.label}</label>
+					<div class="flex gap-1">
+						{#each notificationOptions as option}
+							<button
+								class={cn(
+									'px-2.5 py-1 rounded text-sm border transition-colors',
+									summarySettings[item.key] === option
+										? 'bg-foreground text-background border-foreground'
+										: 'border-muted-foreground/20 hover:border-muted-foreground/40'
+								)}
+								onclick={() => (summarySettings[item.key] = option)}
+							>
+								{option}
+							</button>
+						{/each}
+					</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+
+	<!-- Save Button -->
+	<div class="flex justify-end">
+		<Button onclick={handleSave}>Save preferences</Button>
+	</div>
+</div>

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

@@ -0,0 +1,136 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		avatarUrl?: string;
+		onSave?: () => void;
+		onDelete?: () => void;
+	}
+
+	const { class: className, avatarUrl, onSave, onDelete }: Props = $props();
+
+	let displayName = $state('Shadon Design');
+	let isAvatarEditing = $state(false);
+	let isNameEditing = $state(false);
+	let isTeamsEditing = $state(false);
+
+	const teams = [
+		{ name: 'Creative Studio', joined: '5 September 2024', role: 'Admin' },
+		{ name: 'Design Team', joined: '2 August 2024', role: 'Admin' },
+		{ name: 'Development', joined: '14 January 2023', role: 'Designer' },
+		{ name: 'Product Team', joined: '11 May 2023', role: 'Developer' }
+	];
+
+	function handleDeleteAccount() {
+		onDelete?.();
+	}
+
+	function handleSave() {
+		isAvatarEditing = false;
+		isNameEditing = false;
+		isTeamsEditing = false;
+		onSave?.();
+	}
+</script>
+
+<div class={cn('space-y-6', className)}>
+	<!-- Avatar Section -->
+	<div class="border rounded-lg p-6 space-y-4">
+		<div>
+			<p class="text-sm text-muted-foreground">Avatar is your profile picture visible across the platform.</p>
+		</div>
+
+		<div class="flex items-end gap-4">
+			<div
+				class="w-12 h-12 rounded-full bg-muted flex items-center justify-center flex-shrink-0 overflow-hidden"
+			>
+				{#if avatarUrl}
+					<img src={avatarUrl} alt="Avatar" class="w-full h-full object-cover" />
+				{:else}
+					<span class="text-muted-foreground text-xs">Profile</span>
+				{/if}
+			</div>
+			<div class="flex gap-2">
+				<Button variant="outline">Upload</Button>
+				<Button variant="outline">Remove</Button>
+			</div>
+		</div>
+
+		<div class="flex justify-end">
+			<Button onclick={handleSave}>Save</Button>
+		</div>
+	</div>
+
+	<!-- Display Name Section -->
+	<div class="border rounded-lg p-6 space-y-4">
+		<div>
+			<p class="text-sm text-muted-foreground">Enter your full name or a display name to customize your profile.</p>
+		</div>
+
+		<div class="space-y-2">
+			<input
+				type="text"
+				bind:value={displayName}
+				class="w-full px-3 py-2 border rounded-md bg-background text-sm"
+				placeholder="Display name"
+			/>
+			<p class="text-xs text-muted-foreground">Maximum allowed length is 32 characters.</p>
+		</div>
+
+		<div class="flex justify-end">
+			<Button onclick={handleSave}>Save</Button>
+		</div>
+	</div>
+
+	<!-- Teams Section -->
+	<div class="border rounded-lg p-6 space-y-4">
+		<div>
+			<h3 class="font-semibold">Teams</h3>
+			<p class="text-sm text-muted-foreground">Here is your URL namespace and team memberships.</p>
+		</div>
+
+		<div class="border rounded-lg overflow-hidden">
+			<table class="w-full text-sm">
+				<thead class="bg-muted border-b">
+					<tr>
+						<th class="px-4 py-2 text-left font-semibold">Team name</th>
+						<th class="px-4 py-2 text-left font-semibold">Joined</th>
+						<th class="px-4 py-2 text-right font-semibold">Role</th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each teams as team (team.name)}
+						<tr class="border-b hover:bg-muted/50">
+							<td class="px-4 py-3">Table Cell Text</td>
+							<td class="px-4 py-3">{team.joined}</td>
+							<td class="px-4 py-3 text-right">
+								<span class="inline-block bg-muted text-xs px-2 py-0.5 rounded">{team.role}</span>
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+
+		<div class="flex justify-end gap-2">
+			<Button variant="outline">Edit</Button>
+			<Button onclick={handleSave}>Save</Button>
+		</div>
+	</div>
+
+	<!-- Delete Account Section -->
+	<div class="border border-destructive rounded-lg p-6">
+		<div class="flex items-start justify-between gap-4">
+			<div class="flex-1 space-y-2">
+				<p class="text-sm text-muted-foreground">
+					This will permanently delete your Personal Account. Please note that this action is irreversible, so proceed
+					with caution.
+				</p>
+				<p class="text-sm text-destructive font-semibold">This action cannot be undone!</p>
+			</div>
+			<Button variant="destructive" onclick={handleDeleteAccount}>Delete account</Button>
+		</div>
+	</div>
+</div>

package/src/registry/blocks/settings/index.ts

@@ -0,0 +1,7 @@
+export { default as Settings01 } from './Settings01.svelte';
+export { default as Settings02 } from './Settings02.svelte';
+export { default as Settings03 } from './Settings03.svelte';
+export { default as Settings04 } from './Settings04.svelte';
+export { default as Settings05 } from './Settings05.svelte';
+export { default as Settings06 } from './Settings06.svelte';
+export { default as Settings07 } from './Settings07.svelte';

package/src/registry/blocks/sidebar/SidebarLayout01.svelte

@@ -0,0 +1,108 @@
+<!--
+  SidebarLayout01.svelte
+  Documentation sidebar with grouped nav links, search, and breadcrumb.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+  import { Input, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator } from '$lib/components/ui';
+
+  let {
+    class: className = '',
+    sections = [],
+    breadcrumbs = [],
+    logo = 'Docs',
+    version = 'v1.0.0',
+    children
+  }: {
+    class?: string;
+    sections?: Array<{
+      title: string;
+      links: Array<{ label: string; href: string; active?: boolean }>;
+    }>;
+    breadcrumbs?: Array<{ label: string; href?: string }>;
+    logo?: string;
+    version?: string;
+    children?: Snippet;
+  } = $props();
+
+  let searchQuery = $state('');
+</script>
+
+<div class={cn('flex h-screen', className)}>
+  <!-- Sidebar -->
+  <aside class="flex w-64 flex-col border-r bg-background">
+    <!-- Logo + Version -->
+    <div class="flex items-center gap-2 border-b px-4 py-3">
+      <!-- Lucide: BookOpen -->
+      <span class="flex h-6 w-6 items-center justify-center rounded bg-primary text-xs text-primary-foreground">D</span>
+      <span class="font-semibold">{logo}</span>
+      <span class="ml-auto text-xs text-muted-foreground">{version}</span>
+    </div>
+
+    <!-- Search -->
+    <div class="p-4">
+      <Input
+        type="search"
+        placeholder="Search documentation..."
+        bind:value={searchQuery}
+      />
+    </div>
+
+    <!-- Nav Sections -->
+    <nav class="flex-1 overflow-y-auto px-3 pb-4">
+      {#each sections as section}
+        <div class="mb-4">
+          <h4 class="mb-1 px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            {section.title}
+          </h4>
+          <ul class="space-y-0.5">
+            {#each section.links as link}
+              <li>
+                <a
+                  href={link.href}
+                  class={cn(
+                    'block rounded-md px-2 py-1.5 text-sm transition-colors',
+                    link.active
+                      ? 'bg-muted font-semibold text-foreground'
+                      : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                  )}
+                >
+                  {link.label}
+                </a>
+              </li>
+            {/each}
+          </ul>
+        </div>
+      {/each}
+    </nav>
+  </aside>
+
+  <!-- Main Content -->
+  <main class="flex flex-1 flex-col overflow-hidden">
+    <!-- Breadcrumb -->
+    {#if breadcrumbs.length > 0}
+      <div class="border-b px-6 py-3">
+        <Breadcrumb>
+          {#each breadcrumbs as crumb, i}
+            <BreadcrumbItem>
+              {#if crumb.href}
+                <BreadcrumbLink href={crumb.href}>{crumb.label}</BreadcrumbLink>
+              {:else}
+                <span class="text-sm text-foreground">{crumb.label}</span>
+              {/if}
+            </BreadcrumbItem>
+            {#if i < breadcrumbs.length - 1}
+              <BreadcrumbSeparator />
+            {/if}
+          {/each}
+        </Breadcrumb>
+      </div>
+    {/if}
+
+    <!-- Content Slot -->
+    <div class="flex-1 overflow-y-auto p-6">
+      {@render children?.()}
+    </div>
+  </main>
+</div>

package/src/registry/blocks/sidebar/SidebarLayout02.svelte

@@ -0,0 +1,75 @@
+<!--
+  SidebarLayout02.svelte
+  Icon-only sidebar that expands on hover to show labels.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+  import { DynamicIcon } from '$lib/components/ui/icon';
+
+  let {
+    class: className = '',
+    items = [],
+    children
+  }: {
+    class?: string;
+    items?: Array<{
+      icon: string;
+      label: string;
+      href: string;
+      active?: boolean;
+    }>;
+    children?: Snippet;
+  } = $props();
+
+  let expanded = $state(false);
+</script>
+
+<div class={cn('flex h-screen', className)}>
+  <!-- Sidebar -->
+  <aside
+    class={cn(
+      'flex flex-col border-r bg-background transition-all duration-200',
+      expanded ? 'w-48' : 'w-16'
+    )}
+    onmouseenter={() => (expanded = true)}
+    onmouseleave={() => (expanded = false)}
+    role="navigation"
+  >
+    <!-- Logo -->
+    <div class="flex h-14 items-center justify-center border-b">
+      <!-- Lucide: Command -->
+      <span class="flex h-8 w-8 items-center justify-center rounded-md bg-primary text-sm font-bold text-primary-foreground">
+        C
+      </span>
+    </div>
+
+    <!-- Nav Items -->
+    <nav class="flex flex-1 flex-col gap-1 p-2">
+      {#each items as item}
+        <a
+          href={item.href}
+          class={cn(
+            'flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors',
+            item.active
+              ? 'bg-muted font-medium text-foreground'
+              : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+          )}
+          title={item.label}
+        >
+          <!-- Icon -->
+          <DynamicIcon name={item.icon} size={20} />
+          {#if expanded}
+            <span class="truncate">{item.label}</span>
+          {/if}
+        </a>
+      {/each}
+    </nav>
+  </aside>
+
+  <!-- Main Content -->
+  <main class="flex-1 overflow-y-auto">
+    {@render children?.()}
+  </main>
+</div>