39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
|
import { STYLE_CATEGORIES } from '../utils/style'
|
||
|
|
import styles from './StyleSelector.module.css'
|
||
|
|
|
||
|
|
interface StyleSelectorProps {
|
||
|
|
value: Record<string, string>
|
||
|
|
onChange: (key: string, value: string) => void
|
||
|
|
compact?: boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function StyleSelector({
|
||
|
|
value,
|
||
|
|
onChange,
|
||
|
|
compact,
|
||
|
|
}: StyleSelectorProps) {
|
||
|
|
return (
|
||
|
|
<div className={`${styles.container} ${compact ? styles.compact : ''}`}>
|
||
|
|
{STYLE_CATEGORIES.map(cat => (
|
||
|
|
<div key={cat.key} className={styles.category}>
|
||
|
|
<span className={styles.label}>{cat.label}</span>
|
||
|
|
<div className={styles.options}>
|
||
|
|
{cat.options.map(opt => (
|
||
|
|
<button
|
||
|
|
key={opt.value}
|
||
|
|
type="button"
|
||
|
|
className={`${styles.pill} ${
|
||
|
|
value[cat.key] === opt.value ? styles.pillActive : ''
|
||
|
|
}`}
|
||
|
|
onClick={() => onChange(cat.key, opt.value)}
|
||
|
|
>
|
||
|
|
{opt.label}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|