# Block Tile

> A link card for a ready-made block: its drawing on the sky grid, its name, and an arrow that nudges toward where it goes.

Source: https://ritla.app/ui/block-tile

## Installation

Installing from the registry is coming soon. Until then, these are the commands you will run.

```bash
npx ritla add block-tile
```

With the shadcn CLI instead:

```bash
npx shadcn@latest add @ritla/block-tile
```

Dependencies: `@phosphor-icons/react`

## Usage

```tsx
import { BlockTile } from "@/components/ui/block-tile";

<BlockTile block="checkout" href="/blocks/checkout">
  Checkout
</BlockTile>
```

## API reference

### `BlockTile`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `block` | `BlockThumbnailName` | None | The block drawn in the thumb: one of the blocks that exist in code. |
| `children` | `ReactNode` | None | The block's name in the page's language: the link text. |
| `href / render` | `string / ReactElement` | None | Where it goes, or a router link (`<Link>`) that keeps its own element. |
| `onBand` | `boolean` | None | On the sky band: the deeper hard shadow, so it still reads. |

### `BlockThumbnail`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `BlockThumbnailName` | None | The drawing alone, decorative, 220 by 124. |

## Accessibility

Keyboard (keys as in left-to-right; arrows swap in right-to-left):

- `Tab`: To the tile, one link; it lifts and its arrow nudges as on hover.

ARIA:

- The tile is one link named by the block's name; the drawing is decorative and hidden.
- Under reduced motion the tile does not rise and the arrow does not move; the shadow change stays.

## Arabic and RTL notes

Mirrors:

- The whole drawing, the hard shadow (bottom-left), the lift toward the inline start, and the arrow and its nudge.

Does not mirror:

- Numbers and codes in the drawing; the verification code stays left to right.

Numerals: The drawing's numbers are Western in every mode, like the catalogue thumbnails.

Arabic typography: The name is `body-16` Medium in the page's language font.