📃 Card, Input & Textarea docs

Author: ariflogs

CONTRIBUTING.md

@@ -1,3 +1,5 @@
+> ⚠️ This guide is old and may not be still relevant! I'll update this soon. 🙏
+
 # Contributing to RetroUI
 
 Thank you for your interest in contributing to RetroUI 🙏. I hope this guide to help you get started.

components/ComponentShowcase.tsx

@@ -9,17 +9,17 @@ interface IComponentShowcase extends HTMLAttributes<HTMLDivElement> {
 export function ComponentShowcase({ name }: IComponentShowcase) {
   const { preview: Preview, codeHtml } = componentConfig.registry[name];
   return (
-    <div>
+    <div className="space-y-6">
       <div>
         <H5>Preview</H5>
-        <div className="border rounded p-6">
+        <div className="mt-2 border rounded p-6">
           <Preview />
         </div>
       </div>
 
       <div>
         <H5>Code</H5>
-        <div className="border relative rounded p-4 bg-[#222222] text-zinc-200">
+        <div className="mt-2 border relative rounded p-6 bg-[#222222] text-zinc-200 overflow-auto">
           <code>
             <pre>{codeHtml}</pre>
           </code>

config/components.ts

@@ -59,7 +59,7 @@ export const componentConfig = {
     },
     "button-style-default": {
       name: "button-style-default",
-      preview: lazy(() => import("@/preview/components/badge-style-default")),
+      preview: lazy(() => import("@/preview/components/button-style-default")),
       codeHtml: `<button className="bg-primary-400 text-black px-6 py-2 text-base font-head border-2 border-black shadow-md hover:shadow-xs hover:bg-primary-500 transition-all">
     Click Me!
 </button>`,
@@ -79,6 +79,15 @@ export const componentConfig = {
     type="text"
     placeholder="type something..."
     className="px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-none focus:shadow-xs"
+/>`,
+    },
+    "textarea-style-default": {
+      name: "textarea-style-default",
+      preview: lazy(() => import("@/preview/components/textarea-style-default")),
+      codeHtml: `<textarea
+    placeholder="Enter text..."
+    rows="4"
+    class="px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-none focus:shadow-xs"
 />`,
     },
   },

content/docs/components/button.mdx

@@ -0,0 +1,9 @@
+---
+title: Default Button
+description: This bold button makes sure your users click on it and perform the actions you want! 🚀
+lastUpdated: 30 Sep, 2024
+---
+
+import {ComponentShowcase} from "@/components"
+
+<ComponentShowcase name="button-style-default" />

content/docs/components/card.mdx

@@ -0,0 +1,9 @@
+---
+title: Default Button
+description: This bold button makes sure your users click on it and perform the actions you want! 🚀
+lastUpdated: 30 Sep, 2024
+---
+
+import {ComponentShowcase} from "@/components"
+
+<ComponentShowcase name="card-style-default" />

content/docs/components/input.mdx

@@ -0,0 +1,9 @@
+---
+title: Default Button
+description: This bold button makes sure your users click on it and perform the actions you want! 🚀
+lastUpdated: 30 Sep, 2024
+---
+
+import {ComponentShowcase} from "@/components"
+
+<ComponentShowcase name="input-style-default" />

content/docs/components/textarea.mdx

@@ -0,0 +1,9 @@
+---
+title: Default Button
+description: This bold button makes sure your users click on it and perform the actions you want! 🚀
+lastUpdated: 30 Sep, 2024
+---
+
+import {ComponentShowcase} from "@/components"
+
+<ComponentShowcase name="textarea-style-default" />

content/docs/components/typography.mdx

@@ -0,0 +1,11 @@
+import React from "react";
+
+export default function TextareaStyleDefault() {
+  return (
+    <textarea
+      rows={4}
+      placeholder="type something..."
+      className="px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-none focus:shadow-xs"
+    />
+  );
+}