From 7bcb5b5428f2eb0c1843064f12dc74bfa3ac1312 Mon Sep 17 00:00:00 2001
From: Gerzon05 <gerzonarletrangel@gmail.com>
Date: Fri, 20 Sep 2024 13:35:18 -0500
Subject: [PATCH] docs: the card component is documented

---
 docs/content/docs/components/accordion.mdx |   2 +-
 docs/content/docs/components/card.mdx      | 131 ++++++++++++++++++++-
 docs/mdx-components.tsx                    |   8 +-
 3 files changed, 138 insertions(+), 3 deletions(-)

diff --git a/docs/content/docs/components/accordion.mdx b/docs/content/docs/components/accordion.mdx
index a7c3340..416df05 100644
--- 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
index 71b2ac6..86d9fee 100644
--- 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.
----
\ No newline at end of file
+---
+
+# 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
index f23c238..3c6ba30 100644
--- 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,