@xbg.solutions/create-frontend 1.1.2 → 1.2.0

package/src/registry/blocks/blog-section/BlogSection01.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface BlogPost {
+		title: string;
+		excerpt?: string;
+		date?: string;
+		category?: string;
+		imageUrl?: string;
+		author?: { name: string; role?: string; avatarUrl?: string };
+		href?: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		posts?: BlogPost[];
+		eyebrow?: string;
+	}
+
+	const defaultPosts: BlogPost[] = [
+		{
+			title: 'Getting Started with shadcn/ui: A Complete Guide',
+			date: 'Mar 15, 2024',
+			category: 'Tutorial',
+			excerpt:
+				"Learn how to set up and maximize your development workflow with shadcn/ui's powerful component library."
+		},
+		{
+			title: 'Building Dark Mode with Next.js and Tailwind CSS',
+			date: 'Mar 12, 2024',
+			category: 'Development',
+			excerpt:
+				'Implement a seamless dark mode toggle in your Next.js application using Tailwind CSS and shadcn/ui.'
+		},
+		{
+			title: 'Mastering React Server Components Effectively',
+			date: 'Mar 8, 2024',
+			category: 'Advanced',
+			excerpt:
+				"Deep dive into React Server Components and learn how they can improve your application's performance."
+		},
+		{
+			title: 'The Future of Web Development in 2024',
+			date: 'Mar 5, 2024',
+			category: 'Insights',
+			excerpt: 'Explore the latest trends and technologies shaping the future of web development this year.'
+		}
+	];
+
+	let { class: className, title = "Learn what's new", description = 'Add a concise value statement...', posts = defaultPosts, eyebrow = 'Blog Section' }: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-6xl text-center">
+		<p class="text-xs uppercase tracking-widest text-muted-foreground">{eyebrow}</p>
+		<h2 class="mt-2 text-3xl sm:text-4xl font-bold tracking-tight">{title}</h2>
+		<p class="mt-3 text-muted-foreground">{description}</p>
+	</div>
+
+	<div class="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+		{#each posts as post (post.title)}
+			<article class="flex flex-col">
+				<div class="aspect-video w-full rounded-lg bg-muted flex items-center justify-center">
+					<svg
+						width="24"
+						height="24"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="1.5"
+						class="text-muted-foreground"
+					>
+						<rect x="3" y="3" width="18" height="18" rx="2" />
+						<circle cx="8.5" cy="8.5" r="1.5" />
+						<polyline points="21 15 16 10 5 21" />
+					</svg>
+				</div>
+				<div class="mt-3">
+					<div class="flex items-center text-xs text-muted-foreground">
+						{#if post.date}
+							<span>{post.date}</span>
+						{/if}
+						{#if post.date && post.category}
+							<span class="mx-1">·</span>
+						{/if}
+						{#if post.category}
+							<span>{post.category}</span>
+						{/if}
+					</div>
+					<h3 class="mt-2 font-semibold leading-snug">{post.title}</h3>
+					{#if post.excerpt}
+						<p class="mt-1 text-sm text-muted-foreground">{post.excerpt}</p>
+					{/if}
+				</div>
+			</article>
+		{/each}
+	</div>
+</section>

package/src/registry/blocks/blog-section/BlogSection02.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface BlogPost {
+		title: string;
+		excerpt?: string;
+		date?: string;
+		category?: string;
+		imageUrl?: string;
+		author?: { name: string; role?: string; avatarUrl?: string };
+		href?: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		posts?: BlogPost[];
+		eyebrow?: string;
+	}
+
+	const defaultPosts: BlogPost[] = [
+		{
+			title: 'Getting Started with shadcn/ui: A Complete Guide',
+			date: 'Mar 15, 2024',
+			category: 'Tutorial',
+			excerpt:
+				"Learn how to set up and maximize your development workflow with shadcn/ui's powerful component library.",
+			author: { name: 'John Doe', role: 'Developer' }
+		},
+		{
+			title: 'Building Dark Mode with Next.js and Tailwind CSS',
+			date: 'Mar 12, 2024',
+			category: 'Development',
+			excerpt:
+				'Implement a seamless dark mode toggle in your Next.js application using Tailwind CSS and shadcn/ui.',
+			author: { name: 'Jane Smith', role: 'Designer' }
+		},
+		{
+			title: 'Mastering React Server Components Effectively',
+			date: 'Mar 8, 2024',
+			category: 'Advanced',
+			excerpt:
+				"Deep dive into React Server Components and learn how they can improve your application's performance.",
+			author: { name: 'Alice Johnson', role: 'Developer' }
+		}
+	];
+
+	let { class: className, title = 'Latest Articles', description = 'Explore our recent posts and insights', posts = defaultPosts, eyebrow = 'Blog Section' }: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-6xl">
+		<div>
+			<p class="text-xs uppercase tracking-widest text-muted-foreground">{eyebrow}</p>
+			<h2 class="mt-2 text-3xl sm:text-4xl font-bold tracking-tight">{title}</h2>
+			<p class="mt-3 text-muted-foreground">{description}</p>
+		</div>
+
+		<div class="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-3">
+			{#each posts as post (post.title)}
+				<article class="flex flex-col">
+					<div class="flex items-center text-xs text-muted-foreground">
+						{#if post.date}
+							<span>{post.date}</span>
+						{/if}
+						{#if post.date && post.category}
+							<span class="mx-1">·</span>
+						{/if}
+						{#if post.category}
+							<span>{post.category}</span>
+						{/if}
+					</div>
+					<h3 class="mt-2 text-lg font-semibold leading-snug">{post.title}</h3>
+					{#if post.excerpt}
+						<p class="mt-2 text-sm text-muted-foreground flex-1">{post.excerpt}</p>
+					{/if}
+					{#if post.author}
+						<div class="mt-4 flex items-center gap-3">
+							<div class="h-8 w-8 rounded-full bg-muted flex-shrink-0" />
+							<div class="min-w-0">
+								<p class="text-sm font-medium truncate">{post.author.name}</p>
+								{#if post.author.role}
+									<p class="text-xs text-muted-foreground truncate">{post.author.role}</p>
+								{/if}
+							</div>
+						</div>
+					{/if}
+				</article>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/blog-section/BlogSection03.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface BlogPost {
+		title: string;
+		excerpt?: string;
+		date?: string;
+		category?: string;
+		imageUrl?: string;
+		author?: { name: string; role?: string; avatarUrl?: string };
+		href?: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		posts?: BlogPost[];
+		eyebrow?: string;
+	}
+
+	const defaultPosts: BlogPost[] = [
+		{
+			title: 'Getting Started with shadcn/ui: A Complete Guide',
+			date: 'Mar 15, 2024',
+			category: 'Tutorial',
+			excerpt:
+				"Learn how to set up and maximize your development workflow with shadcn/ui's powerful component library."
+		},
+		{
+			title: 'Building Dark Mode with Next.js and Tailwind CSS',
+			date: 'Mar 12, 2024',
+			category: 'Development',
+			excerpt:
+				'Implement a seamless dark mode toggle in your Next.js application using Tailwind CSS and shadcn/ui.'
+		},
+		{
+			title: 'Mastering React Server Components Effectively',
+			date: 'Mar 8, 2024',
+			category: 'Advanced',
+			excerpt:
+				"Deep dive into React Server Components and learn how they can improve your application's performance."
+		}
+	];
+
+	let { class: className, title = 'Featured Articles', description = 'Discover in-depth guides and tutorials', posts = defaultPosts, eyebrow = 'Blog Section' }: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-6xl text-center">
+		<p class="text-xs uppercase tracking-widest text-muted-foreground">{eyebrow}</p>
+		<h2 class="mt-2 text-3xl sm:text-4xl font-bold tracking-tight">{title}</h2>
+		<p class="mt-3 text-muted-foreground">{description}</p>
+	</div>
+
+	<div class="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-3">
+		{#each posts as post (post.title)}
+			<article class="flex flex-col">
+				<div class="flex items-center text-xs text-muted-foreground">
+					{#if post.date}
+						<span>{post.date}</span>
+					{/if}
+					{#if post.date && post.category}
+						<span class="mx-1">·</span>
+					{/if}
+					{#if post.category}
+						<span>{post.category}</span>
+					{/if}
+				</div>
+				<h3 class="mt-2 font-semibold leading-snug">{post.title}</h3>
+				{#if post.excerpt}
+					<p class="mt-1 text-sm text-muted-foreground">{post.excerpt}</p>
+				{/if}
+				<div class="mt-4 aspect-video w-full rounded-lg bg-muted flex items-center justify-center">
+					<svg
+						width="24"
+						height="24"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="1.5"
+						class="text-muted-foreground"
+					>
+						<rect x="3" y="3" width="18" height="18" rx="2" />
+						<circle cx="8.5" cy="8.5" r="1.5" />
+						<polyline points="21 15 16 10 5 21" />
+					</svg>
+				</div>
+			</article>
+		{/each}
+	</div>
+</section>

package/src/registry/blocks/blog-section/BlogSection04.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface BlogPost {
+		title: string;
+		excerpt?: string;
+		date?: string;
+		category?: string;
+		imageUrl?: string;
+		author?: { name: string; role?: string; avatarUrl?: string };
+		href?: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		posts?: BlogPost[];
+		eyebrow?: string;
+	}
+
+	const defaultPosts: BlogPost[] = [
+		{
+			title: 'Getting Started with shadcn/ui: A Complete Guide',
+			date: 'Mar 15, 2024',
+			category: 'Tutorial'
+		},
+		{
+			title: 'Building Dark Mode with Next.js and Tailwind CSS',
+			date: 'Mar 12, 2024',
+			category: 'Development'
+		},
+		{
+			title: 'Mastering React Server Components Effectively',
+			date: 'Mar 8, 2024',
+			category: 'Advanced'
+		},
+		{
+			title: 'The Future of Web Development in 2024',
+			date: 'Mar 5, 2024',
+			category: 'Insights'
+		}
+	];
+
+	let { class: className, title = 'Latest Blog Posts', description = 'Read our most recent articles', posts = defaultPosts.slice(0, 4), eyebrow = 'Blog Section' }: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-6xl">
+		<div class="flex items-end justify-between">
+			<div>
+				<p class="text-xs uppercase tracking-widest text-muted-foreground">{eyebrow}</p>
+				<h2 class="mt-2 text-3xl sm:text-4xl font-bold tracking-tight">{title}</h2>
+				<p class="mt-3 text-muted-foreground">{description}</p>
+			</div>
+			<a href="#" class="hidden sm:inline-block text-sm text-muted-foreground hover:text-foreground underline"
+				>View all articles</a
+			>
+		</div>
+
+		<div class="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-2">
+			{#each posts as post (post.title)}
+				<article class="flex flex-col overflow-hidden rounded-lg border">
+					<div class="aspect-video w-full bg-muted flex items-center justify-center">
+						<svg
+							width="24"
+							height="24"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="1.5"
+							class="text-muted-foreground"
+						>
+							<rect x="3" y="3" width="18" height="18" rx="2" />
+							<circle cx="8.5" cy="8.5" r="1.5" />
+							<polyline points="21 15 16 10 5 21" />
+						</svg>
+					</div>
+					<div class="p-4">
+						<h3 class="font-semibold leading-snug">{post.title}</h3>
+						<div class="mt-1 flex items-center text-xs text-muted-foreground">
+							{#if post.date}
+								<span>{post.date}</span>
+							{/if}
+							{#if post.date && post.category}
+								<span class="mx-1">·</span>
+							{/if}
+							{#if post.category}
+								<span>{post.category}</span>
+							{/if}
+						</div>
+					</div>
+				</article>
+			{/each}
+		</div>
+	</div>
+</section>

package/src/registry/blocks/blog-section/BlogSection05.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface BlogPost {
+		title: string;
+		excerpt?: string;
+		date?: string;
+		category?: string;
+		imageUrl?: string;
+		author?: { name: string; role?: string; avatarUrl?: string };
+		href?: string;
+	}
+
+	interface Props {
+		class?: string;
+		title?: string;
+		description?: string;
+		posts?: BlogPost[];
+		eyebrow?: string;
+	}
+
+	const defaultPosts: BlogPost[] = [
+		{
+			title: 'Getting Started with shadcn/ui: A Complete Guide',
+			date: 'Mar 15, 2024',
+			category: 'Tutorial',
+			excerpt:
+				"Learn how to set up and maximize your development workflow with shadcn/ui's powerful component library.",
+			author: { name: 'John Doe', role: 'Developer' }
+		},
+		{
+			title: 'Building Dark Mode with Next.js and Tailwind CSS',
+			date: 'Mar 12, 2024',
+			category: 'Development',
+			excerpt:
+				'Implement a seamless dark mode toggle in your Next.js application using Tailwind CSS and shadcn/ui.',
+			author: { name: 'Jane Smith', role: 'Designer' }
+		},
+		{
+			title: 'Mastering React Server Components Effectively',
+			date: 'Mar 8, 2024',
+			category: 'Advanced',
+			excerpt:
+				"Deep dive into React Server Components and learn how they can improve your application's performance.",
+			author: { name: 'Alice Johnson', role: 'Developer' }
+		},
+		{
+			title: 'The Future of Web Development in 2024',
+			date: 'Mar 5, 2024',
+			category: 'Insights',
+			excerpt: 'Explore the latest trends and technologies shaping the future of web development this year.',
+			author: { name: 'John Doe', role: 'Developer' }
+		}
+	];
+
+	let { class: className, title = 'From the Blog', description = 'Stay updated with our latest insights', posts = defaultPosts, eyebrow = 'Blog Section' }: Props = $props();
+</script>
+
+<section class={cn('w-full bg-background py-16 px-4 sm:px-6 lg:px-8', className)}>
+	<div class="mx-auto max-w-6xl">
+		<div>
+			<p class="text-xs uppercase tracking-widest text-muted-foreground">{eyebrow}</p>
+			<h2 class="mt-2 text-3xl sm:text-4xl font-bold tracking-tight">{title}</h2>
+			<p class="mt-3 text-muted-foreground">{description}</p>
+		</div>
+
+		<div class="mt-8 flex flex-col divide-y border-t">
+			{#each posts as post (post.title)}
+				<article class="flex flex-col sm:flex-row gap-4 sm:gap-6 py-6">
+					<div class="w-full sm:w-40 flex-shrink-0">
+						<div class="aspect-video sm:aspect-square w-full rounded-lg bg-muted flex items-center justify-center">
+							<svg
+								width="24"
+								height="24"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="1.5"
+								class="text-muted-foreground"
+							>
+								<rect x="3" y="3" width="18" height="18" rx="2" />
+								<circle cx="8.5" cy="8.5" r="1.5" />
+								<polyline points="21 15 16 10 5 21" />
+							</svg>
+						</div>
+					</div>
+
+					<div class="flex flex-col flex-1 min-w-0">
+						<div class="flex items-center text-xs text-muted-foreground">
+							{#if post.date}
+								<span>{post.date}</span>
+							{/if}
+							{#if post.date && post.category}
+								<span class="mx-1">·</span>
+							{/if}
+							{#if post.category}
+								<span>{post.category}</span>
+							{/if}
+						</div>
+						<h3 class="mt-2 font-semibold leading-snug">{post.title}</h3>
+						{#if post.excerpt}
+							<p class="mt-2 text-sm text-muted-foreground flex-1">{post.excerpt}</p>
+						{/if}
+						{#if post.author}
+							<div class="mt-4 flex items-center gap-3">
+								<div class="h-8 w-8 rounded-full bg-muted flex-shrink-0" />
+								<div class="min-w-0">
+									<p class="text-sm font-medium truncate">{post.author.name}</p>
+									{#if post.author.role}
+										<p class="text-xs text-muted-foreground truncate">{post.author.role}</p>
+									{/if}
+								</div>
+							</div>
+						{/if}
+					</div>
+				</article>
+			{/each}
+		</div>
+	</div>
+</section>

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

@@ -0,0 +1,15 @@
+export { default as BlogSection01 } from './BlogSection01.svelte';
+export { default as BlogSection02 } from './BlogSection02.svelte';
+export { default as BlogSection03 } from './BlogSection03.svelte';
+export { default as BlogSection04 } from './BlogSection04.svelte';
+export { default as BlogSection05 } from './BlogSection05.svelte';
+
+export interface BlogPost {
+	title: string;
+	excerpt?: string;
+	date?: string;
+	category?: string;
+	imageUrl?: string;
+	author?: { name: string; role?: string; avatarUrl?: string };
+	href?: string;
+}

package/src/registry/blocks/buttons/ButtonBookmark.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		count?: number;
+		bookmarked?: boolean;
+		onbookmark?: () => void;
+	}
+
+	const { class: className = '', count = 24, bookmarked = false, onbookmark } = $props();
+
+	let bookmarkCount = $state(count);
+	let isBookmarked = $state(bookmarked);
+
+	const handleBookmark = () => {
+		isBookmarked = !isBookmarked;
+		bookmarkCount = isBookmarked ? bookmarkCount + 1 : bookmarkCount - 1;
+		onbookmark?.();
+	};
+</script>
+
+<button
+	type="button"
+	onclick={handleBookmark}
+	class={cn(
+		'inline-flex items-center gap-2 rounded-md border bg-background px-3 py-1.5 text-sm hover:bg-muted transition-colors',
+		isBookmarked && 'bg-muted',
+		className
+	)}
+>
+	<svg width="14" height="14" viewBox="0 0 24 24" fill={isBookmarked ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2">
+		<path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" />
+	</svg>
+	<span>Bookmark</span>
+	<span class="text-sm text-muted-foreground">{bookmarkCount}</span>
+</button>

package/src/registry/blocks/buttons/ButtonLike.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		count?: number;
+		liked?: boolean;
+		onlike?: () => void;
+	}
+
+	const { class: className = '', count = 24, liked = false, onlike } = $props();
+
+	let likeCount = $state(count);
+	let isLiked = $state(liked);
+
+	const handleLike = () => {
+		isLiked = !isLiked;
+		likeCount = isLiked ? likeCount + 1 : likeCount - 1;
+		onlike?.();
+	};
+</script>
+
+<button
+	type="button"
+	onclick={handleLike}
+	class={cn(
+		'inline-flex items-center gap-2 rounded-md border bg-background px-3 py-1.5 text-sm hover:bg-muted transition-colors',
+		isLiked && 'bg-muted',
+		className
+	)}
+>
+	<svg width="14" height="14" viewBox="0 0 24 24" fill={isLiked ? 'currentColor' : 'none'} stroke="currentColor" stroke-width="2">
+		<path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" />
+	</svg>
+	<span>Like</span>
+	<span class="text-sm text-muted-foreground">{likeCount}</span>
+</button>

package/src/registry/blocks/buttons/ButtonMenu.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		open?: boolean;
+		onToggle?: (open: boolean) => void;
+	}
+
+	const { class: className = '', open = false, onToggle } = $props();
+
+	let isOpen = $state(open);
+
+	const handleToggle = () => {
+		isOpen = !isOpen;
+		onToggle?.(isOpen);
+	};
+</script>
+
+<button
+	type="button"
+	onclick={handleToggle}
+	class={cn('flex h-9 w-9 items-center justify-center rounded-md border bg-background hover:bg-muted transition-colors', className)}
+>
+	{#if isOpen}
+		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+			<line x1="18" y1="6" x2="6" y2="18" />
+			<line x1="6" y1="6" x2="18" y2="18" />
+		</svg>
+	{:else}
+		<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+			<line x1="3" y1="6" x2="21" y2="6" />
+			<line x1="3" y1="12" x2="21" y2="12" />
+			<line x1="3" y1="18" x2="21" y2="18" />
+		</svg>
+	{/if}
+</button>

package/src/registry/blocks/buttons/ButtonSplitDropdown.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { cn } from '$lib/utils/cn';
+
+	interface Props {
+		class?: string;
+		label?: string;
+		onclick?: () => void;
+		onDropdown?: () => void;
+		open?: boolean;
+	}
+
+	const { class: className = '', label = 'Publish', onclick, onDropdown, open = false } = $props();
+
+	let isOpen = $state(open);
+
+	const handleDropdown = () => {
+		isOpen = !isOpen;
+		onDropdown?.();
+	};
+</script>
+
+<div class={cn('inline-flex rounded-md border overflow-hidden', className)}>
+	<button
+		type="button"
+		onclick={onclick}
+		class="flex items-center gap-2 px-3 py-1.5 text-sm bg-background hover:bg-muted transition-colors"
+	>
+		<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+			<path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" />
+			<path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" />
+		</svg>
+		<span>{label}</span>
+	</button>
+
+	<div class="border-l" />
+
+	<button
+		type="button"
+		onclick={handleDropdown}
+		class="flex items-center px-2 py-1.5 bg-background hover:bg-muted transition-colors"
+	>
+		<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+			<path d="m6 9 6 6 6-6" />
+		</svg>
+	</button>
+</div>