From 9c015067e3df1fea34526a14ee18584acd23bfc7 Mon Sep 17 00:00:00 2001
From: Roman Hrynevych <82209198+romanhrynevych@users.noreply.github.com>
Date: Thu, 15 Feb 2024 15:08:29 +0200
Subject: [PATCH] docs: add `Input with icon` example (#346)

---
 apps/www/__registry__/index.ts                     | 14 ++++++++++++++
 apps/www/src/content/docs/components/input.md      |  4 ++++
 .../lib/registry/default/example/InputWithIcon.vue | 13 +++++++++++++
 .../registry/new-york/example/InputWithIcon.vue    | 13 +++++++++++++
 4 files changed, 44 insertions(+)
 create mode 100644 apps/www/src/lib/registry/default/example/InputWithIcon.vue
 create mode 100644 apps/www/src/lib/registry/new-york/example/InputWithIcon.vue

diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 3bee58c3..1da86efe 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -443,6 +443,13 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/InputWithButton.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/InputWithButton.vue'],
     },
+    InputWithIcon: {
+      name: 'InputWithIcon',
+      type: 'components:example',
+      registryDependencies: ['input'],
+      component: () => import('../src/lib/registry/default/example/InputWithIcon.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/InputWithIcon.vue'],
+    },
     InputWithLabel: {
       name: 'InputWithLabel',
       type: 'components:example',
@@ -1362,6 +1369,13 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/InputWithButton.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/InputWithButton.vue'],
     },
+    InputWithIcon: {
+      name: 'InputWithIcon',
+      type: 'components:example',
+      registryDependencies: ['input'],
+      component: () => import('../src/lib/registry/new-york/example/InputWithIcon.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/InputWithIcon.vue'],
+    },
     InputWithLabel: {
       name: 'InputWithLabel',
       type: 'components:example',
diff --git a/apps/www/src/content/docs/components/input.md b/apps/www/src/content/docs/components/input.md
index d1614790..ae55f1d9 100644
--- a/apps/www/src/content/docs/components/input.md
+++ b/apps/www/src/content/docs/components/input.md
@@ -63,6 +63,10 @@ import { Input } from '@/components/ui/input'
 
 <ComponentPreview name="InputWithButton" class="max-w-xs" />
 
+### With Icon
+
+<ComponentPreview name="InputWithIcon" class="max-w-xs" />
+
 ### Form
 
 <ComponentPreview name="InputForm" />
diff --git a/apps/www/src/lib/registry/default/example/InputWithIcon.vue b/apps/www/src/lib/registry/default/example/InputWithIcon.vue
new file mode 100644
index 00000000..04d295ff
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/InputWithIcon.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { MagnifyingGlassIcon } from '@radix-icons/vue'
+import { Input } from '@/lib/registry/default/ui/input'
+</script>
+
+<template>
+  <div class="relative w-full max-w-sm items-center">
+    <Input id="search" type="text" placeholder="Search..." class="pl-10" />
+    <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
+      <MagnifyingGlassIcon class="size-6 text-muted-foreground" />
+    </span>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/InputWithIcon.vue b/apps/www/src/lib/registry/new-york/example/InputWithIcon.vue
new file mode 100644
index 00000000..6f61ef7d
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/InputWithIcon.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { MagnifyingGlassIcon } from '@radix-icons/vue'
+import { Input } from '@/lib/registry/new-york/ui/input'
+</script>
+
+<template>
+  <div class="relative w-full max-w-sm items-center">
+    <Input id="search" type="text" placeholder="Search..." class="pl-10" />
+    <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
+      <MagnifyingGlassIcon class="size-6 text-muted-foreground" />
+    </span>
+  </div>
+</template>