aura-glass/dist/esm/components/interactive/GlassCommentThread.js

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

'use client';
import { jsx, jsxs } from 'react/jsx-runtime';
import { cn } from '../../lib/utilsComprehensive.js';
import React from 'react';
import '../../primitives/GlassCore.js';
import '../../primitives/glass/GlassAdvanced.js';
import { OptimizedGlassCore } from '../../primitives/OptimizedGlassCore.js';
import '../../primitives/glass/OptimizedGlassAdvanced.js';
import '../../primitives/MotionNative.js';
import '../../primitives/motion/MotionFramer.js';
import { GlassButton } from '../button/GlassButton.js';

function GlassCommentThread({
  comments,
  onReply
}) {
  const [drafts, setDrafts] = React.useState({});
  const setDraft = (id, v) => setDrafts(d => ({
    ...d,
    [id]: v
  }));
  const render = (c, depth = 0) => jsxs("div", {
    className: cn("glass-gap-2"),
    children: [jsxs(OptimizedGlassCore, {
      elevation: "level1",
      className: cn("glass-radius-lg glass-p-3 glass-border glass-border-white-15"),
      children: [jsx("div", {
        className: cn("glass-text-sm glass-text-primary-90 glass-font-medium"),
        children: c.author
      }), jsx("div", {
        className: cn("glass-text-sm glass-text-primary-80 glass-whitespace-pre-wrap"),
        children: c.text
      }), c.createdAt && jsx("div", {
        className: cn("glass-text-xs glass-text-primary-60 glass-mt-1"),
        children: c.createdAt
      })]
    }), jsxs("div", {
      className: cn("glass-ml-6"),
      children: [jsxs("div", {
        className: cn("glass-flex glass-gap-2 glass-items-center"),
        children: [jsx("input", {
          value: drafts[c.id] ?? "",
          onChange: e => setDraft(c.id, e.target.value),
          placeholder: "Reply\u2026",
          className: cn("glass-flex-1 glass-bg-transparent glass-border glass-border-white-20 glass-radius-lg glass-px-2 glass-py-1 glass-text-sm glass-outline-none glass-focus glass-touch-target glass-contrast-guard")
        }), jsx(GlassButton, {
          size: "sm",
          variant: "secondary",
          onClick: e => {
            if (onReply && drafts[c.id]) {
              onReply(c.id, drafts[c.id]);
              setDraft(c.id, "");
            }
          },
          children: "Reply"
        })]
      }), c.replies?.length ? jsx("div", {
        className: cn("glass-mt-2 glass-gap-2"),
        children: (c.replies || []).map(r => render(r, depth + 1))
      }) : null]
    })]
  }, c.id);
  return jsx("div", {
    className: cn("glass-gap-3"),
    children: (comments || []).map(c => render(c))
  });
}

export { GlassCommentThread, GlassCommentThread as default };
//# sourceMappingURL=GlassCommentThread.js.map