# components/Surface (zidane-ui)

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

## Components

### `CodePanel`

Component.

Renders monospace output or input in a `pre`, set into its surface.

```ts
function CodePanel(props: CodePanelProps): Element
```

**Parameters**

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

**Returns** `Element`

**Props**

- `children` (`ReactNode`): The text to show.
- `className?` (`string`): Extra classes on the `pre`.
- `maxHeight?` (`string | number`): Maximum height of the panel, as a CSS length or a number of pixels. The panel scrolls past it.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `wrap?` (`boolean`, default `true`): Wrap long lines. When off, the panel scrolls horizontally instead.

Source: [ui/src/components/Surface.tsx:80](https://github.com/Tahul/zidane/blob/main/ui/src/components/Surface.tsx#L80)

### `EmptyState`

Component.

Renders the one empty or placeholder block: an optional icon, a title, a hint and an action,
centred, usually in a tray.

```ts
function EmptyState(props: EmptyStateProps): Element
```

**Parameters**

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

**Returns** `Element`

**Props**

- `action?` (`ReactNode`): Control under the hint, such as a button.
- `className?` (`string`): Extra classes on the wrapping element.
- `compact?` (`boolean`): Less vertical room, for a panel tab.
- `framed?` (`boolean`): Set in a tray. Off inside a surface that is already tray-toned (the side panel): no tray on a tray.
- `hint?` (`ReactNode`): Secondary text under the title.
- `icon?` (`string`): Icon class shown above the title.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `title` (`ReactNode`): Main message.
- `titleAs?` (`'div' | 'h1' | 'h2' | 'h3'`): The title's element: a heading where the empty state is the page (a 404).

Source: [ui/src/components/Surface.tsx:121](https://github.com/Tahul/zidane/blob/main/ui/src/components/Surface.tsx#L121)

### `Meta`

Component.

The technical voice: mono, tabular, small, muted.

```ts
function Meta(props: MetaProps): Element
```

**Parameters**

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

**Returns** `Element`

**Props**

- `children` (`ReactNode`): The value to show.
- `className?` (`string`): Extra classes on the text.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `title?` (`string`): Native tooltip.

Source: [ui/src/components/Surface.tsx:185](https://github.com/Tahul/zidane/blob/main/ui/src/components/Surface.tsx#L185)

### `Raised`

Component.

Renders a card or control lifted off its tray, with a border and the raised shadow. Accepts
the attributes of a `div`.

```ts
function Raised(props: RaisedProps): Element
```

**Parameters**

- `props` (`RaisedProps`): A `radius`, `live` and the attributes of a `div`.

**Returns** `Element`

**Props**

- `live?` (`boolean`): Lift the card one step with the live shadow, for something that is active right now.
- `radius?` (`Radius`, from `TrayProps`, default `'lg'`): Corner radius: `sm`, `md`, `lg` or `xl`.

Source: [ui/src/components/Surface.tsx:50](https://github.com/Tahul/zidane/blob/main/ui/src/components/Surface.tsx#L50)

### `SectionLabel`

Component.

Uppercase label for a section of a panel, menu or form.

```ts
function SectionLabel(props: SectionLabelProps): Element
```

**Parameters**

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

**Returns** `Element`

**Props**

- `children` (`ReactNode`): The label text.
- `className?` (`string`): Extra classes on the label.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/components/Surface.tsx:160](https://github.com/Tahul/zidane/blob/main/ui/src/components/Surface.tsx#L160)

### `Tray`

Component.

Renders the bed of the surface ladder: sections, wells for grouped rows, code and quiet
cards. Accepts the attributes of a `div`.

```ts
function Tray(props: TrayProps): Element
```

**Parameters**

- `props` (`TrayProps`): A `radius` and the attributes of a `div`.

**Returns** `Element`

**Props**

- `radius?` (`Radius`, default `'lg'`): Corner radius: `sm`, `md`, `lg` or `xl`.

Source: [ui/src/components/Surface.tsx:34](https://github.com/Tahul/zidane/blob/main/ui/src/components/Surface.tsx#L34)

## Interfaces

### `CodePanelProps`

Interface.

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

```ts
interface CodePanelProps
```

**Properties**

- `children` (`ReactNode`): The text to show.
- `className?` (`string`): Extra classes on the `pre`.
- `maxHeight?` (`string | number`): Maximum height of the panel, as a CSS length or a number of pixels. The panel scrolls past it.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `wrap?` (`boolean`, default `true`): Wrap long lines. When off, the panel scrolls horizontally instead.

Source: [ui/src/components/Surface.tsx:57](https://github.com/Tahul/zidane/blob/main/ui/src/components/Surface.tsx#L57)

### `EmptyStateProps`

Interface.

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

```ts
interface EmptyStateProps
```

**Properties**

- `action?` (`ReactNode`): Control under the hint, such as a button.
- `className?` (`string`): Extra classes on the wrapping element.
- `compact?` (`boolean`): Less vertical room, for a panel tab.
- `framed?` (`boolean`): Set in a tray. Off inside a surface that is already tray-toned (the side panel): no tray on a tray.
- `hint?` (`ReactNode`): Secondary text under the title.
- `icon?` (`string`): Icon class shown above the title.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `title` (`ReactNode`): Main message.
- `titleAs?` (`'div' | 'h1' | 'h2' | 'h3'`): The title's element: a heading where the empty state is the page (a 404).

Source: [ui/src/components/Surface.tsx:94](https://github.com/Tahul/zidane/blob/main/ui/src/components/Surface.tsx#L94)

### `MetaProps`

Interface.

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

```ts
interface MetaProps
```

**Properties**

- `children` (`ReactNode`): The value to show.
- `className?` (`string`): Extra classes on the text.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.
- `title?` (`string`): Native tooltip.

Source: [ui/src/components/Surface.tsx:169](https://github.com/Tahul/zidane/blob/main/ui/src/components/Surface.tsx#L169)

### `RaisedProps`

Interface.

Props for [`Raised`](https://zidane.si/docs/reference/ui-components-surface.md#Raised): [`TrayProps`](https://zidane.si/docs/reference/ui-components-surface.md#TrayProps) plus `live`.

```ts
interface RaisedProps extends TrayProps
```

**Properties**

- `live?` (`boolean`): Lift the card one step with the live shadow, for something that is active right now.
- `radius?` (`Radius`, from `TrayProps`, default `'lg'`): Corner radius: `sm`, `md`, `lg` or `xl`.

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

### `SectionLabelProps`

Interface.

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

```ts
interface SectionLabelProps
```

**Properties**

- `children` (`ReactNode`): The label text.
- `className?` (`string`): Extra classes on the label.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/components/Surface.tsx:146](https://github.com/Tahul/zidane/blob/main/ui/src/components/Surface.tsx#L146)

### `TrayProps`

Interface.

Props for [`Tray`](https://zidane.si/docs/reference/ui-components-surface.md#Tray): a `radius` and the attributes of a `div`.

```ts
interface TrayProps extends HTMLAttributes<HTMLDivElement>
```

**Properties**

- `radius?` (`Radius`, default `'lg'`): Corner radius: `sm`, `md`, `lg` or `xl`.

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