item/usage

11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Item component basic usage example

Basic usage of the Item component with media, content, and actions: ```tsx <Item> <ItemMedia variant="icon"> <Icon /> </ItemMedia> <ItemContent> <ItemTitle>Title</ItemTitle> <ItemDescription>Description</ItemDescription> </ItemContent> <ItemActions> <Button>Action</Button> </ItemActions> </Item> ```

Item component as link example

To render an Item as a link, use the `render` prop with an anchor element: ```tsx <Item render={<a href="/dashboard" />}> <ItemMedia variant="icon"> <HomeIcon /> </ItemMedia> <ItemContent> <ItemTitle>Dashboard</ItemTitle> <ItemDescription>Overview of your account and activity.</ItemDescription> </ItemContent> </Item> ```

ItemMedia with icon variant

Use ItemMedia with variant="icon" to display an icon within an Item component.

ItemMedia with avatar variant

Use ItemMedia with variant="avatar" to display an avatar within an Item component.

ItemMedia with image variant

Use ItemMedia with variant="image" to display an image within an Item component.

ItemGroup component usage

Use ItemGroup to group related items together with consistent styling. ItemGroup is a container that holds multiple Item components.

ItemHeader component

Use ItemHeader to add a header above the item content. Example usage: ```tsx <Item> <ItemHeader>Header</ItemHeader> <ItemContent>...</ItemContent> </Item> ```

Item component import statement

Import the Item and related components from '@/components/ui/item': Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle.

Item vs Field component usage

Use the Field component if you need to display a form input such as a checkbox, input, radio, or select. Use the Item component if you only need to display content such as a title, description, and actions.

Item component basic usage example

A basic Item component example: <Item><ItemMedia variant="icon"><Icon /></ItemMedia><ItemContent><ItemTitle>Title</ItemTitle><ItemDescription>Description</ItemDescription></ItemContent><ItemActions><Button>Action</Button></ItemActions></Item>

Item as link usage example

To render an Item as a link, use the asChild prop: <Item asChild><a href="/dashboard"><ItemMedia variant="icon"><HomeIcon /></ItemMedia><ItemContent><ItemTitle>Dashboard</ItemTitle><ItemDescription>Overview of your account and activity.</ItemDescription></ItemContent></a></Item>

Give your agent this brain