Event Handler

Code responding to an event.

html

<div class="evth evth--click">
  <div class="evth__el" style="border-color:#A8E6C1;">Element<span class="evth__badge">onclick</span></div>
  <span class="evth__arrow" aria-hidden="true">&rarr;</span>
  <code class="evth__fn">handleClick()</code>
  <span class="evth__arrow" aria-hidden="true">&rarr;</span>
  <div class="evth__effect" style="background:#A8E6C1;">opens the modal</div>
</div>
<style>
.evth { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.evth__el { position: relative; border: 2px solid; border-radius: 8px; padding: 10px 14px; font-weight: 700; }
.evth__badge { display: block; font: 10px ui-monospace, monospace; font-weight: 400; color: #24143099; margin-top: 3px; }
.evth__arrow { font-size: 14px; color: #24143060; }
.evth__fn { font: 11px ui-monospace, monospace; background: #24143012; padding: 6px 8px; border-radius: 6px; }
.evth__effect { padding: 10px 14px; border-radius: 8px; font-weight: 600; text-align: center; }
</style>

tailwind

<div class="evthtw evthtw--click font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border flex items-center gap-1.5 flex-wrap justify-center">
  <div class="relative border-2 rounded-lg py-2.5 px-3.5 font-bold" style="border-color:#A8E6C1;">Element<span class="block font-mono text-[10px] font-normal text-[#24143099] mt-1">onclick</span></div>
  <span class="text-sm text-[#24143060]" aria-hidden="true">&rarr;</span>
  <code class="font-mono text-[11px] bg-[#24143012] py-1.5 px-2 rounded-md">handleClick()</code>
  <span class="text-sm text-[#24143060]" aria-hidden="true">&rarr;</span>
  <div class="py-2.5 px-3.5 rounded-lg font-semibold text-center" style="background:#A8E6C1;">opens the modal</div>
</div>

react

export function EventHandler({
  eventType = "click",
  handlerName = "handleClick",
  effectText = "opens the modal",
  accent = "#A8E6C1",
}) {
  return (
    <div style={{ font: "12px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 300, boxSizing: "border-box", display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap", justifyContent: "center" }}>
      <div style={{ border: `2px solid ${accent}`, borderRadius: 8, padding: "10px 14px", fontWeight: 700 }}>
        Element
        <span style={{ display: "block", fontFamily: "ui-monospace, monospace", fontSize: 10, fontWeight: 400, color: "#24143099", marginTop: 3 }}>on{eventType}</span>
      </div>
      <span aria-hidden="true" style={{ fontSize: 14, color: "#24143060" }}>&rarr;</span>
      <code style={{ fontFamily: "ui-monospace, monospace", fontSize: 11, background: "#24143012", padding: "6px 8px", borderRadius: 6 }}>{handlerName}()</code>
      <span aria-hidden="true" style={{ fontSize: 14, color: "#24143060" }}>&rarr;</span>
      <div style={{ padding: "10px 14px", borderRadius: 8, fontWeight: 600, textAlign: "center", background: accent }}>{effectText}</div>
    </div>
  );
}