first init

2026-06-08 11:37:14 +08:00
commit 94ecbe5887
1058 changed files with 87732 additions and 0 deletions
@@ -0,0 +1,69 @@
+<script lang="ts" setup>
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Preview,
+  SectionTitle,
+  SectionContent,
+  PreviewCode,
+} from "@/components/docs";
+</script>
+
+<template>
+  <div id="preview" class="-mt-20">
+    <Preview>
+      <template #preview>
+        <Textarea class="w-86" placeholder="Type your message here." />
+      </template>
+      <template #code>
+        <PreviewCode>
+          {{ `
+          <Textarea class="w-86" placeholder="Type your message here." />
+          ` }}
+        </PreviewCode>
+      </template>
+    </Preview>
+  </div>
+  <div id="installation">
+    <SectionTitle>Installation</SectionTitle>
+    <SectionContent>
+      Copy and paste the following code into your project.
+    </SectionContent>
+    <PreviewCode title="components/ui/textarea/Textarea.vue">
+      {{ `
+      <script lang="ts" setup>
+import { cn } from "@mykopkb/core/utils/cn";
+import { textarea } from "@mykopkb/core/styles/textarea.styles";
+
+const { class: className, ...props } = defineProps<{
+  class?: string;
+}>();
+</script>
+
+      <template>
+        <textarea :class="cn(textarea, className)" v-bind="{ ...props }" />
+      </template>
+      ` }}
+    </PreviewCode>
+    <PreviewCode title="components/ui/textarea/index.ts">
+      {{ `
+      export { default as Textarea } from "./Textarea.vue";
+      ` }}
+    </PreviewCode>
+    <SectionContent>
+      Update the import paths to match your project setup.
+    </SectionContent>
+  </div>
+  <div id="usage">
+    <SectionTitle>Usage</SectionTitle>
+    <PreviewCode>
+      {{ `
+      import { Textarea } from "@/components/ui/textarea";
+      ` }}
+    </PreviewCode>
+    <PreviewCode>
+      {{ `
+      <Textarea class="w-86" placeholder="Type your message here." />
+      ` }}
+    </PreviewCode>
+  </div>
+</template>