File Preview

Preview of a file.

html

<div class="fprev" data-kind="Image">
  <div class="fprev__thumb" style="background:#F5C2E0;">Image</div>
  <div class="fprev__body">
    <p class="fprev__name">cover-image.png</p>
    <p class="fprev__size">860 KB</p>
  </div>
  <button type="button" class="fprev__remove" aria-label="Remove cover-image.png">&times;</button>
</div>
<style>
.fprev { font: 13px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 280px; padding: 10px; border-radius: 10px; box-sizing: border-box; border: 1px solid #24143018; display: flex; align-items: center; gap: 10px; }
.fprev__thumb { flex: none; width: 42px; height: 42px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; text-transform: uppercase; color: #14351f; }
.fprev__body { flex: 1 1 auto; min-width: 0; }
.fprev__name { margin: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fprev__size { margin: 2px 0 0; font-size: 11px; color: #24143099; }
.fprev__remove { flex: none; border: none; background: none; cursor: pointer; color: #24143099; font-size: 16px; padding: 4px 8px; border-radius: 6px; }
.fprev__remove:hover, .fprev__remove:focus-visible { background: #24143010; }
</style>

tailwind

<div class="flex items-center gap-2.5 w-[280px] p-2.5 rounded-[10px] box-border border border-[#24143018] font-sans text-[13px] text-[#241430] bg-[#FAF7F2]" data-kind="Image">
  <div class="flex-none w-[42px] h-[42px] rounded-lg flex items-center justify-center text-[9px] font-extrabold uppercase text-[#14351f]" style="background:#F5C2E0">Image</div>
  <div class="flex-1 min-w-0">
    <p class="m-0 font-bold overflow-hidden text-ellipsis whitespace-nowrap">cover-image.png</p>
    <p class="mt-0.5 mb-0 text-[11px] text-[#241430]/60">860 KB</p>
  </div>
  <button type="button" class="flex-none border-none bg-none cursor-pointer text-[#241430]/60 text-base px-2 py-1 rounded-md hover:bg-[#24143010]" aria-label="Remove cover-image.png">&times;</button>
</div>

react

export function FilePreview({
  name = "cover-image.png",
  kind = "Image",
  size = "860 KB",
  showRemove = true,
  accent = "#F5C2E0",
}) {
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", width: 280, padding: 10, borderRadius: 10, boxSizing: "border-box", border: "1px solid #24143018", display: "flex", alignItems: "center", gap: 10 }}>
      <div style={{ flex: "none", width: 42, height: 42, borderRadius: 8, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 9, fontWeight: 800, textTransform: "uppercase", color: "#14351f", background: accent }}>{kind}</div>
      <div style={{ flex: "1 1 auto", minWidth: 0 }}>
        <p style={{ margin: 0, fontWeight: 700, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{name}</p>
        <p style={{ margin: "2px 0 0", fontSize: 11, color: "#24143099" }}>{size}</p>
      </div>
      {showRemove && <button type="button" aria-label={`Remove ${name}`} style={{ flex: "none", border: "none", background: "none", cursor: "pointer", color: "#24143099", fontSize: 16, padding: "4px 8px", borderRadius: 6 }}>&times;</button>}
    </div>
  );
}