Segmented control

import { SegmentedControl } from '@orbex/sonar-components/segmented-control'

export default function Units() {
  return (
    <SegmentedControl
      legend="Unit"
      defaultValue="plt"
      options={[
        { value: 'plt', label: 'Pallets' },
        { value: 'kg', label: 'Kilograms' },
        { value: 'items', label: 'Items' },
      ]}
    />
  )
}

import { SegmentedControl } from '@orbex/sonar-components/segmented-control'
import type { ComponentProps } from 'react'
import calendarSymbol from '@material-symbols/svg-400/rounded/calendar_month.svg?raw'
import gridSymbol from '@material-symbols/svg-400/rounded/grid_view.svg?raw'
import listSymbol from '@material-symbols/svg-400/rounded/view_list.svg?raw'

/* Material Symbols Rounded, weight 400, as icon components (Foundations › Icons) */
const symbol = (svg: string) => {
  const path = svg.match(/ d="([^"]+)"/)?.[1]
  return (props: ComponentProps<'svg'>) => (
    <svg viewBox="0 -960 960 960" fill="currentColor" aria-hidden="true" focusable="false" {...props}>
      <path d={path} />
    </svg>
  )
}

const CalendarIcon = symbol(calendarSymbol)
const GridIcon = symbol(gridSymbol)
const ListIcon = symbol(listSymbol)

export default function Views() {
  return (
    <SegmentedControl
      legend="View"
      hideLegend
      iconOnly
      size="small"
      defaultValue="list"
      options={[
        { value: 'list', label: 'List', icon: <ListIcon /> },
        { value: 'grid', label: 'Grid', icon: <GridIcon /> },
        { value: 'calendar', label: 'Calendar', icon: <CalendarIcon /> },
      ]}
    />
  )
}