# Nearby List (Moonarc)

What is around a place to stay, by how a guest gets there: a group a way (on foot, by bike, by car, by boat), each place a row with its name, a line about it and the minutes it takes, and a bar drawn to scale against the farthest place of its group, so the near ones read near at a glance. A place can link to a map. Zero JavaScript.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/nearby-list` (license key required)
- Tier B · category section · trigger scroll
- Readout: `<NearbyList groups={[{ name: 'On foot', places: [{ name, minutes }] }]} />`
- Browser support: widely (every browser); elsewhere: nothing to fall back from
- Measured cost: 0 B JS of its own · uses Reveal + runtime (with dependencies 3.0 kB raw; CSS 9.6 kB raw)
- Page: https://moonarc.dev/components/nearby-list/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `headline` | `string` | none | The heading. Slot "headline" wins and may hold an <em>. |
| `eyebrow` | `string` | none | A short line above the heading. |
| `copy` | `string` | none | A line under the heading. |
| `groups` | `{ name; places: { name; text?; minutes; href? }[] }[]` | none | The ways of getting there and their places; minutes is a number, the bar is drawn from it. |
| `unit` | `string` | `'{n} min'` | How a time is written. |
| `level` | `1 | 2 | 3` | `2` | Heading level of the heading; each group is one below. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The section's ground. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Block padding ×0.8 / ×1 / ×1.25 through --ma-density. |

## Usage

```astro
---
import NearbyList from '@/components/moonarc/pro/NearbyList.astro';
---
<NearbyList
  headline="Around the house"
  groups={[
    { name: 'On foot', places: [{ name: 'The beach', text: 'Sand, and a café that opens at eight', minutes: 10 }, { name: 'The village', minutes: 18 }] },
    { name: 'By car', places: [{ name: 'The airport', minutes: 45 }] },
  ]}
/>
```

## Reduced motion

The groups arrive at once.

## With ClientRouter

CSS and Reveal.

## Craft

- The bar is the time against the farthest place of its group, written at build as a width, so the scale is per way of travel and a ten-minute walk is not drawn against a forty-minute drive.
- The minutes are text beside the bar, which is hidden from a screen reader: the number is the fact, the bar its picture.

## Replaces

- Local area guides

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/nearby-list` with a key in components.json (https://moonarc.dev/account/). Everything it composes is free: reveal.