55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
|
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}>
|
||
|
|
➕
|
||
|
|
</button>
|
||
|
|
) : null}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|