laif-ds/dist/components/ui/file-preview.js

Design System di Laif con componenti React basati su principi di Atomic Design

"use client";
import { jsx as t, jsxs as a } from "react/jsx-runtime";
import l, { useEffect as w } from "react";
import { motion as n } from "framer-motion";
import d from "../../node_modules/lucide-react/dist/esm/icons/x.js";
import p from "../../node_modules/lucide-react/dist/esm/icons/file.js";
const b = l.forwardRef(
  (e, r) => e.file.type.startsWith("image/") ? /* @__PURE__ */ t(m, { ...e, ref: r }) : e.file.type.startsWith("text/") || e.file.name.endsWith(".txt") || e.file.name.endsWith(".md") ? /* @__PURE__ */ t(u, { ...e, ref: r }) : /* @__PURE__ */ t(f, { ...e, ref: r })
);
b.displayName = "FilePreview";
const m = l.forwardRef(
  ({ file: e, onRemove: r }, i) => /* @__PURE__ */ a(
    n.div,
    {
      ref: i,
      className: "relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs",
      layout: !0,
      initial: { opacity: 0, y: "100%" },
      animate: { opacity: 1, y: 0 },
      exit: { opacity: 0, y: "100%" },
      children: [
        /* @__PURE__ */ a("div", { className: "flex w-full items-center space-x-2", children: [
          /* @__PURE__ */ t(
            "img",
            {
              alt: `Attachment ${e.name}`,
              className: "bg-d-secondary grid h-10 w-10 shrink-0 place-items-center rounded-sm border object-cover",
              src: URL.createObjectURL(e)
            }
          ),
          /* @__PURE__ */ t("span", { className: "text-d-secondary-foreground w-full truncate", children: e.name })
        ] }),
        r ? /* @__PURE__ */ t(
          "button",
          {
            className: "bg-d-background absolute -top-2 -right-2 flex h-4 w-4 items-center justify-center rounded-full border",
            type: "button",
            onClick: r,
            "aria-label": "Remove attachment",
            children: /* @__PURE__ */ t(d, { className: "h-2.5 w-2.5" })
          }
        ) : null
      ]
    }
  )
);
m.displayName = "ImageFilePreview";
const u = l.forwardRef(
  ({ file: e, onRemove: r }, i) => {
    const [x, h] = l.useState("");
    return w(() => {
      if (typeof window > "u") return;
      const c = new FileReader();
      c.onload = (y) => {
        var o;
        const s = (o = y.target) == null ? void 0 : o.result;
        h(s.slice(0, 50) + (s.length > 50 ? "..." : ""));
      }, c.readAsText(e);
    }, [e]), /* @__PURE__ */ a(
      n.div,
      {
        ref: i,
        className: "relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs",
        layout: !0,
        initial: { opacity: 0, y: "100%" },
        animate: { opacity: 1, y: 0 },
        exit: { opacity: 0, y: "100%" },
        children: [
          /* @__PURE__ */ a("div", { className: "flex w-full items-center space-x-2", children: [
            /* @__PURE__ */ t("div", { className: "bg-d-secondary grid h-10 w-10 shrink-0 place-items-center rounded-sm border p-0.5", children: /* @__PURE__ */ t("div", { className: "text-d-secondary-foreground h-full w-full overflow-hidden text-[6px] leading-none", children: x || "Loading..." }) }),
            /* @__PURE__ */ t("span", { className: "text-d-secondary-foreground w-full truncate", children: e.name })
          ] }),
          r ? /* @__PURE__ */ t(
            "button",
            {
              className: "bg-d-background absolute -top-2 -right-2 flex h-4 w-4 items-center justify-center rounded-full border",
              type: "button",
              onClick: r,
              "aria-label": "Remove attachment",
              children: /* @__PURE__ */ t(d, { className: "h-2.5 w-2.5" })
            }
          ) : null
        ]
      }
    );
  }
);
u.displayName = "TextFilePreview";
const f = l.forwardRef(
  ({ file: e, onRemove: r }, i) => /* @__PURE__ */ a(
    n.div,
    {
      ref: i,
      className: "relative flex max-w-[200px] rounded-md border p-1.5 pr-2 text-xs",
      layout: !0,
      initial: { opacity: 0, y: "100%" },
      animate: { opacity: 1, y: 0 },
      exit: { opacity: 0, y: "100%" },
      children: [
        /* @__PURE__ */ a("div", { className: "flex w-full items-center space-x-2", children: [
          /* @__PURE__ */ t("div", { className: "bg-d-secondary grid h-10 w-10 shrink-0 place-items-center rounded-sm border", children: /* @__PURE__ */ t(p, { className: "text-d-foreground h-6 w-6" }) }),
          /* @__PURE__ */ t("span", { className: "text-d-secondary-foreground w-full truncate", children: e.name })
        ] }),
        r ? /* @__PURE__ */ t(
          "button",
          {
            className: "bg-d-background absolute -top-2 -right-2 flex h-4 w-4 items-center justify-center rounded-full border",
            type: "button",
            onClick: r,
            "aria-label": "Remove attachment",
            children: /* @__PURE__ */ t(d, { className: "h-2.5 w-2.5" })
          }
        ) : null
      ]
    }
  )
);
f.displayName = "GenericFilePreview";
export {
  b as FilePreview
};