@xbg.solutions/create-frontend 1.1.1 → 1.2.0

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

@@ -0,0 +1,201 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Props {
+		class?: string;
+		onSave?: () => void;
+	}
+
+	const { class: className, onSave }: Props = $props();
+
+	// Basic information state
+	let username = $state('kathypacheco');
+	let firstName = $state('Kathy');
+	let lastName = $state('Pacheco');
+	let email = $state('kathy@example.com');
+
+	// Change password state
+	let currentPassword = $state('');
+	let newPassword = $state('');
+	let confirmPassword = $state('');
+
+	// Advanced settings state
+	let dataExportAccess = $state(true);
+	let allowAdminToAddMembers = $state(true);
+	let enableTwoFactorAuth = $state(true);
+
+	function handleSave() {
+		onSave?.();
+	}
+</script>
+
+<div class={cn('space-y-6', className)}>
+	<!-- Basic Information Section -->
+	<div class="rounded-lg border bg-background p-4 sm:p-6">
+		<div class="flex flex-col gap-6 sm:grid sm:grid-cols-[200px_1fr] sm:gap-6">
+			<div>
+				<h3 class="text-lg font-semibold">Basic information</h3>
+				<p class="mt-2 text-sm text-muted-foreground">Update your profile details.</p>
+			</div>
+
+			<div class="space-y-4">
+				<div>
+					<label class="block text-sm font-medium mb-2">Username</label>
+					<input
+						type="text"
+						bind:value={username}
+						placeholder="Username"
+						class="w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring"
+					/>
+				</div>
+
+				<div class="grid grid-cols-2 gap-4">
+					<div>
+						<label class="block text-sm font-medium mb-2">First name</label>
+						<input
+							type="text"
+							bind:value={firstName}
+							placeholder="First 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">Last name</label>
+						<input
+							type="text"
+							bind:value={lastName}
+							placeholder="Last 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>
+
+				<div>
+					<label class="block text-sm font-medium mb-2">Email address</label>
+					<input
+						type="email"
+						bind:value={email}
+						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 class="flex justify-end pt-2">
+					<Button onclick={handleSave}>
+						Save changes
+					</Button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- Change Password Section -->
+	<div class="rounded-lg border bg-background p-4 sm:p-6">
+		<div class="flex flex-col gap-6 sm:grid sm:grid-cols-[200px_1fr] sm:gap-6">
+			<div>
+				<h3 class="text-lg font-semibold">Change password</h3>
+				<p class="mt-2 text-sm text-muted-foreground">Update your account password.</p>
+			</div>
+
+			<div class="space-y-4">
+				<div>
+					<label class="block text-sm font-medium mb-2">Current password</label>
+					<input
+						type="password"
+						bind:value={currentPassword}
+						placeholder="Enter current password"
+						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">New password</label>
+					<input
+						type="password"
+						bind:value={newPassword}
+						placeholder="Enter new password"
+						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">Confirm password</label>
+					<input
+						type="password"
+						bind:value={confirmPassword}
+						placeholder="Confirm new password"
+						class="w-full rounded-md border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring"
+					/>
+				</div>
+
+				<div class="flex justify-end pt-2">
+					<Button onclick={handleSave}>
+						Save changes
+					</Button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- Advanced Settings Section -->
+	<div class="rounded-lg border bg-background p-4 sm:p-6">
+		<div class="flex flex-col gap-6 sm:grid sm:grid-cols-[200px_1fr] sm:gap-6">
+			<div>
+				<h3 class="text-lg font-semibold">Advanced settings</h3>
+				<p class="mt-2 text-sm text-muted-foreground">Manage additional account options.</p>
+			</div>
+
+			<div class="space-y-4">
+				<!-- Data Export Access -->
+				<div class="flex items-start gap-3">
+					<input
+						type="checkbox"
+						bind:checked={dataExportAccess}
+						id="data-export"
+						class="mt-1 rounded border bg-background"
+					/>
+					<div class="flex-1">
+						<label for="data-export" class="text-sm font-medium cursor-pointer block">Data Export Access</label>
+						<p class="text-xs text-muted-foreground mt-1">Allow export of personal data and backups.</p>
+					</div>
+				</div>
+
+				<!-- Allow Admin to Add Members -->
+				<div class="flex items-start gap-3">
+					<input
+						type="checkbox"
+						bind:checked={allowAdminToAddMembers}
+						id="admin-members"
+						class="mt-1 rounded border bg-background"
+					/>
+					<div class="flex-1">
+						<label for="admin-members" class="text-sm font-medium cursor-pointer block">Allow Admin to Add Members</label>
+						<p class="text-xs text-muted-foreground mt-1">Admins can invite and manage members.</p>
+					</div>
+				</div>
+
+				<!-- Enable Two-Factor Authentication -->
+				<div class="flex items-start gap-3">
+					<input
+						type="checkbox"
+						bind:checked={enableTwoFactorAuth}
+						id="two-factor"
+						class="mt-1 rounded border bg-background"
+					/>
+					<div class="flex-1">
+						<label for="two-factor" class="text-sm font-medium cursor-pointer block">Enable Two-Factor Authentication</label>
+						<p class="text-xs text-muted-foreground mt-1">Require 2FA for added account security.</p>
+					</div>
+				</div>
+
+				<div class="flex justify-end pt-2">
+					<Button onclick={handleSave}>
+						Save changes
+					</Button>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,156 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface ApiRow {
+		name: string;
+		date: string;
+		status: 'Active' | 'Revoked' | 'Disabled' | 'Sent';
+		actions?: () => void;
+	}
+
+	interface Props {
+		class?: string;
+		publicApis?: ApiRow[];
+		privateApis?: ApiRow[];
+		onNewPublic?: () => void;
+		onNewPrivate?: () => void;
+	}
+
+	const {
+		class: className,
+		publicApis = [
+			{ name: 'Table Cell Text', date: 'Sep 6, 2024 2:08 am', status: 'Active' },
+			{ name: 'Table Cell Text', date: 'Sep 12, 2024 2:07 pm', status: 'Active' },
+			{ name: 'User Data API', date: 'Aug 20, 2024 7:59 am', status: 'Revoked' }
+		],
+		privateApis = [
+			{ name: 'Webhook Manager', date: 'Sep 10, 2024 3:45 pm', status: 'Active' },
+			{ name: 'Analytics Engine', date: 'Sep 5, 2024 11:22 am', status: 'Active' },
+			{ name: 'Billing API', date: 'Aug 19, 2024 8:51 pm', status: 'Disabled' }
+		],
+		onNewPublic,
+		onNewPrivate
+	}: Props = $props();
+
+	function getStatusBadgeClass(status: string): string {
+		if (status === 'Active') {
+			return 'bg-foreground text-background text-xs px-2 py-0.5 rounded-full';
+		} else if (status === 'Revoked') {
+			return 'text-foreground text-xs';
+		} else if (status === 'Disabled') {
+			return 'text-destructive text-xs';
+		}
+		return 'text-xs';
+	}
+
+	// SVG Icons
+	function MoreIcon() {
+		return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>`;
+	}
+</script>
+
+<div class={cn('space-y-6', className)}>
+	<!-- Header -->
+	<div class="flex items-center justify-between">
+		<div>
+			<h2 class="text-2xl font-semibold">API Settings</h2>
+			<p class="mt-1 text-sm text-muted-foreground">Manage your API keys and integrations.</p>
+		</div>
+		<Button variant="outline">
+			Contact Support
+		</Button>
+	</div>
+
+	<!-- Public APIs Section -->
+	<div class="rounded-lg border bg-background p-4 sm:p-6">
+		<div class="flex items-center justify-between mb-6">
+			<div>
+				<h3 class="text-lg font-semibold">Public APIs</h3>
+				<p class="mt-1 text-sm text-muted-foreground">Your public API endpoints.</p>
+			</div>
+			<Button onclick={onNewPublic}>
+				+ New
+			</Button>
+		</div>
+
+		<div class="overflow-x-auto">
+			<table class="w-full text-sm">
+				<thead>
+					<tr class="border-b">
+						<th class="text-left text-xs text-muted-foreground font-medium pb-2">API Name</th>
+						<th class="text-left text-xs text-muted-foreground font-medium pb-2">Date of Creation</th>
+						<th class="text-left text-xs text-muted-foreground font-medium pb-2">Status</th>
+						<th class="text-left text-xs text-muted-foreground font-medium pb-2">Head Text</th>
+						<th class="text-left text-xs text-muted-foreground font-medium pb-2"></th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each publicApis as api (api.name)}
+						<tr class="border-b">
+							<td class="py-3">{api.name}</td>
+							<td class="py-3 text-muted-foreground">{api.date}</td>
+							<td class="py-3">
+								<span class={getStatusBadgeClass(api.status)}>
+									{api.status}
+								</span>
+							</td>
+							<td class="py-3 text-muted-foreground">—</td>
+							<td class="py-3 text-right">
+								<button class="text-muted-foreground hover:text-foreground transition-colors">
+									{@html MoreIcon()}
+								</button>
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	</div>
+
+	<!-- Private APIs Section -->
+	<div class="rounded-lg border bg-background p-4 sm:p-6">
+		<div class="flex items-center justify-between mb-6">
+			<div>
+				<h3 class="text-lg font-semibold">Private APIs</h3>
+				<p class="mt-1 text-sm text-muted-foreground">Your private API endpoints.</p>
+			</div>
+			<Button onclick={onNewPrivate}>
+				+ New
+			</Button>
+		</div>
+
+		<div class="overflow-x-auto">
+			<table class="w-full text-sm">
+				<thead>
+					<tr class="border-b">
+						<th class="text-left text-xs text-muted-foreground font-medium pb-2">API Name</th>
+						<th class="text-left text-xs text-muted-foreground font-medium pb-2">Date of Creation</th>
+						<th class="text-left text-xs text-muted-foreground font-medium pb-2">Status</th>
+						<th class="text-left text-xs text-muted-foreground font-medium pb-2">Head Text</th>
+						<th class="text-left text-xs text-muted-foreground font-medium pb-2"></th>
+					</tr>
+				</thead>
+				<tbody>
+					{#each privateApis as api (api.name)}
+						<tr class="border-b">
+							<td class="py-3">{api.name}</td>
+							<td class="py-3 text-muted-foreground">{api.date}</td>
+							<td class="py-3">
+								<span class={getStatusBadgeClass(api.status)}>
+									{api.status}
+								</span>
+							</td>
+							<td class="py-3 text-muted-foreground">—</td>
+							<td class="py-3 text-right">
+								<button class="text-muted-foreground hover:text-foreground transition-colors">
+									{@html MoreIcon()}
+								</button>
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</div>
+	</div>
+</div>

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

@@ -0,0 +1,175 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+	import { Button } from '$lib/components/ui';
+
+	interface Integration {
+		name: string;
+		description?: string;
+		logoUrl?: string;
+		enabled?: boolean;
+		href?: string;
+	}
+
+	interface Props {
+		class?: string;
+		integrations?: Integration[];
+		onCreate?: () => void;
+		onExport?: () => void;
+	}
+
+	const defaultIntegrations: Integration[] = [
+		{ name: 'Facebook', enabled: false },
+		{ name: 'GitHub', enabled: false },
+		{ name: 'WhatsApp', enabled: false },
+		{ name: 'Figma', enabled: false },
+		{ name: 'Google', enabled: false },
+		{ name: 'Pinterest', enabled: false },
+		{ name: 'Messenger', enabled: false },
+		{ name: 'PayPal', enabled: false },
+		{ name: 'Vimeo', enabled: false }
+	];
+
+	const {
+		class: className,
+		integrations = defaultIntegrations,
+		onCreate,
+		onExport
+	}: Props = $props();
+
+	let activeFilter = $state<'All' | 'Active' | 'Inactive'>('All');
+	let searchQuery = $state('');
+	let enabledStates = $state<Record<string, boolean>>(
+		Object.fromEntries(integrations.map((int, idx) => [`${idx}`, int.enabled ?? false]))
+	);
+
+	$derived filteredIntegrations = integrations.filter((int, idx) => {
+		const isEnabled = enabledStates[`${idx}`];
+		const matchesFilter =
+			activeFilter === 'All' ||
+			(activeFilter === 'Active' && isEnabled) ||
+			(activeFilter === 'Inactive' && !isEnabled);
+
+		const matchesSearch = int.name.toLowerCase().includes(searchQuery.toLowerCase());
+
+		return matchesFilter && matchesSearch;
+	});
+
+	// SVG Icons
+	function ExternalLinkIcon() {
+		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"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>`;
+	}
+
+	function SettingsIcon() {
+		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="3"/><path d="M12 1v6m0 6v6M4.22 4.22l4.24 4.24m5.08 5.08l4.24 4.24M1 12h6m6 0h6M4.22 19.78l4.24-4.24m5.08-5.08l4.24-4.24"/></svg>`;
+	}
+
+	function toggleIntegration(idx: number) {
+		enabledStates[`${idx}`] = !enabledStates[`${idx}`];
+	}
+</script>
+
+<div class={cn('space-y-6', className)}>
+	<!-- Header -->
+	<div class="flex items-center justify-between">
+		<h2 class="text-2xl font-semibold">Integrations</h2>
+		<div class="flex gap-2">
+			<Button variant="outline" onclick={onExport}>
+				Export
+			</Button>
+			<Button onclick={onCreate}>
+				Create new
+			</Button>
+		</div>
+	</div>
+
+	<!-- Filter Tabs and Search -->
+	<div class="flex items-center justify-between gap-4">
+		<div class="flex gap-1 p-1 bg-muted rounded-md">
+			<button
+				onclick={() => (activeFilter = 'All')}
+				class={cn(
+					'px-3 py-1 rounded text-sm font-medium transition-colors',
+					activeFilter === 'All' ? 'bg-background shadow-sm' : 'text-muted-foreground hover:text-foreground'
+				)}
+			>
+				All
+			</button>
+			<button
+				onclick={() => (activeFilter = 'Active')}
+				class={cn(
+					'px-3 py-1 rounded text-sm font-medium transition-colors',
+					activeFilter === 'Active' ? 'bg-background shadow-sm' : 'text-muted-foreground hover:text-foreground'
+				)}
+			>
+				Active
+			</button>
+			<button
+				onclick={() => (activeFilter = 'Inactive')}
+				class={cn(
+					'px-3 py-1 rounded text-sm font-medium transition-colors',
+					activeFilter === 'Inactive' ? 'bg-background shadow-sm' : 'text-muted-foreground hover:text-foreground'
+				)}
+			>
+				Inactive
+			</button>
+		</div>
+
+		<input
+			type="search"
+			bind:value={searchQuery}
+			placeholder="Search integrations..."
+			class="w-48 rounded-md border bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring"
+		/>
+	</div>
+
+	<!-- Integration Cards Grid -->
+	<div class="grid gap-4 sm:grid-cols-3">
+		{#each filteredIntegrations as integration, idx (integration.name)}
+			{@const globalIdx = integrations.indexOf(integration)}
+			<div class="rounded-lg border bg-background p-4">
+				<!-- Top Row with Logo and External Link -->
+				<div class="flex items-center justify-between mb-4">
+					<div class="w-8 h-8 rounded bg-muted flex-shrink-0"></div>
+					<button class="text-muted-foreground hover:text-foreground transition-colors">
+						{@html ExternalLinkIcon()}
+					</button>
+				</div>
+
+				<!-- Title and Description -->
+				<div class="mb-4">
+					<h3 class="text-sm font-semibold">{integration.name}</h3>
+					<p class="text-xs text-muted-foreground mt-1">{integration.description || 'Connect and manage integrations'}</p>
+				</div>
+
+				<!-- Bottom Row with Settings Button and Toggle -->
+				<div class="flex items-center justify-between">
+					<Button variant="outline" size="sm">
+						⚙ Settings
+					</Button>
+
+					<!-- Custom Toggle Switch -->
+					<button
+						onclick={() => toggleIntegration(globalIdx)}
+						class={cn(
+							'relative inline-flex h-5 w-9 items-center rounded-full transition-colors',
+							enabledStates[`${globalIdx}`] ? 'bg-foreground' : 'bg-muted'
+						)}
+					>
+						<span
+							class={cn(
+								'inline-block h-4 w-4 transform rounded-full bg-background transition-transform',
+								enabledStates[`${globalIdx}`] ? 'translate-x-4' : 'translate-x-0.5'
+							)}
+						></span>
+					</button>
+				</div>
+			</div>
+		{/each}
+	</div>
+
+	{#if filteredIntegrations.length === 0}
+		<div class="text-center py-12">
+			<p class="text-muted-foreground">No integrations found</p>
+		</div>
+	{/if}
+</div>