zidanecomponents/PanelRows
import { … } from 'zidane-ui'ui/src/components/PanelRows.tsx
Components#
DiffCountsComponent#
+120 −8 with the halves colored like a diff, in the meta voice.
function DiffCounts(props: DiffCountsProps): ElementParameters
| Name | Type | Description |
|---|---|---|
| props | DiffCountsProps | Component props. |
Returns
ElementProps
| Name | Type | Description |
|---|---|---|
| added | number | Number of added lines, shown as |
| className? | string | Extra classes on the wrapping element. |
| removed | number | Number of removed lines, shown as |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. |
RowBadgeComponent#
A small status chip set into the row. A diff badge reading +N −M renders as DiffCounts.
function RowBadge(props: RowBadgeProps): ElementParameters
| Name | Type | Description |
|---|---|---|
| props | RowBadgeProps | Component props. |
Returns
ElementProps
| Name | Type | Description |
|---|---|---|
| className? | string | Extra classes on the root element. |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. |
| text | string | Badge text. With |
| title? | string | Native tooltip. |
| tone? | BadgeTone | Colour of the text. See |
Constants#
PANEL_ROWConstant#
A flat list row: no fill until hovered, bleeding into the list's padding.
const PANEL_ROW: 'relative flex items-start gap-2 -mx-2 px-2 py-1.5 rounded-zg-md'PANEL_ROW_HOVERConstant#
Class that adds the hover fill to a PANEL_ROW. Left separate for rows that supply their
own hover.
const PANEL_ROW_HOVER = 'hover:bg-[var(--zg-row-hover)]'Interfaces#
DiffCountsPropsInterface#
Props for DiffCounts.
interface DiffCountsPropsProperties
| Name | Type | Description |
|---|---|---|
| added | number | Number of added lines, shown as |
| className? | string | Extra classes on the wrapping element. |
| removed | number | Number of removed lines, shown as |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. |
RowBadgePropsInterface#
Props for RowBadge.
interface RowBadgePropsProperties
| Name | Type | Description |
|---|---|---|
| className? | string | Extra classes on the root element. |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. |
| text | string | Badge text. With |
| title? | string | Native tooltip. |
| tone? | BadgeTone | Colour of the text. See |
Types#
BadgeToneType#
Colour of a RowBadge: neutral (or none) is muted, success and warn take their
status colour, and diff is monospaced text for +N -M counts.
type BadgeTone = 'neutral' | 'diff' | 'success' | 'warn' | undefined