feat: create section examples component

openlitedotdev · Sep 5, 2024 · 1881419 · 1881419
1 parent f88dc85
commit 1881419
Show file tree

Hide file tree

Showing 8 changed files with 171 additions and 8 deletions.
diff --git a/docs/app/layout.tsx b/docs/app/layout.tsx
@@ -10,7 +10,7 @@ const inter = DM_Sans({
 export default function Layout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" className={inter.className} suppressHydrationWarning>
-      <body>
+      <body className="bg-gradient-to-tl from-white via-default-100 to-default-200">
         <RootProvider>{children}</RootProvider>
       </body>
     </html>

diff --git a/docs/components/banners/hero.tsx b/docs/components/banners/hero.tsx
@@ -1,4 +1,5 @@
 import { Button } from '@openlite/ui'
+import Link from 'next/link'
 import InstallCommand from '../install-command'
 
 export function Hero() {
@@ -19,7 +20,11 @@ export function Hero() {
             </p>
           </div>
           <div className="flex items-center gap-4 flex-wrap justify-center">
-            <Button>Getting started</Button>
+            <Button asChild>
+              <Link href="/docs">
+                Getting started
+              </Link>
+            </Button>
             <InstallCommand />
           </div>
         </div>

diff --git a/docs/components/examples.tsx b/docs/components/examples.tsx
@@ -0,0 +1,155 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Slider,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@openlite/ui'
+
+export default function Component() {
+  const [activeTab, setActiveTab] = useState('account')
+
+  return (
+    <div className="w-full max-w-6xl mx-auto p-4 space-y-4">
+      <header className="space-y-4">
+        <Slider value={70} />
+        <div className="flex justify-between items-center">
+          <div className="flex items-center space-x-2">
+            <Select>
+              <SelectTrigger className="w-[180px]">
+                <SelectValue placeholder="Options" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="option1">Option 1</SelectItem>
+                <SelectItem value="option2">Option 2</SelectItem>
+              </SelectContent>
+            </Select>
+            <div className="flex -space-x-2">
+              <Avatar>
+                <AvatarImage src="/example-sebastian.jpeg" />
+                <AvatarFallback>AC</AvatarFallback>
+              </Avatar>
+              <Avatar>
+                <AvatarImage src="/example-sebastian.jpeg" />
+                <AvatarFallback>BC</AvatarFallback>
+              </Avatar>
+              <Badge variant="secondary">+1</Badge>
+            </div>
+            <Button>Button</Button>
+            <Badge>Badge</Badge>
+          </div>
+
+        </div>
+      </header>
+
+      <div className="grid grid-cols-3 gap-4">
+        <Card className="col-span-1">
+          <CardHeader>
+            <CardTitle>Notification</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p>This is a notification!</p>
+          </CardContent>
+        </Card>
+
+        <Card className="col-span-2">
+          <CardContent className="p-0">
+            <div className="p-4">
+              <Input type="search" placeholder="Search..." className="w-full" />
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="col-span-3">
+          <CardContent className="p-0">
+            <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">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="username" className="block text-sm font-medium text-gray-700">Username</label>
+                    <Input id="username" defaultValue="benjamincanac" />
+                  </div>
+                  <Button>Save account</Button>
+                </div>
+              </TabsContent>
+              <TabsContent value="password" className="p-4">
+                <h2 className="text-2xl font-bold mb-4">Password</h2>
+                <p className="text-gray-500 mb-4">Change your password here.</p>
+              </TabsContent>
+            </Tabs>
+          </CardContent>
+        </Card>
+
+        <Card className="col-span-3">
+          <CardContent>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead className="w-[50px]"></TableHead>
+                  <TableHead>Id</TableHead>
+                  <TableHead>Name</TableHead>
+                  <TableHead>Title</TableHead>
+                  <TableHead>Email</TableHead>
+                  <TableHead>Role</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {[
+                  { id: 1, name: 'Lindsay Walton', title: 'Front-end Developer', email: 'lindsay.walton@example.com', role: 'Member' },
+                  { id: 2, name: 'Courtney Henry', title: 'Designer', email: 'courtney.henry@example.com', role: 'Admin' },
+                  { id: 3, name: 'Tom Cook', title: 'Director of Product', email: 'tom.cook@example.com', role: 'Member' },
+                  { id: 4, name: 'Whitney Francis', title: 'Copywriter', email: 'whitney.francis@example.com', role: 'Admin' },
+                  { id: 5, name: 'Leonard Krasner', title: 'Senior Designer', email: 'leonard.krasner@example.com', role: 'Owner' },
+                ].map(person => (
+                  <TableRow key={person.id}>
+                    <TableCell><Checkbox checked={person.id === 2} /></TableCell>
+                    <TableCell>{person.id}</TableCell>
+                    <TableCell>{person.name}</TableCell>
+                    <TableCell>{person.title}</TableCell>
+                    <TableCell>{person.email}</TableCell>
+                    <TableCell>{person.role}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/docs/components/header.tsx b/docs/components/header.tsx
@@ -15,7 +15,7 @@ function SubMenu({ classes }: { classes: string }) {
   return (
     <nav className={classes}>
       {links.map((link, key) => (
-        <Link href={link.href} key={key}>{link.label}</Link>
+        <Link href={link.href} key={key} className="hover:text-neutral-700">{link.label}</Link>
       ))}
     </nav>
   )

diff --git a/docs/components/main.tsx b/docs/components/main.tsx
@@ -1,9 +1,11 @@
 import { Hero } from './banners/hero'
+import Examples from './examples'
 
 export default function Main() {
   return (
     <main className="min-h-screen">
       <Hero />
+      <Examples />
     </main>
   )
 }
diff --git a/docs/public/example-sebastian.jpeg b/docs/public/example-sebastian.jpeg
diff --git a/src/components/elements/slider/slider.tsx b/src/components/elements/slider/slider.tsx
@@ -8,12 +8,12 @@ import { cn, slider } from '@/tailwind'
 export interface Comp extends React.ElementRef<typeof SliderPrimitive.Root> {}
 export interface Props extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,
   VariantProps<typeof slider> {
-  variant?: 'error' | 'primary' | 'success' | 'warn' | null | undefined
+  variant?: 'default' | 'error' | 'primary' | 'success' | 'warn' | null | undefined
   styles?: string
   values?: boolean
 }
 
-const Slider = React.forwardRef<Comp, Props>(({ className, styles, values = false, variant = 'primary', ...props }, ref) => {
+const Slider = React.forwardRef<Comp, Props>(({ className, styles, values = false, variant = 'default', ...props }, ref) => {
   const [value, setValue] = React.useState<number[]>(props.defaultValue || [0])
 
   return (

diff --git a/src/plugins/components/slider.ts b/src/plugins/components/slider.ts
@@ -18,7 +18,7 @@ export const slider = cva('relative flex w-full touch-none select-none items-cen
  * @example
  * <Track className={styles()} />
  */
-export const sliderTrack = cva('relative h-1 w-full grow overflow-hidden rounded-full bg-default')
+export const sliderTrack = cva('relative h-2 w-full grow overflow-hidden rounded-full bg-default-300')
 
 /**
  * Range wrapper **Class Variants** component
@@ -28,17 +28,18 @@ export const sliderTrack = cva('relative h-1 w-full grow overflow-hidden rounded
  * @example
  * <Range className={styles()} />
  */
-export const sliderRange = cva('absolute h-1', {
+export const sliderRange = cva('absolute h-2', {
   variants: {
     variant: {
+      default: 'bg-default',
       primary: 'bg-primary',
       success: 'bg-success',
       warn: 'bg-warn',
       error: 'bg-error',
     },
   },
   defaultVariants: {
-    variant: 'primary',
+    variant: 'default',
   },
 })