Quick Create

Create an object without leaving context.

{{unless open}}

html

<div class="qc-demo" style="--accent:#A8E6C1;">
  {{unless open}}<button type="button" class="qc-demo__trigger">+ New task</button>

tailwind

<div style="width:260px;font-family:system-ui,sans-serif;color:#241430">
  {{unless open}}<button type="button" class="w-full text-left border-[1.5px] border-dashed rounded-lg px-3.5 py-2.5 font-semibold bg-transparent cursor-pointer" style="border-color:#A8E6C1">+ New task</button>

react

import { useState } from "react";

export function QuickCreate({
  label = "+ New task",
  placeholder = "Task name",
  open: initialOpen = true,
  accent = "#A8E6C1",
}) {
  const [open, setOpen] = useState(initialOpen);
  return (
    <div style={{ width: 260, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430" }}>
      {!open && <button type="button" onClick={() => setOpen(true)} style={{ width: "100%", textAlign: "left", border: "1.5px dashed " + accent, background: "transparent", borderRadius: 8, padding: "10px 14px", fontWeight: 600, color: "#241430", cursor: "pointer" }}>{label}</button>}
      {open && (
        <div style={{ borderRadius: 10, border: "1.5px solid " + accent, padding: 10, background: "#FAF7F2" }}>
          <input type="text" placeholder={placeholder} autoFocus style={{ width: "100%", boxSizing: "border-box", padding: "8px 10px", borderRadius: 6, border: "1.5px solid #24143033", marginBottom: 8, font: "inherit" }} />
          <div style={{ display: "flex", gap: 6 }}>
            <button type="button" onClick={() => setOpen(false)} style={{ background: accent, border: "none", borderRadius: 6, padding: "7px 14px", fontWeight: 600, cursor: "pointer" }}>Add</button>
            <button type="button" onClick={() => setOpen(false)} style={{ background: "transparent", border: "none", padding: "7px 14px", color: "#241430aa", cursor: "pointer" }}>Cancel</button>
          </div>
        </div>
      )}
    </div>
  );
}