25 lines
902 B
JavaScript
25 lines
902 B
JavaScript
import React from 'react'
|
|
|
|
const TONES = {
|
|
sky: 'border-sky-300/20 bg-sky-300/10 text-sky-100',
|
|
amber: 'border-amber-300/20 bg-amber-400/10 text-amber-100',
|
|
white: 'border-white/10 bg-black/20 text-white',
|
|
}
|
|
|
|
export default function QuickstartNextSteps({ items }) {
|
|
return (
|
|
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
|
{items.map((item) => (
|
|
<a
|
|
key={item.title}
|
|
href={item.href}
|
|
className={`rounded-[28px] border p-5 transition hover:-translate-y-0.5 hover:border-white/20 ${TONES[item.tone] || TONES.white}`}
|
|
>
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] opacity-80">{item.eyebrow}</div>
|
|
<div className="mt-2 text-lg font-semibold text-white">{item.title}</div>
|
|
<p className="mt-3 text-sm leading-6 opacity-90">{item.body}</p>
|
|
</a>
|
|
))}
|
|
</div>
|
|
)
|
|
} |