Entity
The Entity component serves as a comprehensive container designed to display various elements like thumbnails, actions, menus, and checkboxes in a structured format. It is highly customizable, supporting placeholders for loading states and responsive layouts.
Usage
First of all, you need to import the Entity
component along with its related subcomponents from the kitchn
package.
import { Entity, EntityField, EntityFieldTitle, EntityFieldDescription } from "kitchn"
Fields
Thumbnails
Menu
Actions
Checkbox
Mixed
Skeleton
Props
Name | Type | Default | Required | Description |
---|---|---|---|---|
thumbnail | React.ReactNode | undefined | No | Thumbnail to be displayed on the left side of the entity. |
menuContent | React.ReactNode | undefined | No | Content for the dropdown menu associated with the entity. |
actions | React.ReactNode | undefined | No | Actions (e.g., buttons) to be displayed on the right side of the entity. |
checkbox | React.ReactNode | undefined | No | Checkbox element to be displayed on the left side of the entity. |
placeholder | boolean | false | No | If true , displays placeholder skeletons for all content. |
EntityField Props
Name | Type | Default | Required | Description |
---|---|---|---|---|
title | string | undefined | Yes | Title text to be displayed in the field. |
description | React.ReactNode | undefined | No | Description text to be displayed below the title. |
active | boolean | true | No | If false , dims the title and description to indicate inactive state. |
label | boolean | false | No | If true , applies a label style to the title, including uppercase transformation. |
placeholder | boolean | false | No | If true , displays a skeleton placeholder for the field. |
avatar | React.ReactNode | undefined | No | Avatar or any additional element to be displayed on the right side of the field. |
EntityFieldTitle Props
Name | Type | Default | Required | Description |
---|---|---|---|---|
active | boolean | true | No | If false , dims the title text. |
label | boolean | false | No | If true , applies a label style (uppercase, lighter color) to the title. |
EntityFieldDescription Props
All props from TextProps
are supported.