@caffeinebounce/ui 0.62.2

package/dist/media.mjs

@@ -0,0 +1,182 @@
+import './chunk-MHZXUOGN.mjs';
+import { cn } from './chunk-IMKLN273.mjs';
+import { formatDate } from '@caffeinebounce/shared-utils';
+import { ExternalLink } from 'lucide-react';
+import Image from 'next/image';
+import { useState } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function ClippingCard({ item, className }) {
+  const [expanded, setExpanded] = useState(false);
+  const formattedDate = formatDate(item.date, {
+    month: "long",
+    day: "numeric",
+    year: "numeric"
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "group relative flex flex-col gap-4 rounded-xl border border-zinc-200 bg-white/50 p-6 backdrop-blur transition-all duration-300",
+          "dark:border-white/10 dark:bg-white/[0.03]",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-start justify-between gap-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            item.imageUrl ? /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
+              Image,
+              {
+                src: item.imageUrl,
+                alt: item.publication,
+                width: 32,
+                height: 32,
+                className: "object-contain dark:brightness-150 dark:contrast-125"
+              }
+            ) }) : null,
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-zinc-500 dark:text-zinc-300", children: item.publication }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-zinc-400 dark:text-zinc-400", children: formattedDate })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold leading-snug text-zinc-900 dark:text-zinc-100", children: item.title }),
+          item.clippingImageUrl && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setExpanded(true),
+              className: "relative max-w-[180px] cursor-zoom-in overflow-hidden rounded-lg ring-1 ring-zinc-200 transition-transform hover:scale-[1.02] dark:ring-white/10",
+              children: /* @__PURE__ */ jsx("div", { className: "rotate-[-0.5deg] transform", children: /* @__PURE__ */ jsx(
+                Image,
+                {
+                  src: item.clippingImageUrl,
+                  alt: item.title,
+                  width: 360,
+                  height: 270,
+                  className: "w-full rounded-lg object-cover",
+                  style: { filter: "sepia(0.08) contrast(1.02)" }
+                }
+              ) })
+            }
+          ),
+          item.highlight ? /* @__PURE__ */ jsx("blockquote", { className: "border-l-2 border-indigo-400/50 pl-3 text-sm italic text-zinc-500 dark:border-indigo-400/40 dark:text-zinc-300", children: item.highlight }) : null
+        ]
+      }
+    ),
+    expanded && item.clippingImageUrl && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4 backdrop-blur-sm",
+        onClick: () => setExpanded(false),
+        onKeyDown: (e) => e.key === "Escape" && setExpanded(false),
+        children: /* @__PURE__ */ jsxs("div", { className: "relative max-h-[90vh] max-w-[90vw]", children: [
+          /* @__PURE__ */ jsx(
+            Image,
+            {
+              src: item.clippingImageUrl,
+              alt: item.title,
+              width: 1200,
+              height: 900,
+              className: "max-h-[85vh] w-auto rounded-lg object-contain shadow-2xl",
+              style: { filter: "sepia(0.05) contrast(1.02)" }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                setExpanded(false);
+              },
+              className: "absolute right-3 top-3 flex h-10 w-10 items-center justify-center rounded-full bg-black/60 text-white shadow-lg backdrop-blur transition-colors hover:bg-black/80",
+              children: /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 16 16",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  role: "img",
+                  "aria-label": "Close",
+                  children: [
+                    /* @__PURE__ */ jsx("title", { children: "Close" }),
+                    /* @__PURE__ */ jsx("line", { x1: "3", y1: "3", x2: "13", y2: "13" }),
+                    /* @__PURE__ */ jsx("line", { x1: "13", y1: "3", x2: "3", y2: "13" })
+                  ]
+                }
+              )
+            }
+          )
+        ] })
+      }
+    )
+  ] });
+}
+function MediaCard({ item, className }) {
+  if (item.type === "clipping") {
+    return /* @__PURE__ */ jsx(ClippingCard, { item, className });
+  }
+  const formattedDate = formatDate(item.date, {
+    month: "long",
+    day: "numeric",
+    year: "numeric"
+  });
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: item.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: cn(
+        "group relative flex flex-col gap-4 rounded-xl border border-zinc-200 bg-white/50 p-6 backdrop-blur transition-all duration-300",
+        "hover:-translate-y-0.5 hover:border-zinc-300 hover:shadow-lg",
+        "dark:border-white/10 dark:bg-white/[0.03] dark:hover:border-white/20 dark:hover:shadow-2xl dark:hover:shadow-indigo-500/5",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            item.imageUrl ? /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
+              Image,
+              {
+                src: item.imageUrl,
+                alt: item.publication,
+                width: 32,
+                height: 32,
+                className: "object-contain dark:brightness-150 dark:contrast-125"
+              }
+            ) }) : /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-xs font-semibold text-zinc-500 dark:text-zinc-300", children: item.publication.slice(0, 2).toUpperCase() }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-zinc-500 dark:text-zinc-300", children: item.publication }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-zinc-400 dark:text-zinc-400", children: formattedDate })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4 shrink-0 text-zinc-300 transition-colors group-hover:text-zinc-500 dark:text-zinc-600 dark:group-hover:text-zinc-300" })
+        ] }),
+        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold leading-snug text-zinc-900 dark:text-zinc-100", children: item.title }),
+        item.excerpt ? /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-zinc-600 dark:text-zinc-300", children: item.excerpt }) : null,
+        item.highlight ? /* @__PURE__ */ jsx("blockquote", { className: "border-l-2 border-indigo-400/50 pl-3 text-sm italic text-zinc-500 dark:border-indigo-400/40 dark:text-zinc-300", children: item.highlight }) : null
+      ]
+    }
+  );
+}
+function MediaGrid({ items, className, cardClassName }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("grid gap-6 sm:grid-cols-2 lg:grid-cols-3", className), children: items.map((item, i) => {
+    const spanClass = item.span === 2 ? "sm:col-span-2" : item.span === 3 ? "sm:col-span-2 lg:col-span-3" : void 0;
+    return /* @__PURE__ */ jsx(
+      MediaCard,
+      {
+        item,
+        className: cn(spanClass, cardClassName)
+      },
+      item.url || `item-${i}`
+    );
+  }) });
+}
+
+export { MediaCard, MediaGrid };