docs: the card component is documented (#396)

openlabs-dev · Sep 20, 2024 · b483345 · b483345
1 parent 3b020b5
commit b483345
Show file tree

Hide file tree

Showing 3 changed files with 138 additions and 3 deletions.
diff --git a/docs/content/docs/components/accordion.mdx b/docs/content/docs/components/accordion.mdx
@@ -269,7 +269,7 @@ function App() {
 }
 ```
 
-## Api
+## API
 
 ### AccordionItem Props
 

diff --git a/docs/content/docs/components/card.mdx b/docs/content/docs/components/card.mdx
@@ -1,4 +1,133 @@
 ---
 title: Card
 description: A card is a flexible and extensible content container.
----
+---
+
+# Imports
+
+- **Card**: The main component to display a list of accordion items.
+- **CardHeader**: The main component to display a list of accordion items.
+- **CardTitle**: The main component to display a list of accordion items.
+- **CardContent**: The main component to display a list of accordion items.
+- **CardDescription**: The main component to display a list of accordion items.
+- **CardFooter**: The main component to display a list of accordion items.
+
+## Usage
+
+<Card className="max-w-sm">
+  <div className="w-full flex justify-center items-center bg-default-50 rounded-t-lg h-60">
+   <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" color="currentColor"><circle cx="7.5" cy="7.5" r="1.5"/><path d="M2.5 12c0-4.478 0-6.718 1.391-8.109S7.521 2.5 12 2.5c4.478 0 6.718 0 8.109 1.391S21.5 7.521 21.5 12c0 4.478 0 6.718-1.391 8.109S16.479 21.5 12 21.5c-4.478 0-6.718 0-8.109-1.391S2.5 16.479 2.5 12"/><path d="M5 21c4.372-5.225 9.274-12.116 16.498-7.458"/></g></svg>
+  </div>
+  <CardHeader>
+    <CardTitle className="[&>p]:m-0 p-0 m-0 !text-4xl">
+      Card Title
+    </CardTitle>
+    <CardDescription className="p-0 [&>p]:m-0 !text-sm">
+      Sagittis, eu pretium massa quisque cursus augue massa cursus. Sed quisque velit, auctor at lobortis hac tincidunt sodales id. Elit interdum vel nisi, in enim sagittis at. Netus sagittis eleifend aliquet urna quis.
+    </CardDescription>
+  </CardHeader>
+  <CardContent  className="[&>p]:m-0 p-0 m-0 w-full px-3 font-bold">
+    $99.90
+  </CardContent>
+  <CardFooter padded="sm" className="w-full grid grid-cols-2">
+    <Button rippleColor="ligth">Button</Button>
+    <Button outline="default">Button ligth</Button>
+  </CardFooter>
+</Card>
+
+```jsx
+import {Card, CardHeader, CardTitle, CardContent, CardDescription, CardFooter} from '@openlite/ui'
+
+function App() {
+  return(
+  <Card className="max-w-sm">
+    <div className="w-full flex justify-center items-center bg-default-50 rounded-t-lg h-60">
+      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" color="currentColor"><circle cx="7.5" cy="7.5" r="1.5"/><path d="M2.5 12c0-4.478 0-6.718 1.391-8.109S7.521 2.5 12 2.5c4.478 0 6.718 0 8.109 1.391S21.5 7.521 21.5 12c0 4.478 0 6.718-1.391 8.109S16.479 21.5 12 21.5c-4.478 0-6.718 0-8.109-1.391S2.5 16.479 2.5 12"/><path d="M5 21c4.372-5.225 9.274-12.116 16.498-7.458"/></g></svg>
+    </div>
+    <CardHeader>
+      <CardTitle className="text-4xl">
+        Card Title
+      </CardTitle>
+      <CardDescription className="text-sm">
+        Sagittis, eu pretium massa quisque cursus augue massa cursus. Sed quisque velit, auctor at lobortis hac tincidunt sodales id. Elit interdum vel nisi, in enim sagittis at. Netus sagittis eleifend aliquet urna quis.
+      </CardDescription>
+    </CardHeader>
+    <CardContent className="w-full font-bold">
+      $99.90
+    </CardContent>
+    <CardFooter className="w-full grid grid-cols-2">
+      <Button rippleColor="ligth">Button</Button>
+      <Button outline="default">Button ligth</Button>
+    </CardFooter>
+  </Card>
+  )
+}
+```
+
+## Examples
+
+### Card with horizontal orientation
+
+<Card orientation="horizontal">
+  <div className="max-w-sm w-2/5 flex justify-center items-center bg-default-50 rounded-l-lg h-64">
+   <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" color="currentColor"><circle cx="7.5" cy="7.5" r="1.5"/><path d="M2.5 12c0-4.478 0-6.718 1.391-8.109S7.521 2.5 12 2.5c4.478 0 6.718 0 8.109 1.391S21.5 7.521 21.5 12c0 4.478 0 6.718-1.391 8.109S16.479 21.5 12 21.5c-4.478 0-6.718 0-8.109-1.391S2.5 16.479 2.5 12"/><path d="M5 21c4.372-5.225 9.274-12.116 16.498-7.458"/></g></svg>
+  </div>
+  <div className='w-3/5'>
+    <CardHeader>
+    <CardTitle className="[&>p]:m-0 p-0 m-0 !text-4xl">
+      Card Title
+    </CardTitle>
+    <CardDescription className="p-0 [&>p]:m-0 !text-sm">
+      Sagittis, eu pretium massa quisque cursus augue massa cursus. Sed quisque velit, auctor at lobortis hac tincidunt sodales id. Elit interdum vel nisi, in enim sagittis at. Netus sagittis eleifend aliquet urna quis.
+    </CardDescription>
+  </CardHeader>
+  <CardContent  className="[&>p]:m-0 p-0 m-0 px-3 font-bold">
+    $99.90
+  </CardContent>
+  <CardFooter padded="sm" className="w-full grid grid-cols-2">
+    <Button rippleColor="ligth">Button</Button>
+    <Button outline="default">Button ligth</Button>
+  </CardFooter>
+  </div>
+</Card>
+
+```jsx
+import {Card, CardHeader, CardTitle, CardContent, CardDescription, CardFooter} from '@openlite/ui'
+
+function App() {
+  return(
+  <Card orientation="horizontal">
+    <div className="max-w-sm w-2/5 flex justify-center items-center bg-default-50 rounded-l-lg h-64">
+      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" color="currentColor"><circle cx="7.5" cy="7.5" r="1.5"/><path d="M2.5 12c0-4.478 0-6.718 1.391-8.109S7.521 2.5 12 2.5c4.478 0 6.718 0 8.109 1.391S21.5 7.521 21.5 12c0 4.478 0 6.718-1.391 8.109S16.479 21.5 12 21.5c-4.478 0-6.718 0-8.109-1.391S2.5 16.479 2.5 12"/><path d="M5 21c4.372-5.225 9.274-12.116 16.498-7.458"/></g></svg>
+    </div>
+    <div className='w-3/5'>
+      <CardHeader>
+        <CardTitle className="text-4xl">
+          Card Title
+        </CardTitle>
+        <CardDescription className="text-sm">
+          Sagittis, eu pretium massa quisque cursus augue massa cursus. Sed quisque velit, auctor at lobortis hac tincidunt sodales id. Elit interdum vel nisi, in enim sagittis at. Netus sagittis eleifend aliquet urna quis.
+        </CardDescription>
+      </CardHeader>
+      <CardContent padded="sm" className="w-full font-bold">
+        $99.90
+      </CardContent>
+      <CardFooter padded="sm" className="w-full grid grid-cols-2">
+        <Button rippleColor="ligth">Button</Button>
+        <Button outline="default">Button ligth</Button>
+      </CardFooter>
+    </div>
+  </Card>
+  )
+}
+```
+
+## API
+
+### Card Props
+
+| Props | Type | Description |
+| --- | --- | --- |
+| `rounded` | `'none' \| 'sm' \| 'md' \| 'lg'` | The rounded of the Card. |
+| `orientation` | `'horizontal' \| 'vertical'` | The orientation of the Card. |
+| `padded` | `'none' \| 'sm' \| 'md' \| 'lg'` | The padding of the CardHeader, CardTitle, CardContent, CardFooter |
diff --git a/docs/mdx-components.tsx b/docs/mdx-components.tsx
@@ -12,7 +12,7 @@ import {
 import type { ReactNode } from 'react'
 import { Popup, PopupContent, PopupTrigger } from 'fumadocs-ui/twoslash/popup'
 import { cn } from '@openlite/ui/tailwind'
-import { Alert, AlertDescription, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, AccordionContent, AccordionItem, AccordionTrigger, Accordion as AccordionUi, Button } from '@openlite/ui'
+import { AccordionContent, AccordionItem, AccordionTrigger, Accordion as AccordionUi, Alert, AlertDescription, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@openlite/ui'
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
@@ -47,6 +47,12 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
     BreadcrumbPage,
     BreadcrumbSeparator,
     BreadcrumbEllipsis,
+    Card,
+    CardHeader,
+    CardTitle,
+    CardContent,
+    CardDescription,
+    CardFooter,
     Callout,
     TypeTable,
     Accordion,