# components/PanelRows (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/PanelRows.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/components/PanelRows.tsx).

## Components

### `DiffCounts`

Component.

`+120 −8` with the halves colored like a diff, in the meta voice.

```ts
function DiffCounts(props: DiffCountsProps): Element
```

**Parameters**

- `props` (`DiffCountsProps`): Component props.

**Returns** `Element`

**Props**

- `added` (`number`): Number of added lines, shown as `+N` in the success colour.
- `className?` (`string`): Extra classes on the wrapping element.
- `removed` (`number`): Number of removed lines, shown as `-N` in the danger colour.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/components/PanelRows.tsx:39](https://github.com/Tahul/zidane/blob/main/ui/src/components/PanelRows.tsx#L39)

### `RowBadge`

Component.

A small status chip set into the row. A `diff` badge reading `+N −M` renders as `DiffCounts`.

```ts
function RowBadge(props: RowBadgeProps): Element
```

**Parameters**

- `props` (`RowBadgeProps`): Component props.

**Returns** `Element`

**Props**

- `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 `tone="diff"`, text shaped like `+12 -3` renders as [`DiffCounts`](https://zidane.si/docs/reference/ui-components-panel-rows.md#DiffCounts).
- `title?` (`string`): Native tooltip.
- `tone?` (`BadgeTone`): Colour of the text. See [`BadgeTone`](https://zidane.si/docs/reference/ui-components-panel-rows.md#BadgeTone).

Source: [ui/src/components/PanelRows.tsx:67](https://github.com/Tahul/zidane/blob/main/ui/src/components/PanelRows.tsx#L67)

## Constants

### `PANEL_ROW`

Constant.

A flat list row: no fill until hovered, bleeding into the list's padding.

```ts
const PANEL_ROW: 'relative flex items-start gap-2 -mx-2 px-2 py-1.5 rounded-zg-md'
```

Source: [ui/src/components/PanelRows.tsx:9](https://github.com/Tahul/zidane/blob/main/ui/src/components/PanelRows.tsx#L9)

### `PANEL_ROW_HOVER`

Constant.

Class that adds the hover fill to a [`PANEL_ROW`](https://zidane.si/docs/reference/ui-components-panel-rows.md#PANEL_ROW). Left separate for rows that supply their
own hover.

```ts
const PANEL_ROW_HOVER = 'hover:bg-[var(--zg-row-hover)]'
```

Source: [ui/src/components/PanelRows.tsx:14](https://github.com/Tahul/zidane/blob/main/ui/src/components/PanelRows.tsx#L14)

## Interfaces

### `DiffCountsProps`

Interface.

Props for [`DiffCounts`](https://zidane.si/docs/reference/ui-components-panel-rows.md#DiffCounts).

```ts
interface DiffCountsProps
```

**Properties**

- `added` (`number`): Number of added lines, shown as `+N` in the success colour.
- `className?` (`string`): Extra classes on the wrapping element.
- `removed` (`number`): Number of removed lines, shown as `-N` in the danger colour.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/components/PanelRows.tsx:23](https://github.com/Tahul/zidane/blob/main/ui/src/components/PanelRows.tsx#L23)

### `RowBadgeProps`

Interface.

Props for [`RowBadge`](https://zidane.si/docs/reference/ui-components-panel-rows.md#RowBadge).

```ts
interface RowBadgeProps
```

**Properties**

- `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 `tone="diff"`, text shaped like `+12 -3` renders as [`DiffCounts`](https://zidane.si/docs/reference/ui-components-panel-rows.md#DiffCounts).
- `title?` (`string`): Native tooltip.
- `tone?` (`BadgeTone`): Colour of the text. See [`BadgeTone`](https://zidane.si/docs/reference/ui-components-panel-rows.md#BadgeTone).

Source: [ui/src/components/PanelRows.tsx:49](https://github.com/Tahul/zidane/blob/main/ui/src/components/PanelRows.tsx#L49)

## Types

### `BadgeTone`

Type.

Colour of a [`RowBadge`](https://zidane.si/docs/reference/ui-components-panel-rows.md#RowBadge): `neutral` (or none) is muted, `success` and `warn` take their
status colour, and `diff` is monospaced text for `+N -M` counts.

```ts
type BadgeTone = 'neutral' | 'diff' | 'success' | 'warn' | undefined
```

Source: [ui/src/components/PanelRows.tsx:20](https://github.com/Tahul/zidane/blob/main/ui/src/components/PanelRows.tsx#L20)