ButtonGroup

Code

components/ButtonGroup/index.tsx

import type { FC } from 'react'

export interface Props {
  list: string[]
  onClick: (key: number) => void
}

const ButtonGroup: FC<Props> = ({ list, onClick }) => {
  return (
    <div className="inline-flex rounded border divide-x bg-white">
      {list.map((name, key) => (
        <button
          className="py-2 px-3 text-gray-400 text-sm hover:text-blue-500 hover:bg-sky-50"
          key={key}
          onClick={() => onClick(key)}
        >
          {name}
        </button>
      ))}
    </div>
  )
}

export default ButtonGroup

Props

Name	Type	Default
list*	Array of strings
onClick*	function

Example