furumi-ng/furumi-node-player/client/src/components/LibraryList.tsx

import type { MouseEvent } from 'react'

type LibraryListButton = {
  title: string
  onClick: (ev: MouseEvent<HTMLButtonElement>) => void
}

type LibraryListItem = {
  key: string
  className: string
  icon: string
  name: string
  detail?: string
  nameClassName?: string
  onClick: () => void
  button?: LibraryListButton
}

type LibraryListProps = {
  loading: boolean
  error: string | null
  items: LibraryListItem[]
}

export function LibraryList({ loading, error, items }: LibraryListProps) {
  if (loading) {
    return (
      <div style={{ padding: '2rem', textAlign: 'center' }}>
        <div className="spinner" />
      </div>
    )
  }

  if (error) {
    return <div style={{ padding: '1rem', color: 'var(--danger)' }}>{error}</div>
  }

  return (
    <>
      {items.map((item) => (
        <div key={item.key} className={item.className} onClick={item.onClick}>
          <span className="icon">{item.icon}</span>
          <span className={item.nameClassName ?? 'name'}>{item.name}</span>
          {item.detail ? <span className="detail">{item.detail}</span> : null}
          {item.button ? (
            <button className="add-btn" title={item.button.title} onClick={item.button.onClick}>
              &#10133;
            </button>
          ) : null}
        </div>
      ))}
    </>
  )
}