25 lines
1.1 KiB
JavaScript
25 lines
1.1 KiB
JavaScript
import React from 'react'
|
|
|
|
export default function NovaCardGradientPicker({ gradients = [], selectedKey = null, onSelect }) {
|
|
return (
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
{gradients.map((gradient) => {
|
|
const active = selectedKey === gradient.key
|
|
return (
|
|
<button
|
|
key={gradient.key}
|
|
type="button"
|
|
onClick={() => onSelect?.(gradient)}
|
|
className={`overflow-hidden rounded-[22px] border text-left transition ${active ? 'border-sky-300/35 bg-sky-400/10' : 'border-white/10 bg-white/[0.03] hover:border-white/20 hover:bg-white/[0.05]'}`}
|
|
>
|
|
<div className="h-20 w-full" style={{ background: `linear-gradient(135deg, ${gradient.colors?.[0] || '#0f172a'}, ${gradient.colors?.[1] || '#1d4ed8'})` }} />
|
|
<div className="p-3">
|
|
<div className="text-sm font-semibold text-white">{gradient.label}</div>
|
|
<div className="mt-1 text-[11px] uppercase tracking-[0.18em] text-slate-400">{gradient.key}</div>
|
|
</div>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
} |