Cascader in five frameworks

import { Cascader } from '@hamur/react/cascader'

const labels: Record<string, string> = {
  asia: 'Asia',
  japan: 'Japan',
  tokyo: 'Tokyo',
  osaka: 'Osaka',
  kyoto: 'Kyoto',
  korea: 'Korea',
  seoul: 'Seoul',
  busan: 'Busan',
  europe: 'Europe',
  france: 'France',
  paris: 'Paris',
  lyon: 'Lyon',
  germany: 'Germany',
  berlin: 'Berlin',
  munich: 'Munich',
  americas: 'Americas',
  canada: 'Canada',
  toronto: 'Toronto',
  vancouver: 'Vancouver',
  brazil: 'Brazil',
  'sao-paulo': 'São Paulo',
  rio: 'Rio de Janeiro',
}
const children: Record<string, string[]> = {
  asia: ['japan', 'korea'],
  japan: ['tokyo', 'osaka', 'kyoto'],
  korea: ['seoul', 'busan'],
  europe: ['france', 'germany'],
  france: ['paris', 'lyon'],
  germany: ['berlin', 'munich'],
  americas: ['canada', 'brazil'],
  canada: ['toronto', 'vancouver'],
  brazil: ['sao-paulo', 'rio'],
}
const roots = ['asia', 'europe', 'americas']

export default function CascaderExample() {
  return (
    <Cascader.Root
      items={roots}
      getItemChildren={(value: string) => children[value]}
      itemToStringLabel={(value: string) => labels[value]}
    >
      <div className="field">
        <Cascader.Label className="select-label">
          Location
        </Cascader.Label>
        <div className="cascader-control">
          <Cascader.Trigger className="select">
            <Cascader.Value
              className="select-value cascader-value"
              placeholder="Choose a city"
            />
            <Cascader.Icon className="select-icon" />
          </Cascader.Trigger>
          <Cascader.Clear className="cascader-clear" aria-label="Clear">
            <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true">
              <path d="M4 4l8 8M12 4l-8 8" />
            </svg>
          </Cascader.Clear>
        </div>
      </div>
      <Cascader.Portal>
        <Cascader.Positioner className="select-positioner" sideOffset={6}>
          <Cascader.Popup className="select-popup cascader-popup">
            <Cascader.Columns className="cascader-columns" aria-label="Places">
              {(column) => (
                <Cascader.Column
                  key={column.level}
                  column={column}
                  className="cascader-column"
                >
                  {(value: string) => (
                    <Cascader.Item
                      key={value}
                      value={value}
                      className="cascader-item"
                    >
                      <Cascader.ItemText className="cascader-item-text" />
                      <Cascader.ItemIndicator
                        className="cascader-item-indicator"
                      >
                        <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
                          <path d="M3 8.5l3 3 7-7" />
                        </svg>
                      </Cascader.ItemIndicator>
                      <Cascader.ItemIcon className="cascader-item-icon">
                        <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true">
                          <path d="M6 4l4 4-4 4" />
                        </svg>
                      </Cascader.ItemIcon>
                    </Cascader.Item>
                  )}
                </Cascader.Column>
              )}
            </Cascader.Columns>
          </Cascader.Popup>
        </Cascader.Positioner>
      </Cascader.Portal>
    </Cascader.Root>
  )
}