Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: prepare new components document #394

Merged
merged 1 commit into from
Sep 20, 2024
Merged

docs: prepare new components document #394

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
192 changes: 191 additions & 1 deletion docs/content/docs/components/alert.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,194 @@
---
title: Alert
description: Displays a callout for user attention.
---
---

## Imports

- **Alert**: The main component to display a list of accordion items.
- **AlertTitle**: The title component to display the title of the accordion item.
- **AlertDescription**: The content component to show the hidden content of the accordion.

## Usage

<Alert>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" color="currentColor"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10s10-4.477 10-10"/><path d="M12.242 17v-5c0-.471 0-.707-.146-.854c-.147-.146-.382-.146-.854-.146m.75-3h.009"/></g></svg>
<AlertTitle>Alert default</AlertTitle>
<AlertDescription className="[&>p]:m-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo,
voluptatum?
</AlertDescription>
</Alert>

```jsx
import * as React from 'react'
import { Alert, AlertTitle, AlertDescription } from '@openlite/ui'

function App() {
return (
<Alert>
<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"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10s10-4.477 10-10"/><path d="M12.242 17v-5c0-.471 0-.707-.146-.854c-.147-.146-.382-.146-.854-.146m.75-3h.009"/></g></svg>
<AlertTitle>Success</AlertTitle>
<AlertDescription>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo,
voluptatum?
</AlertDescription>
</Alert>
)
}
```

## Examples

### Primary

<Alert variant="primary">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" color="currentColor"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10s10-4.477 10-10"/><path d="M12.242 17v-5c0-.471 0-.707-.146-.854c-.147-.146-.382-.146-.854-.146m.75-3h.009"/></g></svg>
<AlertTitle>Primary</AlertTitle>
<AlertDescription className="[&>p]:m-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo,
voluptatum?
</AlertDescription>
</Alert>

```jsx
import * as React from 'react'
import { Alert, AlertTitle, AlertDescription } from '@openlite/ui'

function App() {
return (
<Alert variant="primary">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" color="currentColor"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10s10-4.477 10-10"/><path d="M12.242 17v-5c0-.471 0-.707-.146-.854c-.147-.146-.382-.146-.854-.146m.75-3h.009"/></g></svg>
<AlertTitle>Primary</AlertTitle>
<AlertDescription>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo,
voluptatum?
</AlertDescription>
</Alert>
)
}
```

### Success

<Alert variant="success">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" color="currentColor"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10s10-4.477 10-10"/><path d="M12.242 17v-5c0-.471 0-.707-.146-.854c-.147-.146-.382-.146-.854-.146m.75-3h.009"/></g></svg>
<AlertTitle>Success</AlertTitle>
<AlertDescription className="[&>p]:m-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo,
voluptatum?
</AlertDescription>
</Alert>

```jsx
import * as React from 'react'
import { Alert, AlertTitle, AlertDescription } from '@openlite/ui'

function App() {
return (
<Alert variant="success">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" color="currentColor"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10s10-4.477 10-10"/><path d="M12.242 17v-5c0-.471 0-.707-.146-.854c-.147-.146-.382-.146-.854-.146m.75-3h.009"/></g></svg>
<AlertTitle>Success</AlertTitle>
<AlertDescription>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo,
voluptatum?
</AlertDescription>
</Alert>
)
}
```

### Warn

<Alert variant="warn">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" color="currentColor"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10s10-4.477 10-10"/><path d="M12.242 17v-5c0-.471 0-.707-.146-.854c-.147-.146-.382-.146-.854-.146m.75-3h.009"/></g></svg>
<AlertTitle>Warning</AlertTitle>
<AlertDescription className="[&>p]:m-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo,
voluptatum?
</AlertDescription>
</Alert>

```jsx
import * as React from 'react'
import { Alert, AlertTitle, AlertDescription } from '@openlite/ui'

function App() {
return (
<Alert variant="warn">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" color="currentColor"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10s10-4.477 10-10"/><path d="M12.242 17v-5c0-.471 0-.707-.146-.854c-.147-.146-.382-.146-.854-.146m.75-3h.009"/></g></svg>
<AlertTitle>Warning</AlertTitle>
<AlertDescription>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo,
voluptatum?
</AlertDescription>
</Alert>
)
}
```

### Error

<Alert variant="error">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" color="currentColor"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10s10-4.477 10-10"/><path d="M12.242 17v-5c0-.471 0-.707-.146-.854c-.147-.146-.382-.146-.854-.146m.75-3h.009"/></g></svg>
<AlertTitle>Error</AlertTitle>
<AlertDescription className="[&>p]:m-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo,
voluptatum?
</AlertDescription>
</Alert>

