# Surface

A card container for grouping related content.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Surface.tsx)

## Overview

A surface is a card container that renders a `div` by default.

Its `size` sets the corner radius and padding together.

## Examples

### Basic

```tsx
import { style, Surface } from '@tempoxyz/ds'
import { SwapHorizontal } from '@tempoxyz/ds/icons'

export function Demo() {
  return (
    <div {...styles.grid()}>
      <Surface>
        <Surface.Header>
          <Surface.Title>
            <SwapHorizontal />
            Routes
          </Surface.Title>
        </Surface.Header>
        <Surface.Description>
          Move stablecoins between Tempo and other networks.
        </Surface.Description>
        <Surface.Links>
          <a href="#basic">Make a transfer</a>
          <a href="#basic">Accept deposits</a>
          <a href="#basic">Supported routes</a>
        </Surface.Links>
      </Surface>
    </div>
  )
}

namespace styles {
  export const grid = style({
    alignItems: 'start',
    backgroundColor: 'background.primary',
    display: 'grid',
    gap: '3',
    padding: '4',
    gridTemplateColumns: 'repeat(auto-fill, minmax(14rem, 1fr)) !custom',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Surface/Basic.tsx)

### Header

Place a `Surface.Title` and an optional action inside `Surface.Header`.

```tsx
import { Button, style, Surface, Token } from '@tempoxyz/ds'

const balances = [
  ['Bridged USDC (Stargate)', '0x20c000000000000000000000b9537d11c60e8b50', '$2.02'],
  ['pathUSD', '0x20c0000000000000000000000000000000000000', '$0.12'],
  ['USDT0', '0x20c00000000000000000000014f22ca97301eb73', '$0.10'],
] as const

export function Demo() {
  return (
    <div {...styles.grid()}>
      <Surface>
        <Surface.Header>
          <Surface.Title>Balances</Surface.Title>
          <Button size="small" variant="text">
            View all
          </Button>
        </Surface.Header>
        {balances.map(([name, address, amount]) => (
          <div key={address} {...styles.balance()}>
            <Token address={address} />
            <span {...styles.name()}>{name}</span>
            {amount}
          </div>
        ))}
      </Surface>
    </div>
  )
}

namespace styles {
  export const balance = style({
    alignItems: 'center',
    columnGap: '3',
    display: 'flex',
    paddingBlock: '2',
    typography: 'label.16.strong',
  })

  export const grid = style({
    backgroundColor: 'background.primary',
    display: 'grid',
    padding: '4',
  })

  export const name = style({ flex: '1 !custom' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Surface/Header.tsx)

### Size

Set `size` to `small`, `medium`, or `large` to change the corner radius and padding together. It defaults to `large`.

```tsx
import { style, Surface } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.grid()}>
      {(['large', 'medium', 'small'] as const).map((size) => (
        <Surface key={size} size={size}>
          Size {size}
        </Surface>
      ))}
    </div>
  )
}

namespace styles {
  // Surfaces keep their content height instead of stretching to the tallest one in a row.
  export const grid = style({
    alignItems: 'start',
    backgroundColor: 'background.primary',
    display: 'grid',
    gap: '3',
    padding: '4',
    gridTemplateColumns: 'repeat(auto-fill, minmax(14rem, 1fr)) !custom',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Surface/Size.tsx)

### Render

Pass a `button` or link to `render` for a pressable surface with hover, press, and focus styles.

```tsx
import { style, Surface } from '@tempoxyz/ds'
import { SwapHorizontal } from '@tempoxyz/ds/icons'

export function Demo() {
  return (
    <div {...styles.grid()}>
      <Surface render={<a href="#render" />}>
        <Surface.Header>
          <Surface.Title>
            <SwapHorizontal />
            Routes
          </Surface.Title>
        </Surface.Header>
        <Surface.Description>
          Move stablecoins between Tempo and other networks.
        </Surface.Description>
      </Surface>
      <Surface render={<button type="button" />}>Interactive button</Surface>
      <Surface render={<a href="#render" />}>Interactive link</Surface>
    </div>
  )
}

namespace styles {
  // Surfaces keep their content height instead of stretching to the tallest one in a row.
  export const grid = style({
    alignItems: 'start',
    backgroundColor: 'background.primary',
    display: 'grid',
    gap: '3',
    padding: '4',
    gridTemplateColumns: 'repeat(auto-fill, minmax(14rem, 1fr)) !custom',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Surface/Render.tsx)

### Disabled

Set `disabled` on a pressable surface to block interaction.

```tsx
import { style, Surface } from '@tempoxyz/ds'

export function Demo() {
  return (
    <div {...styles.grid()}>
      <Surface disabled render={<button type="button" />}>
        Disabled button
      </Surface>
    </div>
  )
}

namespace styles {
  export const grid = style({
    alignItems: 'start',
    backgroundColor: 'background.primary',
    display: 'grid',
    padding: '4',
    gridTemplateColumns: 'repeat(auto-fill, minmax(14rem, 1fr)) !custom',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Surface/Disabled.tsx)

## Guidelines

TODO: Write guidelines for Surface.