mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-27 06:34:12 +00:00
feat: add item
This commit is contained in:
shadcn
@@ -1,20 +1,14 @@
|
||||
---
|
||||
title: Item
|
||||
description: A versatile component that you can use to display any content.
|
||||
description: A versatile component for displaying content with media, title, description, and actions.
|
||||
base: base
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentPreview styleName="base-nova" name="item-demo" />
|
||||
|
||||
The `Item` component is a straightforward flex container that can house nearly any type of content. Use it to display a title, description, and actions. Group it with the `ItemGroup` component to create a list of items.
|
||||
|
||||
You can pretty much achieve the same result with the `div` element and some classes, but **I've built this so many times** that I decided to create a component for it. Now I use it all the time.
|
||||
|
||||
<ComponentPreview
|
||||
styleName="base-nova"
|
||||
name="item-demo"
|
||||
className="[&_.preview]:p-4"
|
||||
/>
|
||||
|
||||
## Installation
|
||||
|
||||
<CodeTabs>
|
||||
@@ -59,8 +53,6 @@ import {
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemFooter,
|
||||
ItemHeader,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/components/ui/item"
|
||||
@@ -68,14 +60,16 @@ import {
|
||||
|
||||
```tsx showLineNumbers
|
||||
<Item>
|
||||
<ItemHeader>Item Header</ItemHeader>
|
||||
<ItemMedia />
|
||||
<ItemMedia variant="icon">
|
||||
<Icon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Item</ItemTitle>
|
||||
<ItemDescription>Item</ItemDescription>
|
||||
<ItemTitle>Title</ItemTitle>
|
||||
<ItemDescription>Description</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions />
|
||||
<ItemFooter>Item Footer</ItemFooter>
|
||||
<ItemActions>
|
||||
<Button>Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
```
|
||||
|
||||
@@ -85,96 +79,87 @@ Use `Field` if you need to display a form input such as a checkbox, input, radio
|
||||
|
||||
If you only need to display content such as a title, description, and actions, use `Item`.
|
||||
|
||||
## Examples
|
||||
## Variant
|
||||
|
||||
### Variants
|
||||
Use the `variant` prop to change the visual style of the item.
|
||||
|
||||
<ComponentPreview
|
||||
styleName="base-nova"
|
||||
name="item-variant"
|
||||
className="[&_.preview]:p-4"
|
||||
previewClassName="h-96"
|
||||
/>
|
||||
|
||||
### Size
|
||||
## Size
|
||||
|
||||
The `Item` component has different sizes for different use cases. For example, you can use the `sm` size for a compact item or the `default` size for a standard item.
|
||||
Use the `size` prop to change the size of the item. Available sizes are `default`, `sm`, and `xs`.
|
||||
|
||||
<ComponentPreview
|
||||
styleName="base-nova"
|
||||
name="item-size"
|
||||
className="[&_.preview]:p-4"
|
||||
previewClassName="h-96"
|
||||
/>
|
||||
|
||||
## Examples
|
||||
|
||||
### Icon
|
||||
|
||||
<ComponentPreview
|
||||
styleName="base-nova"
|
||||
name="item-icon"
|
||||
className="[&_.preview]:p-4"
|
||||
/>
|
||||
Use `ItemMedia` with `variant="icon"` to display an icon.
|
||||
|
||||
<ComponentPreview styleName="base-nova" name="item-icon" />
|
||||
|
||||
### Avatar
|
||||
|
||||
<ComponentPreview
|
||||
styleName="base-nova"
|
||||
name="item-avatar"
|
||||
className="[&_.preview]:p-4"
|
||||
/>
|
||||
You can use `ItemMedia` with `variant="avatar"` to display an avatar.
|
||||
|
||||
<ComponentPreview styleName="base-nova" name="item-avatar" />
|
||||
|
||||
### Image
|
||||
|
||||
<ComponentPreview
|
||||
styleName="base-nova"
|
||||
name="item-image"
|
||||
className="[&_.preview]:p-4"
|
||||
/>
|
||||
Use `ItemMedia` with `variant="image"` to display an image.
|
||||
|
||||
<ComponentPreview styleName="base-nova" name="item-image" />
|
||||
|
||||
### Group
|
||||
|
||||
Use `ItemGroup` to group related items together.
|
||||
|
||||
<ComponentPreview
|
||||
styleName="base-nova"
|
||||
name="item-group"
|
||||
className="[&_.preview]:p-4"
|
||||
previewClassName="h-96"
|
||||
/>
|
||||
|
||||
### Header
|
||||
|
||||
Use `ItemHeader` to add a header above the item content.
|
||||
|
||||
<ComponentPreview
|
||||
styleName="base-nova"
|
||||
name="item-header"
|
||||
className="[&_.preview]:p-4"
|
||||
previewClassName="h-96"
|
||||
/>
|
||||
|
||||
### Link
|
||||
|
||||
To render an item as a link, use the `asChild` prop. The hover and focus states will be applied to the anchor element.
|
||||
Use the `render` prop to render the item as a link. The hover and focus states will be applied to the anchor element.
|
||||
|
||||
<ComponentPreview
|
||||
styleName="base-nova"
|
||||
name="item-link"
|
||||
className="[&_.preview]:p-4"
|
||||
/>
|
||||
<ComponentPreview styleName="base-nova" name="item-link" />
|
||||
|
||||
```tsx showLineNumbers
|
||||
<Item asChild>
|
||||
<a href="/dashboard">
|
||||
<ItemMedia />
|
||||
<ItemContent>
|
||||
<ItemTitle>Dashboard</ItemTitle>
|
||||
<ItemDescription>Overview of your account and activity.</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions />
|
||||
</a>
|
||||
<Item render={<a href="/dashboard" />}>
|
||||
<ItemMedia variant="icon">
|
||||
<HomeIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Dashboard</ItemTitle>
|
||||
<ItemDescription>Overview of your account and activity.</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
```
|
||||
|
||||
### Dropdown
|
||||
|
||||
<ComponentPreview
|
||||
styleName="base-nova"
|
||||
name="item-dropdown"
|
||||
className="[&_.preview]:p-4"
|
||||
/>
|
||||
<ComponentPreview styleName="base-nova" name="item-dropdown" />
|
||||
|
||||
## API Reference
|
||||
|
||||
@@ -185,57 +170,12 @@ The main component for displaying content with media, title, description, and ac
|
||||
| Prop | Type | Default |
|
||||
| --------- | ----------------------------------- | ----------- |
|
||||
| `variant` | `"default" \| "outline" \| "muted"` | `"default"` |
|
||||
| `size` | `"default" \| "sm"` | `"default"` |
|
||||
| `asChild` | `boolean` | `false` |
|
||||
|
||||
```tsx
|
||||
<Item size="" variant="">
|
||||
<ItemMedia />
|
||||
<ItemContent>
|
||||
<ItemTitle>Item</ItemTitle>
|
||||
<ItemDescription>Item</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions />
|
||||
</Item>
|
||||
```
|
||||
|
||||
You can use the `asChild` prop to render a custom component as the item, for example a link. The hover and focus states will be applied to the custom component.
|
||||
|
||||
```tsx showLineNumbers
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/components/ui/item"
|
||||
|
||||
export function ItemLink() {
|
||||
return (
|
||||
<Item asChild>
|
||||
<a href="/dashboard">
|
||||
<ItemMedia variant="icon">
|
||||
<Home />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Dashboard</ItemTitle>
|
||||
<ItemDescription>
|
||||
Overview of your account and activity.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</a>
|
||||
</Item>
|
||||
)
|
||||
}
|
||||
```
|
||||
| `size` | `"default" \| "sm" \| "xs"` | `"default"` |
|
||||
| `render` | `React.ReactElement` | |
|
||||
|
||||
### ItemGroup
|
||||
|
||||
The `ItemGroup` component is a container that groups related items together with consistent styling.
|
||||
|
||||
| Prop | Type | Default |
|
||||
| ----------- | -------- | ------- |
|
||||
| `className` | `string` | |
|
||||
A container that groups related items together with consistent styling.
|
||||
|
||||
```tsx
|
||||
<ItemGroup>
|
||||
@@ -246,11 +186,7 @@ The `ItemGroup` component is a container that groups related items together with
|
||||
|
||||
### ItemSeparator
|
||||
|
||||
The `ItemSeparator` component is a separator that separates items in the item group.
|
||||
|
||||
| Prop | Type | Default |
|
||||
| ----------- | -------- | ------- |
|
||||
| `className` | `string` | |
|
||||
A separator between items in a group.
|
||||
|
||||
```tsx
|
||||
<ItemGroup>
|
||||
@@ -262,12 +198,11 @@ The `ItemSeparator` component is a separator that separates items in the item gr
|
||||
|
||||
### ItemMedia
|
||||
|
||||
Use the `ItemMedia` component to display media content such as icons, images, or avatars.
|
||||
Use `ItemMedia` to display media content such as icons, images, or avatars.
|
||||
|
||||
| Prop | Type | Default |
|
||||
| ----------- | -------------------------------- | ----------- |
|
||||
| `variant` | `"default" \| "icon" \| "image"` | `"default"` |
|
||||
| `className` | `string` | |
|
||||
| Prop | Type | Default |
|
||||
| --------- | -------------------------------- | ----------- |
|
||||
| `variant` | `"default" \| "icon" \| "image"` | `"default"` |
|
||||
|
||||
```tsx
|
||||
<ItemMedia variant="icon">
|
||||
@@ -283,28 +218,18 @@ Use the `ItemMedia` component to display media content such as icons, images, or
|
||||
|
||||
### ItemContent
|
||||
|
||||
The `ItemContent` component wraps the title and description of the item.
|
||||
|
||||
You can skip `ItemContent` if you only need a title.
|
||||
|
||||
| Prop | Type | Default |
|
||||
| ----------- | -------- | ------- |
|
||||
| `className` | `string` | |
|
||||
Wraps the title and description of the item.
|
||||
|
||||
```tsx
|
||||
<ItemContent>
|
||||
<ItemTitle>Item</ItemTitle>
|
||||
<ItemDescription>Item</ItemDescription>
|
||||
<ItemTitle>Title</ItemTitle>
|
||||
<ItemDescription>Description</ItemDescription>
|
||||
</ItemContent>
|
||||
```
|
||||
|
||||
### ItemTitle
|
||||
|
||||
Use the `ItemTitle` component to display the title of the item.
|
||||
|
||||
| Prop | Type | Default |
|
||||
| ----------- | -------- | ------- |
|
||||
| `className` | `string` | |
|
||||
Displays the title of the item.
|
||||
|
||||
```tsx
|
||||
<ItemTitle>Item Title</ItemTitle>
|
||||
@@ -312,11 +237,7 @@ Use the `ItemTitle` component to display the title of the item.
|
||||
|
||||
### ItemDescription
|
||||
|
||||
Use the `ItemDescription` component to display the description of the item.
|
||||
|
||||
| Prop | Type | Default |
|
||||
| ----------- | -------- | ------- |
|
||||
| `className` | `string` | |
|
||||
Displays the description of the item.
|
||||
|
||||
```tsx
|
||||
<ItemDescription>Item description</ItemDescription>
|
||||
@@ -324,39 +245,32 @@ Use the `ItemDescription` component to display the description of the item.
|
||||
|
||||
### ItemActions
|
||||
|
||||
Use the `ItemActions` component to display action buttons or other interactive elements.
|
||||
|
||||
| Prop | Type | Default |
|
||||
| ----------- | -------- | ------- |
|
||||
| `className` | `string` | |
|
||||
Container for action buttons or other interactive elements.
|
||||
|
||||
```tsx
|
||||
<ItemActions>
|
||||
<Button>Action</Button>
|
||||
<Button>Action</Button>
|
||||
</ItemActions>
|
||||
```
|
||||
|
||||
### ItemHeader
|
||||
|
||||
Use the `ItemHeader` component to display a header in the item.
|
||||
|
||||
| Prop | Type | Default |
|
||||
| ----------- | -------- | ------- |
|
||||
| `className` | `string` | |
|
||||
Displays a header above the item content.
|
||||
|
||||
```tsx
|
||||
<ItemHeader>Item Header</ItemHeader>
|
||||
<Item>
|
||||
<ItemHeader>Header</ItemHeader>
|
||||
<ItemContent>...</ItemContent>
|
||||
</Item>
|
||||
```
|
||||
|
||||
### ItemFooter
|
||||
|
||||
Use the `ItemFooter` component to display a footer in the item.
|
||||
|
||||
| Prop | Type | Default |
|
||||
| ----------- | -------- | ------- |
|
||||
| `className` | `string` | |
|
||||
Displays a footer below the item content.
|
||||
|
||||
```tsx
|
||||
<ItemFooter>Item Footer</ItemFooter>
|
||||
<Item>
|
||||
<ItemContent>...</ItemContent>
|
||||
<ItemFooter>Footer</ItemFooter>
|
||||
</Item>
|
||||
```
|
||||
|
||||
@@ -1,20 +1,14 @@
|
||||
---
|
||||
title: Item
|
||||
description: A versatile component that you can use to display any content.
|
||||
description: A versatile component for displaying content with media, title, description, and actions.
|
||||
base: radix
|
||||
component: true
|
||||
---
|
||||
|
||||
<ComponentPreview styleName="radix-nova" name="item-demo" />
|
||||
|
||||
The `Item` component is a straightforward flex container that can house nearly any type of content. Use it to display a title, description, and actions. Group it with the `ItemGroup` component to create a list of items.
|
||||
|
||||
You can pretty much achieve the same result with the `div` element and some classes, but **I've built this so many times** that I decided to create a component for it. Now I use it all the time.
|
||||
|
||||
<ComponentPreview
|
||||
styleName="radix-nova"
|
||||
name="item-demo"
|
||||
className="[&_.preview]:p-4"
|
||||
/>
|
||||
|
||||
## Installation
|
||||
|
||||
<CodeTabs>
|
||||
@@ -59,8 +53,6 @@ import {
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemFooter,
|
||||
ItemHeader,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/components/ui/item"
|
||||
@@ -68,14 +60,16 @@ import {
|
||||
|
||||
```tsx showLineNumbers
|
||||
<Item>
|
||||
<ItemHeader>Item Header</ItemHeader>
|
||||
<ItemMedia />
|
||||
<ItemMedia variant="icon">
|
||||
<Icon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Item</ItemTitle>
|
||||
<ItemDescription>Item</ItemDescription>
|
||||
<ItemTitle>Title</ItemTitle>
|
||||
<ItemDescription>Description</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions />
|
||||
<ItemFooter>Item Footer</ItemFooter>
|
||||
<ItemActions>
|
||||
<Button>Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
```
|
||||
|
||||
@@ -85,96 +79,89 @@ Use `Field` if you need to display a form input such as a checkbox, input, radio
|
||||
|
||||
If you only need to display content such as a title, description, and actions, use `Item`.
|
||||
|
||||
## Examples
|
||||
## Variant
|
||||
|
||||
### Variants
|
||||
Use the `variant` prop to change the visual style of the item.
|
||||
|
||||
<ComponentPreview
|
||||
styleName="radix-nova"
|
||||
name="item-variant"
|
||||
className="[&_.preview]:p-4"
|
||||
previewClassName="h-96"
|
||||
/>
|
||||
|
||||
### Size
|
||||
## Size
|
||||
|
||||
The `Item` component has different sizes for different use cases. For example, you can use the `sm` size for a compact item or the `default` size for a standard item.
|
||||
Use the `size` prop to change the size of the item. Available sizes are `default`, `sm`, and `xs`.
|
||||
|
||||
<ComponentPreview
|
||||
styleName="radix-nova"
|
||||
name="item-size"
|
||||
className="[&_.preview]:p-4"
|
||||
previewClassName="h-96"
|
||||
/>
|
||||
|
||||
## Examples
|
||||
|
||||
### Icon
|
||||
|
||||
<ComponentPreview
|
||||
styleName="radix-nova"
|
||||
name="item-icon"
|
||||
className="[&_.preview]:p-4"
|
||||
/>
|
||||
Use `ItemMedia` with `variant="icon"` to display an icon.
|
||||
|
||||
<ComponentPreview styleName="radix-nova" name="item-icon" />
|
||||
|
||||
### Avatar
|
||||
|
||||
<ComponentPreview
|
||||
styleName="radix-nova"
|
||||
name="item-avatar"
|
||||
className="[&_.preview]:p-4"
|
||||
/>
|
||||
You can use `ItemMedia` with `variant="avatar"` to display an avatar.
|
||||
|
||||
<ComponentPreview styleName="radix-nova" name="item-avatar" />
|
||||
|
||||
### Image
|
||||
|
||||
<ComponentPreview
|
||||
styleName="radix-nova"
|
||||
name="item-image"
|
||||
className="[&_.preview]:p-4"
|
||||
/>
|
||||
Use `ItemMedia` with `variant="image"` to display an image.
|
||||
|
||||
<ComponentPreview styleName="radix-nova" name="item-image" />
|
||||
|
||||
### Group
|
||||
|
||||
Use `ItemGroup` to group related items together.
|
||||
|
||||
<ComponentPreview
|
||||
styleName="radix-nova"
|
||||
name="item-group"
|
||||
className="[&_.preview]:p-4"
|
||||
previewClassName="h-96"
|
||||
/>
|
||||
|
||||
### Header
|
||||
|
||||
Use `ItemHeader` to add a header above the item content.
|
||||
|
||||
<ComponentPreview
|
||||
styleName="radix-nova"
|
||||
name="item-header"
|
||||
className="[&_.preview]:p-4"
|
||||
previewClassName="h-96"
|
||||
/>
|
||||
|
||||
### Link
|
||||
|
||||
To render an item as a link, use the `asChild` prop. The hover and focus states will be applied to the anchor element.
|
||||
Use the `asChild` prop to render the item as a link. The hover and focus states will be applied to the anchor element.
|
||||
|
||||
<ComponentPreview
|
||||
styleName="radix-nova"
|
||||
name="item-link"
|
||||
className="[&_.preview]:p-4"
|
||||
/>
|
||||
<ComponentPreview styleName="radix-nova" name="item-link" />
|
||||
|
||||
```tsx showLineNumbers
|
||||
<Item asChild>
|
||||
<a href="/dashboard">
|
||||
<ItemMedia />
|
||||
<ItemMedia variant="icon">
|
||||
<HomeIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Dashboard</ItemTitle>
|
||||
<ItemDescription>Overview of your account and activity.</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions />
|
||||
</a>
|
||||
</Item>
|
||||
```
|
||||
|
||||
### Dropdown
|
||||
|
||||
<ComponentPreview
|
||||
styleName="radix-nova"
|
||||
name="item-dropdown"
|
||||
className="[&_.preview]:p-4"
|
||||
/>
|
||||
<ComponentPreview styleName="radix-nova" name="item-dropdown" />
|
||||
|
||||
## API Reference
|
||||
|
||||
@@ -185,57 +172,12 @@ The main component for displaying content with media, title, description, and ac
|
||||
| Prop | Type | Default |
|
||||
| --------- | ----------------------------------- | ----------- |
|
||||
| `variant` | `"default" \| "outline" \| "muted"` | `"default"` |
|
||||
| `size` | `"default" \| "sm"` | `"default"` |
|
||||
| `size` | `"default" \| "sm" \| "xs"` | `"default"` |
|
||||
| `asChild` | `boolean` | `false` |
|
||||
|
||||
```tsx
|
||||
<Item size="" variant="">
|
||||
<ItemMedia />
|
||||
<ItemContent>
|
||||
<ItemTitle>Item</ItemTitle>
|
||||
<ItemDescription>Item</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions />
|
||||
</Item>
|
||||
```
|
||||
|
||||
You can use the `asChild` prop to render a custom component as the item, for example a link. The hover and focus states will be applied to the custom component.
|
||||
|
||||
```tsx showLineNumbers
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/components/ui/item"
|
||||
|
||||
export function ItemLink() {
|
||||
return (
|
||||
<Item asChild>
|
||||
<a href="/dashboard">
|
||||
<ItemMedia variant="icon">
|
||||
<Home />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Dashboard</ItemTitle>
|
||||
<ItemDescription>
|
||||
Overview of your account and activity.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</a>
|
||||
</Item>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
### ItemGroup
|
||||
|
||||
The `ItemGroup` component is a container that groups related items together with consistent styling.
|
||||
|
||||
| Prop | Type | Default |
|
||||
| ----------- | -------- | ------- |
|
||||
| `className` | `string` | |
|
||||
A container that groups related items together with consistent styling.
|
||||
|
||||
```tsx
|
||||
<ItemGroup>
|
||||
@@ -246,11 +188,7 @@ The `ItemGroup` component is a container that groups related items together with
|
||||
|
||||
### ItemSeparator
|
||||
|
||||
The `ItemSeparator` component is a separator that separates items in the item group.
|
||||
|
||||
| Prop | Type | Default |
|
||||
| ----------- | -------- | ------- |
|
||||
| `className` | `string` | |
|
||||
A separator between items in a group.
|
||||
|
||||
```tsx
|
||||
<ItemGroup>
|
||||
@@ -262,12 +200,11 @@ The `ItemSeparator` component is a separator that separates items in the item gr
|
||||
|
||||
### ItemMedia
|
||||
|
||||
Use the `ItemMedia` component to display media content such as icons, images, or avatars.
|
||||
Use `ItemMedia` to display media content such as icons, images, or avatars.
|
||||
|
||||
| Prop | Type | Default |
|
||||
| ----------- | -------------------------------- | ----------- |
|
||||
| `variant` | `"default" \| "icon" \| "image"` | `"default"` |
|
||||
| `className` | `string` | |
|
||||
| Prop | Type | Default |
|
||||
| --------- | -------------------------------- | ----------- |
|
||||
| `variant` | `"default" \| "icon" \| "image"` | `"default"` |
|
||||
|
||||
```tsx
|
||||
<ItemMedia variant="icon">
|
||||
@@ -283,28 +220,18 @@ Use the `ItemMedia` component to display media content such as icons, images, or
|
||||
|
||||
### ItemContent
|
||||
|
||||
The `ItemContent` component wraps the title and description of the item.
|
||||
|
||||
You can skip `ItemContent` if you only need a title.
|
||||
|
||||
| Prop | Type | Default |
|
||||
| ----------- | -------- | ------- |
|
||||
| `className` | `string` | |
|
||||
Wraps the title and description of the item.
|
||||
|
||||
```tsx
|
||||
<ItemContent>
|
||||
<ItemTitle>Item</ItemTitle>
|
||||
<ItemDescription>Item</ItemDescription>
|
||||
<ItemTitle>Title</ItemTitle>
|
||||
<ItemDescription>Description</ItemDescription>
|
||||
</ItemContent>
|
||||
```
|
||||
|
||||
### ItemTitle
|
||||
|
||||
Use the `ItemTitle` component to display the title of the item.
|
||||
|
||||
| Prop | Type | Default |
|
||||
| ----------- | -------- | ------- |
|
||||
| `className` | `string` | |
|
||||
Displays the title of the item.
|
||||
|
||||
```tsx
|
||||
<ItemTitle>Item Title</ItemTitle>
|
||||
@@ -312,11 +239,7 @@ Use the `ItemTitle` component to display the title of the item.
|
||||
|
||||
### ItemDescription
|
||||
|
||||
Use the `ItemDescription` component to display the description of the item.
|
||||
|
||||
| Prop | Type | Default |
|
||||
| ----------- | -------- | ------- |
|
||||
| `className` | `string` | |
|
||||
Displays the description of the item.
|
||||
|
||||
```tsx
|
||||
<ItemDescription>Item description</ItemDescription>
|
||||
@@ -324,39 +247,32 @@ Use the `ItemDescription` component to display the description of the item.
|
||||
|
||||
### ItemActions
|
||||
|
||||
Use the `ItemActions` component to display action buttons or other interactive elements.
|
||||
|
||||
| Prop | Type | Default |
|
||||
| ----------- | -------- | ------- |
|
||||
| `className` | `string` | |
|
||||
Container for action buttons or other interactive elements.
|
||||
|
||||
```tsx
|
||||
<ItemActions>
|
||||
<Button>Action</Button>
|
||||
<Button>Action</Button>
|
||||
</ItemActions>
|
||||
```
|
||||
|
||||
### ItemHeader
|
||||
|
||||
Use the `ItemHeader` component to display a header in the item.
|
||||
|
||||
| Prop | Type | Default |
|
||||
| ----------- | -------- | ------- |
|
||||
| `className` | `string` | |
|
||||
Displays a header above the item content.
|
||||
|
||||
```tsx
|
||||
<ItemHeader>Item Header</ItemHeader>
|
||||
<Item>
|
||||
<ItemHeader>Header</ItemHeader>
|
||||
<ItemContent>...</ItemContent>
|
||||
</Item>
|
||||
```
|
||||
|
||||
### ItemFooter
|
||||
|
||||
Use the `ItemFooter` component to display a footer in the item.
|
||||
|
||||
| Prop | Type | Default |
|
||||
| ----------- | -------- | ------- |
|
||||
| `className` | `string` | |
|
||||
Displays a footer below the item content.
|
||||
|
||||
```tsx
|
||||
<ItemFooter>Item Footer</ItemFooter>
|
||||
<Item>
|
||||
<ItemContent>...</ItemContent>
|
||||
<ItemFooter>Footer</ItemFooter>
|
||||
</Item>
|
||||
```
|
||||
|
||||
@@ -3021,58 +3021,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-default-extra-small": {
|
||||
name: "item-default-extra-small",
|
||||
filePath: "examples/radix/item-default-extra-small.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/item-default-extra-small")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-default-extra-small"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-default-small": {
|
||||
name: "item-default-small",
|
||||
filePath: "examples/radix/item-default-small.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/item-default-small")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-default-small"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-default-with-image": {
|
||||
name: "item-default-with-image",
|
||||
filePath: "examples/radix/item-default-with-image.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/item-default-with-image")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-default-with-image"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-default": {
|
||||
name: "item-default",
|
||||
filePath: "examples/radix/item-default.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/item-default")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-default"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-demo": {
|
||||
name: "item-demo",
|
||||
filePath: "examples/radix/item-demo.tsx",
|
||||
@@ -3099,19 +3047,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-footer-examples": {
|
||||
name: "item-footer-examples",
|
||||
filePath: "examples/radix/item-footer-examples.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/item-footer-examples")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-footer-examples"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-group": {
|
||||
name: "item-group",
|
||||
filePath: "examples/radix/item-group.tsx",
|
||||
@@ -3125,32 +3060,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-header-and-footer-examples": {
|
||||
name: "item-header-and-footer-examples",
|
||||
filePath: "examples/radix/item-header-and-footer-examples.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/item-header-and-footer-examples")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-header-and-footer-examples"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-header-examples": {
|
||||
name: "item-header-examples",
|
||||
filePath: "examples/radix/item-header-examples.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/item-header-examples")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-header-examples"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-header": {
|
||||
name: "item-header",
|
||||
filePath: "examples/radix/item-header.tsx",
|
||||
@@ -3190,45 +3099,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-link-default": {
|
||||
name: "item-link-default",
|
||||
filePath: "examples/radix/item-link-default.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/item-link-default")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-link-default"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-link-muted": {
|
||||
name: "item-link-muted",
|
||||
filePath: "examples/radix/item-link-muted.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/item-link-muted")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-link-muted"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-link-outline": {
|
||||
name: "item-link-outline",
|
||||
filePath: "examples/radix/item-link-outline.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/item-link-outline")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-link-outline"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-link": {
|
||||
name: "item-link",
|
||||
filePath: "examples/radix/item-link.tsx",
|
||||
@@ -3242,149 +3112,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-muted-extra-small": {
|
||||
name: "item-muted-extra-small",
|
||||
filePath: "examples/radix/item-muted-extra-small.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/item-muted-extra-small")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-muted-extra-small"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-muted-small": {
|
||||
name: "item-muted-small",
|
||||
filePath: "examples/radix/item-muted-small.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/item-muted-small")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-muted-small"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-muted-with-image": {
|
||||
name: "item-muted-with-image",
|
||||
filePath: "examples/radix/item-muted-with-image.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/item-muted-with-image")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-muted-with-image"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-muted": {
|
||||
name: "item-muted",
|
||||
filePath: "examples/radix/item-muted.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/item-muted")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-muted"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-outline-extra-small": {
|
||||
name: "item-outline-extra-small",
|
||||
filePath: "examples/radix/item-outline-extra-small.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/item-outline-extra-small")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-outline-extra-small"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-outline-small": {
|
||||
name: "item-outline-small",
|
||||
filePath: "examples/radix/item-outline-small.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/item-outline-small")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-outline-small"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-outline-with-image-extra-small": {
|
||||
name: "item-outline-with-image-extra-small",
|
||||
filePath: "examples/radix/item-outline-with-image-extra-small.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/item-outline-with-image-extra-small")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-outline-with-image-extra-small"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-outline-with-image-small": {
|
||||
name: "item-outline-with-image-small",
|
||||
filePath: "examples/radix/item-outline-with-image-small.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/item-outline-with-image-small")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-outline-with-image-small"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-outline-with-image": {
|
||||
name: "item-outline-with-image",
|
||||
filePath: "examples/radix/item-outline-with-image.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/item-outline-with-image")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-outline-with-image"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-outline": {
|
||||
name: "item-outline",
|
||||
filePath: "examples/radix/item-outline.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/item-outline")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-outline"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-separator-example": {
|
||||
name: "item-separator-example",
|
||||
filePath: "examples/radix/item-separator-example.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/item-separator-example")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-separator-example"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-size": {
|
||||
name: "item-size",
|
||||
filePath: "examples/radix/item-size.tsx",
|
||||
@@ -9356,58 +9083,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-default-extra-small": {
|
||||
name: "item-default-extra-small",
|
||||
filePath: "examples/base/item-default-extra-small.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/item-default-extra-small")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-default-extra-small"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-default-small": {
|
||||
name: "item-default-small",
|
||||
filePath: "examples/base/item-default-small.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/item-default-small")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-default-small"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-default-with-image": {
|
||||
name: "item-default-with-image",
|
||||
filePath: "examples/base/item-default-with-image.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/item-default-with-image")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-default-with-image"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-default": {
|
||||
name: "item-default",
|
||||
filePath: "examples/base/item-default.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/item-default")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-default"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-demo": {
|
||||
name: "item-demo",
|
||||
filePath: "examples/base/item-demo.tsx",
|
||||
@@ -9434,32 +9109,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-footer-examples": {
|
||||
name: "item-footer-examples",
|
||||
filePath: "examples/base/item-footer-examples.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/item-footer-examples")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-footer-examples"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-group-default": {
|
||||
name: "item-group-default",
|
||||
filePath: "examples/base/item-group-default.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/item-group-default")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-group-default"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-group": {
|
||||
name: "item-group",
|
||||
filePath: "examples/base/item-group.tsx",
|
||||
@@ -9473,32 +9122,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-header-and-footer-examples": {
|
||||
name: "item-header-and-footer-examples",
|
||||
filePath: "examples/base/item-header-and-footer-examples.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/item-header-and-footer-examples")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-header-and-footer-examples"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-header-examples": {
|
||||
name: "item-header-examples",
|
||||
filePath: "examples/base/item-header-examples.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/item-header-examples")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-header-examples"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-header": {
|
||||
name: "item-header",
|
||||
filePath: "examples/base/item-header.tsx",
|
||||
@@ -9538,45 +9161,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-link-default": {
|
||||
name: "item-link-default",
|
||||
filePath: "examples/base/item-link-default.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/item-link-default")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-link-default"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-link-muted": {
|
||||
name: "item-link-muted",
|
||||
filePath: "examples/base/item-link-muted.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/item-link-muted")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-link-muted"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-link-outline": {
|
||||
name: "item-link-outline",
|
||||
filePath: "examples/base/item-link-outline.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/item-link-outline")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-link-outline"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-link": {
|
||||
name: "item-link",
|
||||
filePath: "examples/base/item-link.tsx",
|
||||
@@ -9590,149 +9174,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-muted-extra-small": {
|
||||
name: "item-muted-extra-small",
|
||||
filePath: "examples/base/item-muted-extra-small.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/item-muted-extra-small")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-muted-extra-small"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-muted-small": {
|
||||
name: "item-muted-small",
|
||||
filePath: "examples/base/item-muted-small.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/item-muted-small")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-muted-small"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-muted-with-image": {
|
||||
name: "item-muted-with-image",
|
||||
filePath: "examples/base/item-muted-with-image.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/item-muted-with-image")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-muted-with-image"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-muted": {
|
||||
name: "item-muted",
|
||||
filePath: "examples/base/item-muted.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/item-muted")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-muted"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-outline-extra-small": {
|
||||
name: "item-outline-extra-small",
|
||||
filePath: "examples/base/item-outline-extra-small.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/item-outline-extra-small")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-outline-extra-small"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-outline-small": {
|
||||
name: "item-outline-small",
|
||||
filePath: "examples/base/item-outline-small.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/item-outline-small")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-outline-small"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-outline-with-image-extra-small": {
|
||||
name: "item-outline-with-image-extra-small",
|
||||
filePath: "examples/base/item-outline-with-image-extra-small.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/item-outline-with-image-extra-small")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-outline-with-image-extra-small"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-outline-with-image-small": {
|
||||
name: "item-outline-with-image-small",
|
||||
filePath: "examples/base/item-outline-with-image-small.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/item-outline-with-image-small")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-outline-with-image-small"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-outline-with-image": {
|
||||
name: "item-outline-with-image",
|
||||
filePath: "examples/base/item-outline-with-image.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/item-outline-with-image")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-outline-with-image"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-outline": {
|
||||
name: "item-outline",
|
||||
filePath: "examples/base/item-outline.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/item-outline")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-outline"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-separator-example": {
|
||||
name: "item-separator-example",
|
||||
filePath: "examples/base/item-separator-example.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/item-separator-example")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "item-separator-example"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"item-size": {
|
||||
name: "item-size",
|
||||
filePath: "examples/base/item-size.tsx",
|
||||
|
||||
@@ -1,112 +0,0 @@
|
||||
import { Button } from "@/examples/base/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/base/ui/item"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function ItemDefaultExtraSmall() {
|
||||
return (
|
||||
<>
|
||||
<Item size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title Only</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Action
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This is a description that provides additional context.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes a title, description, and action button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Action
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item size="xs">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item size="xs">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item size="xs">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes media, title, and description.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item size="xs">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete item with all components: media, title, description, and
|
||||
button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Multiple Actions</ItemTitle>
|
||||
<ItemDescription>
|
||||
Item with multiple action buttons in the actions area.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size="sm">Confirm</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
import { Button } from "@/examples/base/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/base/ui/item"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function ItemDefaultSmall() {
|
||||
return (
|
||||
<>
|
||||
<Item size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title Only</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Action
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This is a description that provides additional context.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes a title, description, and action button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Action
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item size="sm">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item size="sm">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item size="sm">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes media, title, and description.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item size="sm">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete item with all components: media, title, description, and
|
||||
button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Multiple Actions</ItemTitle>
|
||||
<ItemDescription>
|
||||
Item with multiple action buttons in the actions area.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size="sm">Confirm</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
import Image from "next/image"
|
||||
import { Button } from "@/examples/base/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/base/ui/item"
|
||||
|
||||
export function ItemDefaultWithImage() {
|
||||
return (
|
||||
<>
|
||||
<Item>
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/Project"
|
||||
alt="Project"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Project Dashboard</ItemTitle>
|
||||
<ItemDescription>
|
||||
Overview of project settings and configuration.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item>
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/Document"
|
||||
alt="Document"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Document</ItemTitle>
|
||||
<ItemDescription>A document with metadata displayed.</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
View
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item>
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/File"
|
||||
alt="File"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>File Attachment</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete file with image, title, description, and action button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Download</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,108 +0,0 @@
|
||||
import { Button } from "@/examples/base/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/base/ui/item"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function ItemDefault() {
|
||||
return (
|
||||
<>
|
||||
<Item>
|
||||
<ItemContent>
|
||||
<ItemTitle>Title Only</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item>
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item>
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This is a description that provides additional context.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item>
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes a title, description, and action button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item>
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item>
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item>
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes media, title, and description.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item>
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete item with all components: media, title, description, and
|
||||
button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item>
|
||||
<ItemContent>
|
||||
<ItemTitle>Multiple Actions</ItemTitle>
|
||||
<ItemDescription>
|
||||
Item with multiple action buttons in the actions area.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size="sm">Confirm</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -38,36 +38,32 @@ const people = [
|
||||
|
||||
export function ItemDropdown() {
|
||||
return (
|
||||
<div className="flex min-h-64 w-full max-w-md flex-col items-center gap-6">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
render={<Button variant="outline" size="sm" className="w-fit" />}
|
||||
>
|
||||
Select <ChevronDownIcon />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-72 [--radius:0.65rem]" align="end">
|
||||
<DropdownMenuGroup>
|
||||
{people.map((person) => (
|
||||
<DropdownMenuItem key={person.username} className="p-0">
|
||||
<Item size="sm" className="w-full p-2">
|
||||
<ItemMedia>
|
||||
<Avatar className="size-8">
|
||||
<AvatarImage src={person.avatar} className="grayscale" />
|
||||
<AvatarFallback>
|
||||
{person.username.charAt(0)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</ItemMedia>
|
||||
<ItemContent className="gap-0.5">
|
||||
<ItemTitle>{person.username}</ItemTitle>
|
||||
<ItemDescription>{person.email}</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger render={<Button variant="outline" />}>
|
||||
Select <ChevronDownIcon />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-48" align="end">
|
||||
<DropdownMenuGroup>
|
||||
{people.map((person) => (
|
||||
<DropdownMenuItem key={person.username}>
|
||||
<Item size="xs" className="w-full p-2">
|
||||
<ItemMedia>
|
||||
<Avatar className="size-[--spacing(6.5)]">
|
||||
<AvatarImage src={person.avatar} className="grayscale" />
|
||||
<AvatarFallback>{person.username.charAt(0)}</AvatarFallback>
|
||||
</Avatar>
|
||||
</ItemMedia>
|
||||
<ItemContent className="gap-0">
|
||||
<ItemTitle>{person.username}</ItemTitle>
|
||||
<ItemDescription className="leading-none">
|
||||
{person.email}
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,54 +0,0 @@
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemFooter,
|
||||
ItemTitle,
|
||||
} from "@/examples/base/ui/item"
|
||||
|
||||
export function ItemFooterExamples() {
|
||||
return (
|
||||
<>
|
||||
<Item>
|
||||
<ItemContent>
|
||||
<ItemTitle>Quarterly Report Q4 2024</ItemTitle>
|
||||
<ItemDescription>
|
||||
Financial overview including revenue, expenses, and growth metrics
|
||||
for the fourth quarter.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemFooter>
|
||||
<span className="text-muted-foreground text-sm">
|
||||
Last updated 2 hours ago
|
||||
</span>
|
||||
</ItemFooter>
|
||||
</Item>
|
||||
<Item variant="outline">
|
||||
<ItemContent>
|
||||
<ItemTitle>User Research Findings</ItemTitle>
|
||||
<ItemDescription>
|
||||
Insights from interviews and surveys conducted with 50+ users across
|
||||
different demographics.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemFooter>
|
||||
<span className="text-muted-foreground text-sm">
|
||||
Created by Sarah Chen
|
||||
</span>
|
||||
</ItemFooter>
|
||||
</Item>
|
||||
<Item variant="muted">
|
||||
<ItemContent>
|
||||
<ItemTitle>Product Roadmap</ItemTitle>
|
||||
<ItemDescription>
|
||||
Planned features and improvements scheduled for the next three
|
||||
months.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemFooter>
|
||||
<span className="text-muted-foreground text-sm">12 comments</span>
|
||||
</ItemFooter>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemGroup,
|
||||
ItemTitle,
|
||||
} from "@/examples/base/ui/item"
|
||||
|
||||
export function DefaultItemGroup() {
|
||||
return (
|
||||
<ItemGroup>
|
||||
<Item>
|
||||
<ItemContent>
|
||||
<ItemTitle>Item 1</ItemTitle>
|
||||
<ItemDescription>First item in the group.</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item>
|
||||
<ItemContent>
|
||||
<ItemTitle>Item 2</ItemTitle>
|
||||
<ItemDescription>Second item in the group.</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item>
|
||||
<ItemContent>
|
||||
<ItemTitle>Item 3</ItemTitle>
|
||||
<ItemDescription>Third item in the group.</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</ItemGroup>
|
||||
)
|
||||
}
|
||||
@@ -33,31 +33,26 @@ const people = [
|
||||
|
||||
export function ItemGroupExample() {
|
||||
return (
|
||||
<div className="flex w-full max-w-md flex-col gap-6">
|
||||
<ItemGroup>
|
||||
{people.map((person, index) => (
|
||||
<React.Fragment key={person.username}>
|
||||
<Item>
|
||||
<ItemMedia>
|
||||
<Avatar>
|
||||
<AvatarImage src={person.avatar} className="grayscale" />
|
||||
<AvatarFallback>{person.username.charAt(0)}</AvatarFallback>
|
||||
</Avatar>
|
||||
</ItemMedia>
|
||||
<ItemContent className="gap-1">
|
||||
<ItemTitle>{person.username}</ItemTitle>
|
||||
<ItemDescription>{person.email}</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="ghost" size="icon" className="rounded-full">
|
||||
<PlusIcon />
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
{index !== people.length - 1 && <ItemSeparator />}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</ItemGroup>
|
||||
</div>
|
||||
<ItemGroup className="max-w-sm">
|
||||
{people.map((person, index) => (
|
||||
<Item key={person.username} variant="outline">
|
||||
<ItemMedia>
|
||||
<Avatar>
|
||||
<AvatarImage src={person.avatar} className="grayscale" />
|
||||
<AvatarFallback>{person.username.charAt(0)}</AvatarFallback>
|
||||
</Avatar>
|
||||
</ItemMedia>
|
||||
<ItemContent className="gap-1">
|
||||
<ItemTitle>{person.username}</ItemTitle>
|
||||
<ItemDescription>{person.email}</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="ghost" size="icon" className="rounded-full">
|
||||
<PlusIcon />
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
))}
|
||||
</ItemGroup>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,66 +0,0 @@
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemFooter,
|
||||
ItemHeader,
|
||||
ItemTitle,
|
||||
} from "@/examples/base/ui/item"
|
||||
|
||||
export function ItemHeaderAndFooterExamples() {
|
||||
return (
|
||||
<>
|
||||
<Item>
|
||||
<ItemHeader>
|
||||
<span className="text-sm font-medium">Team Project</span>
|
||||
</ItemHeader>
|
||||
<ItemContent>
|
||||
<ItemTitle>Website Redesign</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete overhaul of the company website with modern design
|
||||
principles and improved user experience.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemFooter>
|
||||
<span className="text-muted-foreground text-sm">
|
||||
Updated 5 minutes ago
|
||||
</span>
|
||||
</ItemFooter>
|
||||
</Item>
|
||||
<Item variant="outline">
|
||||
<ItemHeader>
|
||||
<span className="text-sm font-medium">Client Work</span>
|
||||
</ItemHeader>
|
||||
<ItemContent>
|
||||
<ItemTitle>Mobile App Development</ItemTitle>
|
||||
<ItemDescription>
|
||||
Building a cross-platform mobile application for iOS and Android
|
||||
with React Native.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemFooter>
|
||||
<span className="text-muted-foreground text-sm">
|
||||
Status: In Progress
|
||||
</span>
|
||||
</ItemFooter>
|
||||
</Item>
|
||||
<Item variant="muted">
|
||||
<ItemHeader>
|
||||
<span className="text-sm font-medium">Documentation</span>
|
||||
</ItemHeader>
|
||||
<ItemContent>
|
||||
<ItemTitle>API Integration Guide</ItemTitle>
|
||||
<ItemDescription>
|
||||
Step-by-step instructions for integrating third-party APIs with
|
||||
authentication and error handling.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemFooter>
|
||||
<span className="text-muted-foreground text-sm">
|
||||
Category: Technical • 3 attachments
|
||||
</span>
|
||||
</ItemFooter>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemHeader,
|
||||
ItemTitle,
|
||||
} from "@/examples/base/ui/item"
|
||||
|
||||
export function ItemHeaderExamples() {
|
||||
return (
|
||||
<>
|
||||
<Item>
|
||||
<ItemHeader>
|
||||
<span className="text-sm font-medium">Design System</span>
|
||||
</ItemHeader>
|
||||
<ItemContent>
|
||||
<ItemTitle>Component Library</ItemTitle>
|
||||
<ItemDescription>
|
||||
A comprehensive collection of reusable UI components for building
|
||||
consistent interfaces.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline">
|
||||
<ItemHeader>
|
||||
<span className="text-sm font-medium">Marketing</span>
|
||||
</ItemHeader>
|
||||
<ItemContent>
|
||||
<ItemTitle>Campaign Analytics</ItemTitle>
|
||||
<ItemDescription>
|
||||
Track performance metrics and engagement rates across all marketing
|
||||
channels.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted">
|
||||
<ItemHeader>
|
||||
<span className="text-sm font-medium">Engineering</span>
|
||||
</ItemHeader>
|
||||
<ItemContent>
|
||||
<ItemTitle>API Documentation</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete reference guide for all available endpoints and
|
||||
authentication methods.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
import { Button } from "@/examples/base/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemGroup,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/base/ui/item"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function ItemLinkDefault() {
|
||||
return (
|
||||
<>
|
||||
<ItemGroup>
|
||||
<Item render={<a href="#" />}>
|
||||
<ItemContent>
|
||||
<ItemTitle>Title Only (Link)</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item render={<a href="#" />}>
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description (Link)</ItemTitle>
|
||||
<ItemDescription>
|
||||
Clickable item with title and description.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item render={<a href="#" />}>
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title (Link)</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item render={<a href="#" />}>
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description (Link)</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete link item with media, title, and description.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item render={<a href="#" />}>
|
||||
<ItemContent>
|
||||
<ItemTitle>With Actions (Link)</ItemTitle>
|
||||
<ItemDescription>
|
||||
Link item that also has action buttons.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Share
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</ItemGroup>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
import { Button } from "@/examples/base/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemGroup,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/base/ui/item"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function ItemLinkMuted() {
|
||||
return (
|
||||
<>
|
||||
<ItemGroup>
|
||||
<Item variant="muted" render={<a href="#" />}>
|
||||
<ItemContent>
|
||||
<ItemTitle>Title Only (Link)</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted" render={<a href="#" />}>
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description (Link)</ItemTitle>
|
||||
<ItemDescription>
|
||||
Clickable item with title and description.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted" render={<a href="#" />}>
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title (Link)</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted" render={<a href="#" />}>
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description (Link)</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete link item with media, title, and description.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted" render={<a href="#" />}>
|
||||
<ItemContent>
|
||||
<ItemTitle>With Actions (Link)</ItemTitle>
|
||||
<ItemDescription>
|
||||
Link item that also has action buttons.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Share
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</ItemGroup>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
import { Button } from "@/examples/base/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemGroup,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/base/ui/item"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function ItemLinkOutline() {
|
||||
return (
|
||||
<>
|
||||
<ItemGroup>
|
||||
<Item variant="outline" render={<a href="#" />}>
|
||||
<ItemContent>
|
||||
<ItemTitle>Title Only (Link)</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline" render={<a href="#" />}>
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description (Link)</ItemTitle>
|
||||
<ItemDescription>
|
||||
Clickable item with title and description.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline" render={<a href="#" />}>
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title (Link)</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline" render={<a href="#" />}>
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description (Link)</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete link item with media, title, and description.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline" render={<a href="#" />}>
|
||||
<ItemContent>
|
||||
<ItemTitle>With Actions (Link)</ItemTitle>
|
||||
<ItemDescription>
|
||||
Link item that also has action buttons.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Share
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</ItemGroup>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
import { Button } from "@/examples/base/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/base/ui/item"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function ItemMutedExtraSmall() {
|
||||
return (
|
||||
<>
|
||||
<Item variant="muted" size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title Only</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted" size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Action
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="muted" size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This is a description that provides additional context.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted" size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes a title, description, and action button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Action
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="muted" size="xs">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted" size="xs">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="muted" size="xs">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes media, title, and description.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted" size="xs">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete item with all components: media, title, description, and
|
||||
button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="muted" size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Multiple Actions</ItemTitle>
|
||||
<ItemDescription>
|
||||
Item with multiple action buttons in the actions area.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size="sm">Confirm</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
import { Button } from "@/examples/base/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/base/ui/item"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function ItemMutedSmall() {
|
||||
return (
|
||||
<>
|
||||
<Item variant="muted" size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title Only</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted" size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Action
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="muted" size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This is a description that provides additional context.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted" size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes a title, description, and action button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Action
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="muted" size="sm">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted" size="sm">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="muted" size="sm">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes media, title, and description.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted" size="sm">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete item with all components: media, title, description, and
|
||||
button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="muted" size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Multiple Actions</ItemTitle>
|
||||
<ItemDescription>
|
||||
Item with multiple action buttons in the actions area.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size="sm">Confirm</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
import Image from "next/image"
|
||||
import { Button } from "@/examples/base/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/base/ui/item"
|
||||
|
||||
export function ItemMutedWithImage() {
|
||||
return (
|
||||
<>
|
||||
<Item variant="muted">
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/Project"
|
||||
alt="Project"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Project Dashboard</ItemTitle>
|
||||
<ItemDescription>
|
||||
Overview of project settings and configuration.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted">
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/Document"
|
||||
alt="Document"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Document</ItemTitle>
|
||||
<ItemDescription>A document with metadata displayed.</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
View
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="muted">
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/File"
|
||||
alt="File"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>File Attachment</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete file with image, title, description, and action button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Download</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,108 +0,0 @@
|
||||
import { Button } from "@/examples/base/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/base/ui/item"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function MutedVariantItems() {
|
||||
return (
|
||||
<>
|
||||
<Item variant="muted">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title Only</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="muted">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This is a description that provides additional context.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes a title, description, and action button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="muted">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="muted">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes media, title, and description.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete item with all components: media, title, description, and
|
||||
button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="muted">
|
||||
<ItemContent>
|
||||
<ItemTitle>Multiple Actions</ItemTitle>
|
||||
<ItemDescription>
|
||||
Item with multiple action buttons in the actions area.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size="sm">Confirm</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
import { Button } from "@/examples/base/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/base/ui/item"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function ItemOutlineExtraSmall() {
|
||||
return (
|
||||
<>
|
||||
<Item variant="outline" size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title Only</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline" size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Action
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline" size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This is a description that provides additional context.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline" size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes a title, description, and action button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Action
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline" size="xs">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline" size="xs">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline" size="xs">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes media, title, and description.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline" size="xs">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete item with all components: media, title, description, and
|
||||
button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline" size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Multiple Actions</ItemTitle>
|
||||
<ItemDescription>
|
||||
Item with multiple action buttons in the actions area.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size="sm">Confirm</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
import { Button } from "@/examples/base/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/base/ui/item"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function ItemOutlineSmall() {
|
||||
return (
|
||||
<>
|
||||
<Item variant="outline" size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title Only</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline" size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Action
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline" size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This is a description that provides additional context.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline" size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes a title, description, and action button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Action
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline" size="sm">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline" size="sm">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline" size="sm">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes media, title, and description.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline" size="sm">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete item with all components: media, title, description, and
|
||||
button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline" size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Multiple Actions</ItemTitle>
|
||||
<ItemDescription>
|
||||
Item with multiple action buttons in the actions area.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size="sm">Confirm</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,66 +0,0 @@
|
||||
import Image from "next/image"
|
||||
import { Button } from "@/examples/base/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/base/ui/item"
|
||||
|
||||
export function ItemOutlineWithImageExtraSmall() {
|
||||
return (
|
||||
<>
|
||||
<Item variant="outline" size="xs">
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/Project"
|
||||
alt="Project"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Project Dashboard</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline" size="xs">
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/Document"
|
||||
alt="Document"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Document</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
View
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline" size="xs">
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/File"
|
||||
alt="File"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>File Attachment</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Download</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
import Image from "next/image"
|
||||
import { Button } from "@/examples/base/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/base/ui/item"
|
||||
|
||||
export function ItemOutlineWithImageSmall() {
|
||||
return (
|
||||
<>
|
||||
<Item variant="outline" size="sm">
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/Project"
|
||||
alt="Project"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Project Dashboard</ItemTitle>
|
||||
<ItemDescription>
|
||||
Overview of project settings and configuration.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline" size="sm">
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/Document"
|
||||
alt="Document"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Document</ItemTitle>
|
||||
<ItemDescription>A document with metadata displayed.</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
View
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline" size="sm">
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/File"
|
||||
alt="File"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>File Attachment</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete file with image, title, description, and action button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Download</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
import Image from "next/image"
|
||||
import { Button } from "@/examples/base/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/base/ui/item"
|
||||
|
||||
export function OutlineVariantItemsWithImage() {
|
||||
return (
|
||||
<>
|
||||
<Item variant="outline">
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/Project"
|
||||
alt="Project"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Project Dashboard</ItemTitle>
|
||||
<ItemDescription>
|
||||
Overview of project settings and configuration.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline">
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/Document"
|
||||
alt="Document"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Document</ItemTitle>
|
||||
<ItemDescription>A document with metadata displayed.</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
View
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline">
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/File"
|
||||
alt="File"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>File Attachment</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete file with image, title, description, and action button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Download</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,108 +0,0 @@
|
||||
import { Button } from "@/examples/base/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/base/ui/item"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function OutlineVariantItems() {
|
||||
return (
|
||||
<>
|
||||
<Item variant="outline">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title Only</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This is a description that provides additional context.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes a title, description, and action button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes media, title, and description.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete item with all components: media, title, description, and
|
||||
button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline">
|
||||
<ItemContent>
|
||||
<ItemTitle>Multiple Actions</ItemTitle>
|
||||
<ItemDescription>
|
||||
Item with multiple action buttons in the actions area.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size="sm">Confirm</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemGroup,
|
||||
ItemMedia,
|
||||
ItemSeparator,
|
||||
ItemTitle,
|
||||
} from "@/examples/base/ui/item"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function ItemSeparatorExample() {
|
||||
return (
|
||||
<ItemGroup>
|
||||
<Item variant="outline">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Inbox</ItemTitle>
|
||||
<ItemDescription>View all incoming messages.</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<ItemSeparator />
|
||||
<Item variant="outline">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Sent</ItemTitle>
|
||||
<ItemDescription>View all sent messages.</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<ItemSeparator />
|
||||
<Item variant="outline">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Drafts</ItemTitle>
|
||||
<ItemDescription>View all draft messages.</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<ItemSeparator />
|
||||
<Item variant="outline">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Archive</ItemTitle>
|
||||
<ItemDescription>View archived messages.</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</ItemGroup>
|
||||
)
|
||||
}
|
||||
@@ -1,40 +1,43 @@
|
||||
import { Button } from "@/examples/base/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/base/ui/item"
|
||||
import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function ItemSizeDemo() {
|
||||
return (
|
||||
<div className="flex w-full max-w-md flex-col gap-6">
|
||||
<Item variant="outline">
|
||||
<ItemContent>
|
||||
<ItemTitle>Basic Item</ItemTitle>
|
||||
<ItemDescription>
|
||||
A simple item with title and description.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Action
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline" size="sm" render={<a href="#" />}>
|
||||
<ItemMedia>
|
||||
<BadgeCheckIcon className="size-5" />
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Your profile has been verified.</ItemTitle>
|
||||
<ItemTitle>Default Size</ItemTitle>
|
||||
<ItemDescription>
|
||||
The standard size for most use cases.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline" size="sm">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Small Size</ItemTitle>
|
||||
<ItemDescription>A compact size for dense layouts.</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline" size="xs">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Extra Small Size</ItemTitle>
|
||||
<ItemDescription>The most compact size available.</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<ChevronRightIcon className="size-4" />
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,53 +1,47 @@
|
||||
import { Button } from "@/examples/base/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/base/ui/item"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function ItemVariant() {
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex w-full max-w-md flex-col gap-6">
|
||||
<Item>
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Default Variant</ItemTitle>
|
||||
<ItemDescription>
|
||||
Standard styling with subtle background and borders.
|
||||
Transparent background with no border.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Open
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Outline Variant</ItemTitle>
|
||||
<ItemDescription>
|
||||
Outlined style with clear borders and transparent background.
|
||||
Outlined style with a visible border.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Open
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="muted">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Muted Variant</ItemTitle>
|
||||
<ItemDescription>
|
||||
Subdued appearance with muted colors for secondary content.
|
||||
Muted background for secondary content.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Open
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,95 +0,0 @@
|
||||
import { Button } from "@/examples/radix/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/radix/ui/item"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function ItemDefaultExtraSmall() {
|
||||
return (
|
||||
<>
|
||||
<Item size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title Only</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Action
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Action
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item size="xs">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item size="xs">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item size="xs">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item size="xs">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Multiple Actions</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size="sm">Confirm</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
import { Button } from "@/examples/radix/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/radix/ui/item"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function ItemDefaultSmall() {
|
||||
return (
|
||||
<>
|
||||
<Item size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title Only</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Action
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This is a description that provides additional context.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes a title, description, and action button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Action
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item size="sm">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item size="sm">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item size="sm">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes media, title, and description.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item size="sm">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete item with all components: media, title, description, and
|
||||
button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Multiple Actions</ItemTitle>
|
||||
<ItemDescription>
|
||||
Item with multiple action buttons in the actions area.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size="sm">Confirm</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
import Image from "next/image"
|
||||
import { Button } from "@/examples/radix/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/radix/ui/item"
|
||||
|
||||
export function ItemDefaultWithImage() {
|
||||
return (
|
||||
<>
|
||||
<Item>
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/Project"
|
||||
alt="Project"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Project Dashboard</ItemTitle>
|
||||
<ItemDescription>
|
||||
Overview of project settings and configuration.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item>
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/Document"
|
||||
alt="Document"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Document</ItemTitle>
|
||||
<ItemDescription>A document with metadata displayed.</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
View
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item>
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/File"
|
||||
alt="File"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>File Attachment</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete file with image, title, description, and action button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Download</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,108 +0,0 @@
|
||||
import { Button } from "@/examples/radix/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/radix/ui/item"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function ItemDefault() {
|
||||
return (
|
||||
<>
|
||||
<Item>
|
||||
<ItemContent>
|
||||
<ItemTitle>Title Only</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item>
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item>
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This is a description that provides additional context.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item>
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes a title, description, and action button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item>
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item>
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item>
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes media, title, and description.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item>
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete item with all components: media, title, description, and
|
||||
button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item>
|
||||
<ItemContent>
|
||||
<ItemTitle>Multiple Actions</ItemTitle>
|
||||
<ItemDescription>
|
||||
Item with multiple action buttons in the actions area.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size="sm">Confirm</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -38,36 +38,34 @@ const people = [
|
||||
|
||||
export function ItemDropdown() {
|
||||
return (
|
||||
<div className="flex min-h-64 w-full max-w-md flex-col items-center gap-6">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="sm" className="w-fit">
|
||||
Select <ChevronDownIcon />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-72 [--radius:0.65rem]" align="end">
|
||||
<DropdownMenuGroup>
|
||||
{people.map((person) => (
|
||||
<DropdownMenuItem key={person.username} className="p-0">
|
||||
<Item size="sm" className="w-full p-2">
|
||||
<ItemMedia>
|
||||
<Avatar className="size-8">
|
||||
<AvatarImage src={person.avatar} className="grayscale" />
|
||||
<AvatarFallback>
|
||||
{person.username.charAt(0)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</ItemMedia>
|
||||
<ItemContent className="gap-0.5">
|
||||
<ItemTitle>{person.username}</ItemTitle>
|
||||
<ItemDescription>{person.email}</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline">
|
||||
Select <ChevronDownIcon />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-48" align="end">
|
||||
<DropdownMenuGroup>
|
||||
{people.map((person) => (
|
||||
<DropdownMenuItem key={person.username}>
|
||||
<Item size="xs" className="w-full p-2">
|
||||
<ItemMedia>
|
||||
<Avatar className="size-[--spacing(6.5)]">
|
||||
<AvatarImage src={person.avatar} className="grayscale" />
|
||||
<AvatarFallback>{person.username.charAt(0)}</AvatarFallback>
|
||||
</Avatar>
|
||||
</ItemMedia>
|
||||
<ItemContent className="gap-0">
|
||||
<ItemTitle>{person.username}</ItemTitle>
|
||||
<ItemDescription className="leading-none">
|
||||
{person.email}
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,54 +0,0 @@
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemFooter,
|
||||
ItemTitle,
|
||||
} from "@/examples/radix/ui/item"
|
||||
|
||||
export function ItemFooterExamples() {
|
||||
return (
|
||||
<>
|
||||
<Item>
|
||||
<ItemContent>
|
||||
<ItemTitle>Quarterly Report Q4 2024</ItemTitle>
|
||||
<ItemDescription>
|
||||
Financial overview including revenue, expenses, and growth metrics
|
||||
for the fourth quarter.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemFooter>
|
||||
<span className="text-muted-foreground text-sm">
|
||||
Last updated 2 hours ago
|
||||
</span>
|
||||
</ItemFooter>
|
||||
</Item>
|
||||
<Item variant="outline">
|
||||
<ItemContent>
|
||||
<ItemTitle>User Research Findings</ItemTitle>
|
||||
<ItemDescription>
|
||||
Insights from interviews and surveys conducted with 50+ users across
|
||||
different demographics.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemFooter>
|
||||
<span className="text-muted-foreground text-sm">
|
||||
Created by Sarah Chen
|
||||
</span>
|
||||
</ItemFooter>
|
||||
</Item>
|
||||
<Item variant="muted">
|
||||
<ItemContent>
|
||||
<ItemTitle>Product Roadmap</ItemTitle>
|
||||
<ItemDescription>
|
||||
Planned features and improvements scheduled for the next three
|
||||
months.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemFooter>
|
||||
<span className="text-muted-foreground text-sm">12 comments</span>
|
||||
</ItemFooter>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -33,31 +33,26 @@ const people = [
|
||||
|
||||
export function ItemGroupExample() {
|
||||
return (
|
||||
<div className="flex w-full max-w-md flex-col gap-6">
|
||||
<ItemGroup>
|
||||
{people.map((person, index) => (
|
||||
<React.Fragment key={person.username}>
|
||||
<Item>
|
||||
<ItemMedia>
|
||||
<Avatar>
|
||||
<AvatarImage src={person.avatar} className="grayscale" />
|
||||
<AvatarFallback>{person.username.charAt(0)}</AvatarFallback>
|
||||
</Avatar>
|
||||
</ItemMedia>
|
||||
<ItemContent className="gap-1">
|
||||
<ItemTitle>{person.username}</ItemTitle>
|
||||
<ItemDescription>{person.email}</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="ghost" size="icon" className="rounded-full">
|
||||
<PlusIcon />
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
{index !== people.length - 1 && <ItemSeparator />}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</ItemGroup>
|
||||
</div>
|
||||
<ItemGroup className="max-w-sm">
|
||||
{people.map((person, index) => (
|
||||
<Item key={person.username} variant="outline">
|
||||
<ItemMedia>
|
||||
<Avatar>
|
||||
<AvatarImage src={person.avatar} className="grayscale" />
|
||||
<AvatarFallback>{person.username.charAt(0)}</AvatarFallback>
|
||||
</Avatar>
|
||||
</ItemMedia>
|
||||
<ItemContent className="gap-1">
|
||||
<ItemTitle>{person.username}</ItemTitle>
|
||||
<ItemDescription>{person.email}</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="ghost" size="icon" className="rounded-full">
|
||||
<PlusIcon />
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
))}
|
||||
</ItemGroup>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,66 +0,0 @@
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemFooter,
|
||||
ItemHeader,
|
||||
ItemTitle,
|
||||
} from "@/examples/radix/ui/item"
|
||||
|
||||
export function ItemHeaderAndFooterExamples() {
|
||||
return (
|
||||
<>
|
||||
<Item>
|
||||
<ItemHeader>
|
||||
<span className="text-sm font-medium">Team Project</span>
|
||||
</ItemHeader>
|
||||
<ItemContent>
|
||||
<ItemTitle>Website Redesign</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete overhaul of the company website with modern design
|
||||
principles and improved user experience.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemFooter>
|
||||
<span className="text-muted-foreground text-sm">
|
||||
Updated 5 minutes ago
|
||||
</span>
|
||||
</ItemFooter>
|
||||
</Item>
|
||||
<Item variant="outline">
|
||||
<ItemHeader>
|
||||
<span className="text-sm font-medium">Client Work</span>
|
||||
</ItemHeader>
|
||||
<ItemContent>
|
||||
<ItemTitle>Mobile App Development</ItemTitle>
|
||||
<ItemDescription>
|
||||
Building a cross-platform mobile application for iOS and Android
|
||||
with React Native.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemFooter>
|
||||
<span className="text-muted-foreground text-sm">
|
||||
Status: In Progress
|
||||
</span>
|
||||
</ItemFooter>
|
||||
</Item>
|
||||
<Item variant="muted">
|
||||
<ItemHeader>
|
||||
<span className="text-sm font-medium">Documentation</span>
|
||||
</ItemHeader>
|
||||
<ItemContent>
|
||||
<ItemTitle>API Integration Guide</ItemTitle>
|
||||
<ItemDescription>
|
||||
Step-by-step instructions for integrating third-party APIs with
|
||||
authentication and error handling.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemFooter>
|
||||
<span className="text-muted-foreground text-sm">
|
||||
Category: Technical • 3 attachments
|
||||
</span>
|
||||
</ItemFooter>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemHeader,
|
||||
ItemTitle,
|
||||
} from "@/examples/radix/ui/item"
|
||||
|
||||
export function ItemHeaderExamples() {
|
||||
return (
|
||||
<>
|
||||
<Item>
|
||||
<ItemHeader>
|
||||
<span className="text-sm font-medium">Design System</span>
|
||||
</ItemHeader>
|
||||
<ItemContent>
|
||||
<ItemTitle>Component Library</ItemTitle>
|
||||
<ItemDescription>
|
||||
A comprehensive collection of reusable UI components for building
|
||||
consistent interfaces.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline">
|
||||
<ItemHeader>
|
||||
<span className="text-sm font-medium">Marketing</span>
|
||||
</ItemHeader>
|
||||
<ItemContent>
|
||||
<ItemTitle>Campaign Analytics</ItemTitle>
|
||||
<ItemDescription>
|
||||
Track performance metrics and engagement rates across all marketing
|
||||
channels.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted">
|
||||
<ItemHeader>
|
||||
<span className="text-sm font-medium">Engineering</span>
|
||||
</ItemHeader>
|
||||
<ItemContent>
|
||||
<ItemTitle>API Documentation</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete reference guide for all available endpoints and
|
||||
authentication methods.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,73 +0,0 @@
|
||||
import { Button } from "@/examples/radix/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemGroup,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/radix/ui/item"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function ItemLinkDefault() {
|
||||
return (
|
||||
<ItemGroup>
|
||||
<Item asChild>
|
||||
<a href="#">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title Only (Link)</ItemTitle>
|
||||
</ItemContent>
|
||||
</a>
|
||||
</Item>
|
||||
<Item asChild>
|
||||
<a href="#">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description (Link)</ItemTitle>
|
||||
<ItemDescription>
|
||||
Clickable item with title and description.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</a>
|
||||
</Item>
|
||||
<Item asChild>
|
||||
<a href="#">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title (Link)</ItemTitle>
|
||||
</ItemContent>
|
||||
</a>
|
||||
</Item>
|
||||
<Item asChild>
|
||||
<a href="#">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description (Link)</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete link item with media, title, and description.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</a>
|
||||
</Item>
|
||||
<Item asChild>
|
||||
<a href="#">
|
||||
<ItemContent>
|
||||
<ItemTitle>With Actions (Link)</ItemTitle>
|
||||
<ItemDescription>
|
||||
Link item that also has action buttons.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Share
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</a>
|
||||
</Item>
|
||||
</ItemGroup>
|
||||
)
|
||||
}
|
||||
@@ -1,73 +0,0 @@
|
||||
import { Button } from "@/examples/radix/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemGroup,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/radix/ui/item"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function ItemLinkMuted() {
|
||||
return (
|
||||
<ItemGroup>
|
||||
<Item variant="muted" asChild>
|
||||
<a href="#">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title Only (Link)</ItemTitle>
|
||||
</ItemContent>
|
||||
</a>
|
||||
</Item>
|
||||
<Item variant="muted" asChild>
|
||||
<a href="#">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description (Link)</ItemTitle>
|
||||
<ItemDescription>
|
||||
Clickable item with title and description.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</a>
|
||||
</Item>
|
||||
<Item variant="muted" asChild>
|
||||
<a href="#">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title (Link)</ItemTitle>
|
||||
</ItemContent>
|
||||
</a>
|
||||
</Item>
|
||||
<Item variant="muted" asChild>
|
||||
<a href="#">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description (Link)</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete link item with media, title, and description.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</a>
|
||||
</Item>
|
||||
<Item variant="muted" asChild>
|
||||
<a href="#">
|
||||
<ItemContent>
|
||||
<ItemTitle>With Actions (Link)</ItemTitle>
|
||||
<ItemDescription>
|
||||
Link item that also has action buttons.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Share
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</a>
|
||||
</Item>
|
||||
</ItemGroup>
|
||||
)
|
||||
}
|
||||
@@ -1,73 +0,0 @@
|
||||
import { Button } from "@/examples/radix/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemGroup,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/radix/ui/item"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function ItemLinkOutline() {
|
||||
return (
|
||||
<ItemGroup>
|
||||
<Item variant="outline" asChild>
|
||||
<a href="#">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title Only (Link)</ItemTitle>
|
||||
</ItemContent>
|
||||
</a>
|
||||
</Item>
|
||||
<Item variant="outline" asChild>
|
||||
<a href="#">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description (Link)</ItemTitle>
|
||||
<ItemDescription>
|
||||
Clickable item with title and description.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</a>
|
||||
</Item>
|
||||
<Item variant="outline" asChild>
|
||||
<a href="#">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title (Link)</ItemTitle>
|
||||
</ItemContent>
|
||||
</a>
|
||||
</Item>
|
||||
<Item variant="outline" asChild>
|
||||
<a href="#">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description (Link)</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete link item with media, title, and description.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</a>
|
||||
</Item>
|
||||
<Item variant="outline" asChild>
|
||||
<a href="#">
|
||||
<ItemContent>
|
||||
<ItemTitle>With Actions (Link)</ItemTitle>
|
||||
<ItemDescription>
|
||||
Link item that also has action buttons.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Share
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</a>
|
||||
</Item>
|
||||
</ItemGroup>
|
||||
)
|
||||
}
|
||||
@@ -1,95 +0,0 @@
|
||||
import { Button } from "@/examples/radix/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/radix/ui/item"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function ItemMutedExtraSmall() {
|
||||
return (
|
||||
<>
|
||||
<Item variant="muted" size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title Only</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted" size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Action
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="muted" size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted" size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Action
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="muted" size="xs">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted" size="xs">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="muted" size="xs">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted" size="xs">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="muted" size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Multiple Actions</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size="sm">Confirm</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
import { Button } from "@/examples/radix/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/radix/ui/item"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function ItemMutedSmall() {
|
||||
return (
|
||||
<>
|
||||
<Item variant="muted" size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title Only</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted" size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Action
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="muted" size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This is a description that provides additional context.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted" size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes a title, description, and action button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Action
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="muted" size="sm">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted" size="sm">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="muted" size="sm">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes media, title, and description.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted" size="sm">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete item with all components: media, title, description, and
|
||||
button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="muted" size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Multiple Actions</ItemTitle>
|
||||
<ItemDescription>
|
||||
Item with multiple action buttons in the actions area.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size="sm">Confirm</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
import Image from "next/image"
|
||||
import { Button } from "@/examples/radix/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/radix/ui/item"
|
||||
|
||||
export function ItemMutedWithImage() {
|
||||
return (
|
||||
<>
|
||||
<Item variant="muted">
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/Project"
|
||||
alt="Project"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Project Dashboard</ItemTitle>
|
||||
<ItemDescription>
|
||||
Overview of project settings and configuration.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted">
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/Document"
|
||||
alt="Document"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Document</ItemTitle>
|
||||
<ItemDescription>A document with metadata displayed.</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
View
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="muted">
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/File"
|
||||
alt="File"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>File Attachment</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete file with image, title, description, and action button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Download</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,108 +0,0 @@
|
||||
import { Button } from "@/examples/radix/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/radix/ui/item"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function MutedVariantItems() {
|
||||
return (
|
||||
<>
|
||||
<Item variant="muted">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title Only</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="muted">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This is a description that provides additional context.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes a title, description, and action button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="muted">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="muted">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes media, title, and description.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="muted">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete item with all components: media, title, description, and
|
||||
button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="muted">
|
||||
<ItemContent>
|
||||
<ItemTitle>Multiple Actions</ItemTitle>
|
||||
<ItemDescription>
|
||||
Item with multiple action buttons in the actions area.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size="sm">Confirm</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,95 +0,0 @@
|
||||
import { Button } from "@/examples/radix/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/radix/ui/item"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function ItemOutlineExtraSmall() {
|
||||
return (
|
||||
<>
|
||||
<Item variant="outline" size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title Only</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline" size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Action
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline" size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline" size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Action
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline" size="xs">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline" size="xs">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline" size="xs">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline" size="xs">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline" size="xs">
|
||||
<ItemContent>
|
||||
<ItemTitle>Multiple Actions</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size="sm">Confirm</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
import { Button } from "@/examples/radix/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/radix/ui/item"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function ItemOutlineSmall() {
|
||||
return (
|
||||
<>
|
||||
<Item variant="outline" size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title Only</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline" size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Action
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline" size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This is a description that provides additional context.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline" size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes a title, description, and action button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Action
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline" size="sm">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline" size="sm">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline" size="sm">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes media, title, and description.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline" size="sm">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete item with all components: media, title, description, and
|
||||
button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline" size="sm">
|
||||
<ItemContent>
|
||||
<ItemTitle>Multiple Actions</ItemTitle>
|
||||
<ItemDescription>
|
||||
Item with multiple action buttons in the actions area.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size="sm">Confirm</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,66 +0,0 @@
|
||||
import Image from "next/image"
|
||||
import { Button } from "@/examples/radix/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/radix/ui/item"
|
||||
|
||||
export function ItemOutlineWithImageExtraSmall() {
|
||||
return (
|
||||
<>
|
||||
<Item variant="outline" size="xs">
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/Project"
|
||||
alt="Project"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Project Dashboard</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline" size="xs">
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/Document"
|
||||
alt="Document"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Document</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
View
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline" size="xs">
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/File"
|
||||
alt="File"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>File Attachment</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Download</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
import Image from "next/image"
|
||||
import { Button } from "@/examples/radix/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/radix/ui/item"
|
||||
|
||||
export function ItemOutlineWithImageSmall() {
|
||||
return (
|
||||
<>
|
||||
<Item variant="outline" size="sm">
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/Project"
|
||||
alt="Project"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Project Dashboard</ItemTitle>
|
||||
<ItemDescription>
|
||||
Overview of project settings and configuration.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline" size="sm">
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/Document"
|
||||
alt="Document"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Document</ItemTitle>
|
||||
<ItemDescription>A document with metadata displayed.</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
View
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline" size="sm">
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/File"
|
||||
alt="File"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>File Attachment</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete file with image, title, description, and action button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Download</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
import Image from "next/image"
|
||||
import { Button } from "@/examples/radix/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/radix/ui/item"
|
||||
|
||||
export function OutlineVariantItemsWithImage() {
|
||||
return (
|
||||
<>
|
||||
<Item variant="outline">
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/Project"
|
||||
alt="Project"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Project Dashboard</ItemTitle>
|
||||
<ItemDescription>
|
||||
Overview of project settings and configuration.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline">
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/Document"
|
||||
alt="Document"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Document</ItemTitle>
|
||||
<ItemDescription>A document with metadata displayed.</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
View
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline">
|
||||
<ItemMedia variant="image">
|
||||
<Image
|
||||
src="https://avatar.vercel.sh/File"
|
||||
alt="File"
|
||||
width={40}
|
||||
height={40}
|
||||
className="object-cover grayscale"
|
||||
/>
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>File Attachment</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete file with image, title, description, and action button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Download</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,108 +0,0 @@
|
||||
import { Button } from "@/examples/radix/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/radix/ui/item"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function OutlineVariantItems() {
|
||||
return (
|
||||
<>
|
||||
<Item variant="outline">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title Only</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This is a description that provides additional context.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline">
|
||||
<ItemContent>
|
||||
<ItemTitle>Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes a title, description, and action button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title</ItemTitle>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Button</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description</ItemTitle>
|
||||
<ItemDescription>
|
||||
This item includes media, title, and description.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Media + Title + Description + Button</ItemTitle>
|
||||
<ItemDescription>
|
||||
Complete item with all components: media, title, description, and
|
||||
button.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button size="sm">Action</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline">
|
||||
<ItemContent>
|
||||
<ItemTitle>Multiple Actions</ItemTitle>
|
||||
<ItemDescription>
|
||||
Item with multiple action buttons in the actions area.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size="sm">Confirm</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
import {
|
||||
Item,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemGroup,
|
||||
ItemMedia,
|
||||
ItemSeparator,
|
||||
ItemTitle,
|
||||
} from "@/examples/radix/ui/item"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function ItemSeparatorExample() {
|
||||
return (
|
||||
<ItemGroup>
|
||||
<Item variant="outline">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Inbox</ItemTitle>
|
||||
<ItemDescription>View all incoming messages.</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<ItemSeparator />
|
||||
<Item variant="outline">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Sent</ItemTitle>
|
||||
<ItemDescription>View all sent messages.</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<ItemSeparator />
|
||||
<Item variant="outline">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Drafts</ItemTitle>
|
||||
<ItemDescription>View all draft messages.</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<ItemSeparator />
|
||||
<Item variant="outline">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Archive</ItemTitle>
|
||||
<ItemDescription>View archived messages.</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</ItemGroup>
|
||||
)
|
||||
}
|
||||
@@ -1,42 +1,43 @@
|
||||
import { Button } from "@/examples/radix/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/radix/ui/item"
|
||||
import { BadgeCheckIcon, ChevronRightIcon } from "lucide-react"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function ItemSizeDemo() {
|
||||
return (
|
||||
<div className="flex w-full max-w-md flex-col gap-6">
|
||||
<Item variant="outline">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Basic Item</ItemTitle>
|
||||
<ItemTitle>Default Size</ItemTitle>
|
||||
<ItemDescription>
|
||||
A simple item with title and description.
|
||||
The standard size for most use cases.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Action
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline" size="sm" asChild>
|
||||
<a href="#">
|
||||
<ItemMedia>
|
||||
<BadgeCheckIcon className="size-5" />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Your profile has been verified.</ItemTitle>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<ChevronRightIcon className="size-4" />
|
||||
</ItemActions>
|
||||
</a>
|
||||
<Item variant="outline" size="sm">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Small Size</ItemTitle>
|
||||
<ItemDescription>A compact size for dense layouts.</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
<Item variant="outline" size="xs">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Extra Small Size</ItemTitle>
|
||||
<ItemDescription>The most compact size available.</ItemDescription>
|
||||
</ItemContent>
|
||||
</Item>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -1,53 +1,47 @@
|
||||
import { Button } from "@/examples/radix/ui/button"
|
||||
import {
|
||||
Item,
|
||||
ItemActions,
|
||||
ItemContent,
|
||||
ItemDescription,
|
||||
ItemMedia,
|
||||
ItemTitle,
|
||||
} from "@/examples/radix/ui/item"
|
||||
import { InboxIcon } from "lucide-react"
|
||||
|
||||
export function ItemVariant() {
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex w-full max-w-md flex-col gap-6">
|
||||
<Item>
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Default Variant</ItemTitle>
|
||||
<ItemDescription>
|
||||
Standard styling with subtle background and borders.
|
||||
Transparent background with no border.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Open
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="outline">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Outline Variant</ItemTitle>
|
||||
<ItemDescription>
|
||||
Outlined style with clear borders and transparent background.
|
||||
Outlined style with a visible border.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Open
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
<Item variant="muted">
|
||||
<ItemMedia variant="icon">
|
||||
<InboxIcon />
|
||||
</ItemMedia>
|
||||
<ItemContent>
|
||||
<ItemTitle>Muted Variant</ItemTitle>
|
||||
<ItemDescription>
|
||||
Subdued appearance with muted colors for secondary content.
|
||||
Muted background for secondary content.
|
||||
</ItemDescription>
|
||||
</ItemContent>
|
||||
<ItemActions>
|
||||
<Button variant="outline" size="sm">
|
||||
Open
|
||||
</Button>
|
||||
</ItemActions>
|
||||
</Item>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user