feat: create new component examples (#382)

docs/components/banners/hero.tsx

@@ -1,6 +1,7 @@
 import { Button } from '@openlite/ui'
 import Link from 'next/link'
 import InstallCommand from '../install-command'
+import { Arrow } from '../icons/arrow'
 
 export function Hero() {
   return (
@@ -23,6 +24,7 @@ export function Hero() {
             <Button asChild>
               <Link href="/docs">
                 Getting started
+                <Arrow />
               </Link>
             </Button>
             <InstallCommand />

docs/components/demo.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  Button,
+  Card,
+  CardContent,
+  Input,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@openlite/ui'
+import { AlertDemo } from './examples/alert'
+import { MultipleComponentDemo } from './examples/multiple-components'
+import { TableDemo } from './examples/table'
+
+export default function Component() {
+  const [activeTab, setActiveTab] = useState('account')
+
+  return (
+    <div className="w-full max-w-6xl mx-auto p-4 space-y-4">
+
+      <AlertDemo />
+      <div className="flex flex-col md:flex-row gap-5">
+        <Card>
+          <CardContent>
+            <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+              <TabsList className="w-full justify-start rounded-none border-b">
+                <TabsTrigger value="account" className="rounded-none">Account</TabsTrigger>
+                <TabsTrigger value="password" className="rounded-none">Password</TabsTrigger>
+              </TabsList>
+              <TabsContent value="account" className="p-4">
+                <h2 className="text-2xl font-bold mb-4">Login</h2>
+                <p className="text-gray-500 mb-4">Make changes to your account here. Click save when you're done.</p>
+                <div className="space-y-4">
+                  <div>
+                    <label htmlFor="name" className="block text-sm font-medium text-gray-700">Name</label>
+                    <Input id="name" defaultValue="Benjamin" />
+                  </div>
+                  <div>
+                    <label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</label>
+                    <Input type="password" id="username" defaultValue="*******" />
+                  </div>
+                  <Button>Login</Button>
+                </div>
+              </TabsContent>
+              <TabsContent value="password" className="p-4">
+                <h2 className="text-2xl font-bold mb-4">Create Account</h2>
+                <p className="text-gray-500 mb-4">Make changes to your account here. Click save when you're done.</p>
+                <div className="space-y-4">
+                  <div>
+                    <label htmlFor="name" className="block text-sm font-medium text-gray-700">Name</label>
+                    <Input id="name" defaultValue="Benjamin" />
+                  </div>
+                  <div>
+                    <label htmlFor="password" className="block text-sm font-medium text-gray-700">Password</label>
+                    <Input type="password" id="username" defaultValue="*******" />
+                  </div>
+                  <Button>Save account</Button>
+                </div>
+              </TabsContent>
+            </Tabs>
+          </CardContent>
+        </Card>
+        <MultipleComponentDemo />
+      </div>
+      <TableDemo />
+    </div>
+  )
+}

docs/components/examples/alert.tsx

@@ -0,0 +1,13 @@
+import { Alert, AlertDescription, AlertTitle } from '@openlite/ui'
+import { Chat } from '../icons/chat'
+
+export function AlertDemo() {
+  return (
+
+    <Alert>
+      <Chat />
+      <AlertTitle>You have a notification</AlertTitle>
+      <AlertDescription>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est, asperiores. </AlertDescription>
+    </Alert>
+  )
+}

docs/components/examples/dialog.tsx

@@ -0,0 +1,47 @@
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Input,
+  Label,
+} from '@openlite/ui'
+import { Copy } from '../icons/copy'
+
+export function DialogDemo() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button outline="default">Open Music</Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Share link music</DialogTitle>
+          <DialogDescription>
+            Anyone who has this link will be able to view this.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex items-center space-x-2">
+          <div className="grid flex-1 gap-2">
+            <Label htmlFor="link" className="sr-only">
+              Link
+            </Label>
+            <Input
+              id="link"
+              defaultValue="https://music.youtube.com/watch?v=5G0fa470jW4&si=IdyDJVKrnCx6GARc"
+              readOnly
+            />
+          </div>
+          <Button type="submit" size="sm" className="px-3">
+            <span className="sr-only">Copy</span>
+            <Copy />
+          </Button>
+        </div>
+
+      </DialogContent>
+    </Dialog>
+  )
+}