32 lines
1.4 KiB
JavaScript
32 lines
1.4 KiB
JavaScript
import React from 'react'
|
|
|
|
export default function NovaCardFontPicker({ fonts = [], selectedKey = null, onSelect }) {
|
|
return (
|
|
<div className="grid gap-3">
|
|
{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/12 ring-1 ring-sky-400/20 text-white' : 'border-white/10 bg-white/[0.03] text-slate-200 hover:border-white/20 hover:bg-white/[0.05]'}`}
|
|
>
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500 mb-2">{font.label}</div>
|
|
<div className="text-[1.65rem] font-semibold leading-tight text-white" style={{ fontFamily: font.family, fontWeight: font.weight || 600 }}>
|
|
The quick brown fox
|
|
</div>
|
|
<div className="mt-2 text-xs text-slate-400 leading-relaxed" style={{ fontFamily: font.family }}>
|
|
{font.recommended_use}
|
|
</div>
|
|
{active && (
|
|
<div className="mt-2 inline-flex items-center gap-1 rounded-full border border-sky-400/25 bg-sky-500/10 px-2.5 py-0.5 text-[10px] font-semibold uppercase tracking-[0.2em] text-sky-300">
|
|
Active
|
|
</div>
|
|
)}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
} |