Edit Drag-to-Reschedule · UI Element Compendium

Name

Also known as (comma separated)

Brief definition

Notes

Tier

Controls schema (JSON array)

Templates (JSON object keyed by format)

{
  "html": "<div class=\"dragr\" style=\"border-left-color:{{accent}};\">\n  <span class=\"dragr__handle\" draggable=\"true\" aria-hidden=\"true\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\"><circle cx=\"4\" cy=\"3\" r=\"1.3\" fill=\"currentColor\"/><circle cx=\"10\" cy=\"3\" r=\"1.3\" fill=\"currentColor\"/><circle cx=\"4\" cy=\"7\" r=\"1.3\" fill=\"currentColor\"/><circle cx=\"10\" cy=\"7\" r=\"1.3\" fill=\"currentColor\"/><circle cx=\"4\" cy=\"11\" r=\"1.3\" fill=\"currentColor\"/><circle cx=\"10\" cy=\"11\" r=\"1.3\" fill=\"currentColor\"/></svg></span>\n  <div class=\"dragr__body\">\n    <p class=\"dragr__title\">{{eventTitle}}</p>\n    <p class=\"dragr__time\"><time datetime=\"{{date}}T{{time}}\">{{time}}</time></p>\n  </div>\n  <div class=\"dragr__keys\" role=\"group\" aria-label=\"Reschedule with keyboard, step {{step}}\">\n    <button type=\"button\" class=\"dragr__btn\" aria-label=\"Move {{eventTitle}} earlier by {{step}}\">&larr;</button>\n    <button type=\"button\" class=\"dragr__btn\" aria-label=\"Move {{eventTitle}} later by {{step}}\">&rarr;</button>\n  </div>\n</div>\n<style>\n.dragr { font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 380px; padding: 12px 14px; border-radius: 10px; border-left: 4px solid; box-sizing: border-box; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 14px rgba(36,20,48,.10); }\n.dragr__handle { cursor: grab; color: #24143066; flex: none; }\n.dragr__body { flex: 1 1 auto; min-width: 0; }\n.dragr__title { margin: 0; font-weight: 700; }\n.dragr__time { margin: 2px 0 0; font-size: 12px; color: #24143099; font-variant-numeric: tabular-nums; }\n.dragr__keys { display: flex; gap: 6px; flex: none; }\n.dragr__btn { width: 28px; height: 28px; border-radius: 7px; border: 1.5px solid #24143030; background: #FAF7F2; cursor: pointer; font-size: 14px; }\n.dragr__btn:hover { background: #24143010; }\n.dragr__btn:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }\n</style>",
  "tailwind": "<div class=\"flex items-center gap-2.5 w-[380px] p-3 rounded-[10px] border-l-4 box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] shadow-[0_4px_14px_rgba(36,20,48,.10)]\" style=\"border-left-color:{{accent}}\">\n  <span class=\"text-[#24143066] flex-none cursor-grab\" draggable=\"true\" aria-hidden=\"true\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" aria-hidden=\"true\"><circle cx=\"4\" cy=\"3\" r=\"1.3\" fill=\"currentColor\"/><circle cx=\"10\" cy=\"3\" r=\"1.3\" fill=\"currentColor\"/><circle cx=\"4\" cy=\"7\" r=\"1.3\" fill=\"currentColor\"/><circle cx=\"10\" cy=\"7\" r=\"1.3\" fill=\"currentColor\"/><circle cx=\"4\" cy=\"11\" r=\"1.3\" fill=\"currentColor\"/><circle cx=\"10\" cy=\"11\" r=\"1.3\" fill=\"currentColor\"/></svg></span>\n  <div class=\"flex-1 min-w-0\">\n    <p class=\"m-0 font-bold\">{{eventTitle}}</p>\n    <p class=\"mt-0.5 mb-0 text-xs text-[#241430]/60 tabular-nums\"><time datetime=\"{{date}}T{{time}}\">{{time}}</time></p>\n  </div>\n  <div class=\"flex gap-1.5 flex-none\" role=\"group\" aria-label=\"Reschedule with keyboard, step {{step}}\">\n    <button type=\"button\" class=\"w-7 h-7 rounded-md border-[1.5px] border-[#24143030] bg-[#FAF7F2] cursor-pointer text-sm hover:bg-[#24143010] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[#241430]\" aria-label=\"Move {{eventTitle}} earlier by {{step}}\">&larr;</button>\n    <button type=\"button\" class=\"w-7 h-7 rounded-md border-[1.5px] border-[#24143030] bg-[#FAF7F2] cursor-pointer text-sm hover:bg-[#24143010] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[#241430]\" aria-label=\"Move {{eventTitle}} later by {{step}}\">&rarr;</button>\n  </div>\n</div>",
  "react": "export function DragToReschedule({\n  eventTitle = \"{{eventTitle}}\",\n  date = \"{{date}}\",\n  time = \"{{time}}\",\n  step = \"{{step}}\",\n  accent = \"{{accent}}\",\n}) {\n  const btn = { width: 28, height: 28, borderRadius: 7, border: \"1.5px solid #24143030\", background: \"#FAF7F2\", cursor: \"pointer\", fontSize: 14 };\n  return (\n    <div style={{ font: \"14px/1.4 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", width: 380, padding: \"12px 14px\", borderRadius: 10, borderLeft: `4px solid ${accent}`, boxSizing: \"border-box\", display: \"flex\", alignItems: \"center\", gap: 10, boxShadow: \"0 4px 14px rgba(36,20,48,.10)\" }}>\n      <span aria-hidden=\"true\" draggable style={{ cursor: \"grab\", color: \"#24143066\", flex: \"none\" }}>\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\"><circle cx=\"4\" cy=\"3\" r=\"1.3\" fill=\"currentColor\" /><circle cx=\"10\" cy=\"3\" r=\"1.3\" fill=\"currentColor\" /><circle cx=\"4\" cy=\"7\" r=\"1.3\" fill=\"currentColor\" /><circle cx=\"10\" cy=\"7\" r=\"1.3\" fill=\"currentColor\" /><circle cx=\"4\" cy=\"11\" r=\"1.3\" fill=\"currentColor\" /><circle cx=\"10\" cy=\"11\" r=\"1.3\" fill=\"currentColor\" /></svg>\n      </span>\n      <div style={{ flex: \"1 1 auto\", minWidth: 0 }}>\n        <p style={{ margin: 0, fontWeight: 700 }}>{eventTitle}</p>\n        <p style={{ margin: \"2px 0 0\", fontSize: 12, color: \"#24143099\", fontVariantNumeric: \"tabular-nums\" }}><time dateTime={`${date}T${time}`}>{time}</time></p>\n      </div>\n      <div role=\"group\" aria-label={`Reschedule with keyboard, step ${step}`} style={{ display: \"flex\", gap: 6, flex: \"none\" }}>\n        <button type=\"button\" style={btn} aria-label={`Move ${eventTitle} earlier by ${step}`}>&larr;</button>\n        <button type=\"button\" style={btn} aria-label={`Move ${eventTitle} later by ${step}`}>&rarr;</button>\n      </div>\n    </div>\n  );\n}"
}