21 lines
1.1 KiB
JavaScript
21 lines
1.1 KiB
JavaScript
import React from 'react'
|
|
|
|
export default function QuickstartChecklist({ title, summary, items }) {
|
|
return (
|
|
<section className="rounded-[30px] border border-emerald-300/20 bg-emerald-400/10 p-5 shadow-[0_22px_70px_rgba(2,6,23,0.2)] md:p-6">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-emerald-100/80">Checklist</p>
|
|
<h3 className="mt-2 text-2xl font-semibold text-white">{title}</h3>
|
|
{summary ? <p className="mt-3 text-sm leading-7 text-emerald-50/90">{summary}</p> : null}
|
|
<ul className="mt-5 grid gap-3 md:grid-cols-2">
|
|
{items.map((item) => (
|
|
<li key={item} className="flex gap-3 rounded-[22px] border border-white/10 bg-black/20 px-4 py-4 text-sm leading-6 text-white">
|
|
<span className="mt-1 flex h-6 w-6 shrink-0 items-center justify-center rounded-full border border-emerald-300/20 bg-emerald-300/10 text-emerald-100">
|
|
<i className="fa-solid fa-check text-[10px]" />
|
|
</span>
|
|
<span>{item}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
)
|
|
} |