```jsx
import * as React from 'react'
import { Alert, AlertTitle, AlertDescription } from '@openlite/ui'

function App() {
return (
<Alert variant="error">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" color="currentColor"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10s10-4.477 10-10"/><path d="M12.242 17v-5c0-.471 0-.707-.146-.854c-.147-.146-.382-.146-.854-.146m.75-3h.009"/></g></svg>
<AlertTitle>Error</AlertTitle>
<AlertDescription>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo,
voluptatum?
</AlertDescription>
</Alert>
)
}
```

### Rounded

<Alert rounded="none">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" color="currentColor"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10s10-4.477 10-10"/><path d="M12.242 17v-5c0-.471 0-.707-.146-.854c-.147-.146-.382-.146-.854-.146m.75-3h.009"/></g></svg>
<AlertTitle>Primary</AlertTitle>
<AlertDescription className="[&>p]:m-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo,
voluptatum?
</AlertDescription>
</Alert>

```jsx
import * as React from 'react'
import { Alert, AlertTitle, AlertDescription } from '@openlite/ui'

function App() {
return (
<Alert rounded="none">
<AlertTitle>Primary</AlertTitle>
<AlertDescription>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo,
voluptatum?
</AlertDescription>
</Alert>
)
}
```

## API

### Alert Props

| Props | Type | Description |
| --- | --- | --- |
| `variant` | `'default' \| 'primary' \| 'success' \| 'warn' \| 'error'` | The variant of the alert. |
| `rounded` | `'none' \| 'sm' \| 'md' \| 'lg'` | The rounded of the alert. |
35 changes: 34 additions & 1 deletion docs/content/docs/components/aspect-ratio.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,37 @@
---
title: Aspect Ratio
description: Maintain the aspect ratio of an element.
---
---

## Imports

- **AspectRatio**: The main component to display a list of accordion items.

## Usage
<div className="mb-10">
<AspectRatio ratio={16 / 9}>
<img src="/example-gerzon.jpeg" alt="Aspect Ratio" className="h-full w-full rounded-md object-cover"
/>
</AspectRatio>
</div>

```jsx
import * as React from 'react'
import { AspectRatio } from '@openlite/ui'

function App() {
return (
<AspectRatio ratio={16 / 9}>
<img src="/example-gerzon.jpeg" alt="Aspect Ratio" className="h-full w-full rounded-md object-cover" />
</AspectRatio>
)
}
```

## API

### AspectRatio Props

| Props | Type | Description |
| --- | --- | --- |
| `ratio` | `string` \| `number` \| `AspectRatioObject` | The ratio of the aspect ratio. |
61 changes: 60 additions & 1 deletion docs/content/docs/components/avatar.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,63 @@
---
title: Avatar
description: An avatar is a graphical representation of a user or the user's character.
---
---

## Imports

- **Avatar**: The main component to display a list of accordion items.
- **AvatarImage**: The image component to display the image of the avatar.
- **AvatarFallback**: The fallback component to display the fallback of the avatar.

## Usage


<Avatar className="relative overflow-visible">
<AvatarImage src="/example-gerzon.jpeg" />
<AvatarFallback>CN</AvatarFallback>
</Avatar>

```jsx
import * as React from 'react'
import { Avatar, AvatarImage, AvatarFallback } from '@openlite/ui'

function App() {
return (
<Avatar>
<AvatarImage src="/example-gerzon.jpeg" alt="Avatar" className="h-full w-full rounded-md object-cover" />
<AvatarFallback>GE</AvatarFallback>
</Avatar>
)
}
```

## Examples

### Size

<Avatar size="sm">
<AvatarImage src="/example-gerzon.jpeg" alt="Avatar" className="h-full w-full rounded-md object-cover" />
<AvatarFallback>GE</AvatarFallback>
</Avatar>

```jsx
import * as React from 'react'
import { Avatar, AvatarImage, AvatarFallback } from '@openlite/ui'

function App() {
return (
<Avatar size="sm">
<AvatarImage src="/example-gerzon.jpeg" alt="Avatar" className="h-full w-full rounded-md object-cover" />
<AvatarFallback>GE</AvatarFallback>
</Avatar>
)
}
```

## API

### Avatar Props

| Props | Type | Description |
| --- | --- | --- |
| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | The size of the avatar. |
Loading
Loading