add example to introduction

ieedan · Dec 28, 2024 · c419ca7 · c419ca7
1 parent 1f69318
commit c419ca7
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 7 deletions.
diff --git a/src/lib/components/docs/examples/code-block.svelte b/src/lib/components/docs/examples/code-block.svelte
@@ -17,5 +17,5 @@
 		</div>
 		<Copy {code} class="size-7" />
 	</div>
-	<Code lang="svelte" hideCopy class="border-none" {code} />
+	<Code lang="svelte" hideCopy class="border-none" {code} highlight={[2, 5]} />
 </div>
diff --git a/src/lib/components/docs/examples/editor-file-tree.svelte b/src/lib/components/docs/examples/editor-file-tree.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+	import * as TreeView from '$lib/components/ui/tree-view';
+</script>
+
+<div class="w-full border border-border">
+	<TreeView.Root class="p-4">
+		<TreeView.Folder name=".github" open={false}>
+			<TreeView.Folder name="workflows">
+				<TreeView.File name="ci.yml" />
+			</TreeView.Folder>
+		</TreeView.Folder>
+		<TreeView.Folder name=".svelte-kit" open={false} class="text-muted-foreground"
+		></TreeView.Folder>
+		<TreeView.Folder name="node_modules" open={false} class="text-muted-foreground">
+			<TreeView.Folder name="bits-ui"></TreeView.Folder>
+		</TreeView.Folder>
+		<TreeView.Folder name="src">
+			<TreeView.Folder name="lib">
+				<TreeView.Folder name="components">
+					<TreeView.Folder name="ui">
+						<TreeView.Folder name="collapsible" open={false}></TreeView.Folder>
+						<TreeView.Folder name="tree-view" open={false}></TreeView.Folder>
+					</TreeView.Folder>
+				</TreeView.Folder>
+				<TreeView.Folder name="utils">
+					<TreeView.File name="utils.ts" />
+				</TreeView.Folder>
+			</TreeView.Folder>
+			<TreeView.Folder name="routes">
+				<TreeView.File name="+layout.svelte" />
+				<TreeView.File name="+page.svelte" />
+			</TreeView.Folder>
+			<TreeView.File name="app.css" />
+			<TreeView.File name="app.d.ts" />
+			<TreeView.File name="app.html" />
+		</TreeView.Folder>
+		<TreeView.Folder name="static" open={false}>
+			<TreeView.File name="favicon.png" />
+		</TreeView.Folder>
+		<TreeView.File name=".gitignore" />
+		<TreeView.File name=".npmrc" />
+		<TreeView.File name=".prettierignore" />
+		<TreeView.File name=".prettierrc" />
+		<TreeView.File name="components.json" />
+		<TreeView.File name="eslint.config.js" />
+		<TreeView.File name="LICENSE" />
+		<TreeView.File name="package.json" />
+		<TreeView.File name="pnpm-lock.yaml" />
+		<TreeView.File name="postcss.config.js" />
+		<TreeView.File name="README.md" />
+		<TreeView.File name="svelte.config.js" />
+		<TreeView.File name="tsconfig.json" />
+		<TreeView.File name="vite.config.ts" />
+		<TreeView.File name="tailwind.config.ts" />
+	</TreeView.Root>
+</div>
diff --git a/src/lib/components/docs/examples/index.ts b/src/lib/components/docs/examples/index.ts
@@ -2,5 +2,6 @@ import LoginForm from './login-form.svelte';
 import ConfigureDevice from './configure-device.svelte';
 import PhoneNumberSetting from './phone-number-setting.svelte';
 import CodeBlock from './code-block.svelte';
+import EditorFileTree from './editor-file-tree.svelte';
 
-export { LoginForm, ConfigureDevice, PhoneNumberSetting, CodeBlock };
+export { LoginForm, ConfigureDevice, PhoneNumberSetting, CodeBlock, EditorFileTree };
diff --git a/src/lib/components/ui/tree-view/tree-view-folder.svelte b/src/lib/components/ui/tree-view/tree-view-folder.svelte
@@ -2,19 +2,21 @@
 	import type { Snippet } from 'svelte';
 	import * as Collapsible from '$lib/components/ui/collapsible/index.js';
 	import { Folder, FolderOpen } from 'lucide-svelte';
+	import { cn } from '$lib/utils/utils';
 
 	type Props = {
 		name: string;
 		open?: boolean;
+		class?: string;
 		icon?: Snippet<[{ name: string; open: boolean }]>;
 		children?: Snippet<[]>;
 	};
 
-	let { name, open = $bindable(true), icon, children }: Props = $props();
+	let { name, open = $bindable(true), class: className, icon, children }: Props = $props();
 </script>
 
 <Collapsible.Root bind:open>
-	<Collapsible.Trigger class="flex place-items-center gap-1">
+	<Collapsible.Trigger class={cn('flex place-items-center gap-1', className)}>
 		{#if icon}
 			{@render icon({ name, open })}
 		{:else if open}

diff --git a/src/lib/components/ui/tree-view/tree-view.svelte b/src/lib/components/ui/tree-view/tree-view.svelte
@@ -1,13 +1,15 @@
 <script lang="ts">
+	import { cn } from '$lib/utils/utils';
 	import type { Snippet } from 'svelte';
 
 	type Props = {
+		class?: string;
 		children?: Snippet<[]>;
 	};
 
-	let { children }: Props = $props();
+	let { children, class: className }: Props = $props();
 </script>
 
-<div class="flex flex-col">
+<div class={cn('flex flex-col', className)}>
 	{@render children?.()}
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -3,7 +3,8 @@
 		LoginForm,
 		ConfigureDevice,
 		PhoneNumberSetting,
-		CodeBlock
+		CodeBlock,
+		EditorFileTree
 	} from '$lib/components/docs/examples';
 	import ShadcnSvelteExtras from '$lib/components/shadcn-svelte-extras.svelte';
 	import { Snippet } from '$lib/components/ui/snippet';
@@ -23,5 +24,6 @@
 		<PhoneNumberSetting />
 		<Snippet text="npx shadcn-svelte@next init" />
 		<ConfigureDevice />
+		<EditorFileTree />
 	</div>
 </div>