22 lines
891 B
JavaScript
22 lines
891 B
JavaScript
import React from 'react'
|
|
|
|
export default function NovaCardFontPicker({ fonts = [], selectedKey = null, onSelect }) {
|
|
return (
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
{fonts.map((font) => {
|
|
const active = selectedKey === font.key
|
|
return (
|
|
<button
|
|
key={font.key}
|
|
type="button"
|
|
onClick={() => onSelect?.(font)}
|
|
className={`rounded-[22px] border p-4 text-left transition ${active ? 'border-sky-300/35 bg-sky-400/10 text-white' : 'border-white/10 bg-white/[0.03] text-slate-200 hover:border-white/20 hover:bg-white/[0.05]'}`}
|
|
>
|
|
<div className="text-lg font-semibold tracking-[-0.03em]" style={{ fontFamily: font.family }}>{font.label}</div>
|
|
<div className="mt-2 text-sm text-slate-400">{font.recommended_use}</div>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
} |