Import Action

Brings external data into the application.

contacts.csv · 342 rows

Ready to import Validating rows… 3 rows have missing emails

Duplicate contacts will be skipped.

html

<div class="imp" data-status="Ready" style="--accent:#A8E6C1;">
  <p class="imp__file">contacts.csv <span class="imp__rows">&middot; 342 rows</span></p>
  <p class="imp__status">
    <span class="imp__ready">Ready to import</span>
    <span class="imp__validating">Validating rows&hellip;</span>
    <span class="imp__error">3 rows have missing emails</span>
  </p>
  <p class="imp__hint">Duplicate contacts will be skipped.</p>
  <button type="button" class="imp__btn">Import 342 rows</button>
</div>
<style>
.imp { font: 13px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 300px; padding: 16px 18px; border-radius: 12px; box-sizing: border-box; border: 1px solid #24143018; }
.imp__file { margin: 0 0 8px; font-weight: 700; }
.imp__rows { font-weight: 400; color: #24143099; }
.imp__status { margin: 0 0 8px; font-size: 12px; font-weight: 700; }
.imp__ready, .imp__validating, .imp__error { display: none; }
.imp[data-status="Ready"] .imp__ready { display: inline; color: #14351f; }
.imp[data-status="Validating"] .imp__validating { display: inline; color: #7a5a10; }
.imp[data-status="Error"] .imp__error { display: inline; color: #a32020; }
.imp__hint { margin: 0 0 12px; font-size: 11px; color: #24143088; }
.imp__btn { width: 100%; padding: 10px; border-radius: 8px; border: none; background: var(--accent); color: #14351f; font-weight: 700; cursor: pointer; }
.imp__btn:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style>

tailwind

<div class="w-[300px] p-[16px_18px] rounded-xl box-border border border-[#24143018] font-sans text-[13px] text-[#241430] bg-[#FAF7F2] imp-tw" data-status="Ready">
  <p class="m-0 mb-2 font-bold">contacts.csv <span class="font-normal text-[#241430]/60">&middot; 342 rows</span></p>
  <p class="m-0 mb-2 text-xs font-bold">
    <span class="imp-tw-ready hidden">Ready to import</span>
    <span class="imp-tw-validating hidden">Validating rows&hellip;</span>
    <span class="imp-tw-error hidden">3 rows have missing emails</span>
  </p>
  <p class="m-0 mb-3 text-[11px] text-[#241430]/50">Duplicate contacts will be skipped.</p>
  <button type="button" class="w-full py-2.5 rounded-lg border-none font-bold cursor-pointer text-[#14351f]" style="background:#A8E6C1">Import 342 rows</button>
</div>
<style>
.imp-tw[data-status="Ready"] .imp-tw-ready { display: inline; color: #14351f; }
.imp-tw[data-status="Validating"] .imp-tw-validating { display: inline; color: #7a5a10; }
.imp-tw[data-status="Error"] .imp-tw-error { display: inline; color: #a32020; }
</style>

react

export function ImportAction({
  fileName = "contacts.csv",
  rowCount = "342 rows",
  status = "Ready",
  skipDuplicates = true,
  accent = "#A8E6C1",
}) {
  const statusText = {
    Ready: ["Ready to import", "#14351f"],
    Validating: ["Validating rows…", "#7a5a10"],
    Error: ["3 rows have missing emails", "#a32020"],
  }[status];
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", width: 300, padding: "16px 18px", borderRadius: 12, boxSizing: "border-box", border: "1px solid #24143018" }}>
      <p style={{ margin: "0 0 8px", fontWeight: 700 }}>{fileName} <span style={{ fontWeight: 400, color: "#24143099" }}>&middot; {rowCount}</span></p>
      <p style={{ margin: "0 0 8px", fontSize: 12, fontWeight: 700, color: statusText[1] }}>{statusText[0]}</p>
      {skipDuplicates && <p style={{ margin: "0 0 12px", fontSize: 11, color: "#24143088" }}>Duplicate contacts will be skipped.</p>}
      <button type="button" style={{ width: "100%", padding: 10, borderRadius: 8, border: "none", background: accent, color: "#14351f", fontWeight: 700, cursor: "pointer" }}>Import {rowCount}</button>
    </div>
  );
}