Double-click

html

<div class="dbl-demo" data-icon="file" style="--accent:#D9C8F0;">
  <div class="dbl-demo__item">
    <span class="dbl-demo__icon dbl-demo__icon--file">&#128196;</span>
    <span class="dbl-demo__icon dbl-demo__icon--folder">&#128193;</span>
    <span class="dbl-demo__icon dbl-demo__icon--image">&#128444;</span>
    <span class="dbl-demo__label">quarterly-report.pdf</span>
  </div>
  
  <p class="dbl-demo__caption">{{unless triggered}}single click selects &middot; double-click opens

tailwind

<div class="dbl-tw dbl-tw--file" style="width:300px;font-family:system-ui,sans-serif;color:#241430">
  <div class="dbl-tw__item flex items-center gap-2 px-2.5 py-2 rounded-lg w-fit">
    <span class="dbl-tw__icon dbl-tw__icon--file text-xl">&#128196;</span>
    <span class="dbl-tw__icon dbl-tw__icon--folder text-xl">&#128193;</span>
    <span class="dbl-tw__icon dbl-tw__icon--image text-xl">&#128444;</span>
    <span>quarterly-report.pdf</span>
  </div>
  
  <p class="mt-2.5 text-xs text-[#241430aa]">{{unless triggered}}single click selects &middot; double-click opens

react

import { useState } from "react";

export function DoubleClick({
  itemLabel = "quarterly-report.pdf",
  icon = "file",
  triggered: initialTriggered = false,
  accent = "#D9C8F0",
}) {
  const [triggered, setTriggered] = useState(initialTriggered);
  const icons = { file: "\ud83d\udcc4", folder: "\ud83d\udcc1", image: "\ud83d\uddbc" };
  return (
    <div style={{ width: 300, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430" }}>
      <div onDoubleClick={() => setTriggered(true)}
        style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 10px", borderRadius: 8, width: "fit-content", background: triggered ? accent : "transparent" }}>
        <span style={{ fontSize: 20 }}>{icons[icon]}</span><span>{itemLabel}</span>
      </div>
      {triggered && <div style={{ marginTop: 10, padding: 14, borderRadius: 8, background: "#FAF7F2", border: "1.5px solid " + accent, boxShadow: "0 8px 20px rgba(36,20,48,.15)", fontSize: 13 }}>
        <p style={{ margin: 0 }}>Opening {itemLabel}&hellip;</p>
      </div>}
      <p style={{ marginTop: 10, fontSize: 12, color: "#241430aa" }}>{triggered ? "double-click triggered open \u2014 a single click only selects" : "single click selects \u00b7 double-click opens"}</p>
    </div>
  );
}