@a4ui/core 0.11.1 → 0.12.0

package/src/ui/Clock.tsx

@@ -0,0 +1,221 @@
+// Live clock that renders the current time as either a digital readout or an
+// analog dial. A single setInterval (started in onMount, cleared in
+// onCleanup) ticks a `Date` signal once per second; both variants derive their
+// hour/minute/second parts from that same signal, using `Intl.DateTimeFormat`
+// when a specific `timeZone` is requested.
+import { createSignal, onCleanup, onMount, Show, For, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface ClockProps {
+  /** 'digital' (default) or 'analog'. */
+  variant?: 'digital' | 'analog'
+  /** Show the seconds hand / seconds digits. @default true */
+  seconds?: boolean
+  /** 12-hour clock with AM/PM instead of 24-hour. @default false */
+  hour12?: boolean
+  /** IANA time zone (e.g. 'America/Hermosillo'); defaults to the local zone. */
+  timeZone?: string
+  /** Diameter in px for the analog face. @default 160 */
+  size?: number
+  class?: string
+}
+
+const pad = (n: number): string => String(n).padStart(2, '0')
+
+interface TimeParts {
+  hours: number
+  minutes: number
+  seconds: number
+}
+
+/**
+ * Read h/m/s out of a Date, in `timeZone` if given, else the local zone.
+ * Always returns 24h parts — AM/PM and the 12h clamp are derived by the
+ * caller, so display formatting stays consistent whether or not a timeZone
+ * is set.
+ */
+function partsOf(date: Date, timeZone: string | undefined): TimeParts {
+  if (!timeZone) {
+    return { hours: date.getHours(), minutes: date.getMinutes(), seconds: date.getSeconds() }
+  }
+  const formatted = new Intl.DateTimeFormat('en-US', {
+    timeZone,
+    hour12: false,
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  }).formatToParts(date)
+  const get = (type: string) => Number(formatted.find((p) => p.type === type)?.value ?? 0)
+  return { hours: get('hour') % 24, minutes: get('minute'), seconds: get('second') }
+}
+
+/** Digital HH:MM(:SS) readout, zero-padded, with an optional AM/PM suffix. */
+function DigitalClock(props: {
+  parts: TimeParts
+  seconds: boolean
+  hour12: boolean
+  class?: string
+}): JSX.Element {
+  const display = () => {
+    const { hours, minutes, seconds } = props.parts
+    let h = hours
+    let suffix = ''
+    if (props.hour12) {
+      suffix = h >= 12 ? 'PM' : 'AM'
+      h = h % 12
+      if (h === 0) h = 12
+    }
+    const time = props.seconds ? `${pad(h)}:${pad(minutes)}:${pad(seconds)}` : `${pad(h)}:${pad(minutes)}`
+    return { time, suffix }
+  }
+
+  return (
+    <div class={cn('flex flex-col items-center justify-center', props.class)}>
+      <span class="flex items-baseline gap-2 tabular-nums text-4xl font-bold tracking-tight text-foreground">
+        <span>{display().time}</span>
+        <Show when={props.hour12}>
+          <span class="text-base font-normal text-muted-foreground">{display().suffix}</span>
+        </Show>
+      </span>
+    </div>
+  )
+}
+
+/** Analog dial: face circle, 12 hour ticks, hour/minute/(second) hands, hub. */
+function AnalogClock(props: {
+  parts: TimeParts
+  seconds: boolean
+  size: number
+  class?: string
+}): JSX.Element {
+  const size = () => props.size
+  const cx = () => size() / 2
+  const cy = () => size() / 2
+  const radius = () => size() / 2
+
+  const hourDeg = () => (props.parts.hours % 12) * 30 + props.parts.minutes * 0.5
+  const minuteDeg = () => props.parts.minutes * 6 + props.parts.seconds * 0.1
+  const secondDeg = () => props.parts.seconds * 6
+
+  const ticks = Array.from({ length: 12 }, (_, i) => i)
+
+  const handPoints = (lengthRatio: number) => {
+    const r = radius() * lengthRatio
+    return `${cx()},${cy()} ${cx()},${cy() - r}`
+  }
+
+  return (
+    <svg
+      width={size()}
+      height={size()}
+      viewBox={`0 0 ${size()} ${size()}`}
+      class={cn('inline-block', props.class)}
+      role="img"
+      aria-label="Analog clock"
+    >
+      <circle cx={cx()} cy={cy()} r={radius() - 2} fill="none" stroke="hsl(var(--border))" stroke-width={2} />
+      <For each={ticks}>
+        {(i) => {
+          const angle = i * 30
+          const outer = radius() - 4
+          const inner = radius() - (i % 3 === 0 ? 14 : 9)
+          const x1 = cx() + outer * Math.sin((angle * Math.PI) / 180)
+          const y1 = cy() - outer * Math.cos((angle * Math.PI) / 180)
+          const x2 = cx() + inner * Math.sin((angle * Math.PI) / 180)
+          const y2 = cy() - inner * Math.cos((angle * Math.PI) / 180)
+          return (
+            <line
+              x1={x1}
+              y1={y1}
+              x2={x2}
+              y2={y2}
+              stroke="hsl(var(--muted-foreground))"
+              stroke-width={i % 3 === 0 ? 2 : 1}
+              stroke-linecap="round"
+            />
+          )
+        }}
+      </For>
+      {/* Hands rotate via CSS transform. In CSS, rotate() takes only an angle,
+          so the pivot is set with transform-origin: center + transform-box:
+          view-box (which resolves 'center' against the SVG viewBox = the dial
+          center). The SVG-attribute form rotate(angle cx cy) would not work here. */}
+      <polyline
+        points={handPoints(0.45)}
+        stroke="hsl(var(--foreground))"
+        stroke-width={4}
+        stroke-linecap="round"
+        style={{
+          transform: `rotate(${hourDeg()}deg)`,
+          'transform-origin': 'center',
+          'transform-box': 'view-box',
+        }}
+      />
+      <polyline
+        points={handPoints(0.65)}
+        stroke="hsl(var(--foreground))"
+        stroke-width={3}
+        stroke-linecap="round"
+        style={{
+          transform: `rotate(${minuteDeg()}deg)`,
+          'transform-origin': 'center',
+          'transform-box': 'view-box',
+        }}
+      />
+      <Show when={props.seconds}>
+        <polyline
+          points={handPoints(0.75)}
+          stroke="hsl(var(--primary))"
+          stroke-width={1.5}
+          stroke-linecap="round"
+          style={{
+            transform: `rotate(${secondDeg()}deg)`,
+            'transform-origin': 'center',
+            'transform-box': 'view-box',
+          }}
+        />
+      </Show>
+      <circle cx={cx()} cy={cy()} r={3.5} fill="hsl(var(--primary))" />
+    </svg>
+  )
+}
+
+/**
+ * Live, self-updating clock. Ticks once per second from a single interval
+ * (started in `onMount`, cleared in `onCleanup`) and renders either a digital
+ * `HH:MM:SS` readout or an analog SVG dial. Pass `timeZone` to show a specific
+ * IANA zone instead of the viewer's local time.
+ *
+ * @example
+ * ```tsx
+ * <Clock />
+ * <Clock variant="analog" size={200} timeZone="America/Hermosillo" />
+ * <Clock hour12 seconds={false} />
+ * ```
+ */
+export function Clock(props: ClockProps): JSX.Element {
+  const [now, setNow] = createSignal(new Date())
+
+  onMount(() => {
+    const id = setInterval(() => setNow(new Date()), 1000)
+    onCleanup(() => clearInterval(id))
+  })
+
+  const variant = () => props.variant ?? 'digital'
+  const showSeconds = () => props.seconds ?? true
+  const hour12 = () => props.hour12 ?? false
+  const size = () => props.size ?? 160
+  const parts = () => partsOf(now(), props.timeZone)
+
+  return (
+    <Show
+      when={variant() === 'analog'}
+      fallback={
+        <DigitalClock parts={parts()} seconds={showSeconds()} hour12={hour12()} class={props.class} />
+      }
+    >
+      <AnalogClock parts={parts()} seconds={showSeconds()} size={size()} class={props.class} />
+    </Show>
+  )
+}

package/src/ui/Collapse.tsx

@@ -0,0 +1,48 @@
+// Single controlled collapsible region with a toggle header.
+import { ChevronDown } from 'lucide-solid'
+import type { JSX, ParentProps } from 'solid-js'
+import { Show } from 'solid-js'
+import { cn } from '../lib/cn'
+
+interface CollapseProps extends ParentProps {
+  /** Whether the panel is currently expanded. */
+  open: boolean
+  /** Called with the next open state when the header is toggled. */
+  onOpenChange: (open: boolean) => void
+  /** Text shown in the header button. */
+  title: string
+  class?: string
+}
+
+/**
+ * A single controlled collapsible region: a header button that toggles a panel
+ * of arbitrary children. State is owned by the caller via `open`/`onOpenChange`.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = createSignal(false)
+ * <Collapse open={open()} onOpenChange={setOpen} title="Details">
+ *   <p>Hidden content revealed on toggle.</p>
+ * </Collapse>
+ * ```
+ */
+export function Collapse(props: CollapseProps): JSX.Element {
+  return (
+    <div class={cn(props.class)}>
+      <button
+        type="button"
+        aria-expanded={props.open}
+        onClick={() => props.onOpenChange(!props.open)}
+        class="flex w-full items-center justify-between rounded-md px-3 py-2 text-sm font-medium text-foreground hover:bg-muted"
+      >
+        {props.title}
+        <ChevronDown
+          class={cn('h-4 w-4 shrink-0 transition-transform duration-200', props.open && 'rotate-180')}
+        />
+      </button>
+      <Show when={props.open}>
+        <div class="px-3 py-2 text-sm text-muted-foreground">{props.children}</div>
+      </Show>
+    </div>
+  )
+}

package/src/ui/ColorPicker.tsx

@@ -0,0 +1,89 @@
+// The hex text field keeps a local buffer so half-typed values (e.g. "#3b8")
+// don't get pushed upstream; only a full valid 6-digit hex calls onChange.
+// Swatches use inline `background` on purpose — they render arbitrary user
+// colors, which is the one legitimate place to bypass the theme tokens.
+import type { JSX } from 'solid-js'
+import { createEffect, createSignal, For } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+const HEX_RE = /^#[0-9a-fA-F]{6}$/
+
+const DEFAULT_SWATCHES = [
+  '#ef4444',
+  '#f97316',
+  '#eab308',
+  '#22c55e',
+  '#3b82f6',
+  '#8b5cf6',
+  '#ec4899',
+  '#64748b',
+]
+
+export interface ColorPickerProps {
+  /** Current color as a `#rrggbb` hex string. */
+  value: string
+  /** Called with a valid `#rrggbb` hex whenever the user picks a new color. */
+  onChange: (hex: string) => void
+  /** Preset colors shown as clickable swatches. Defaults to a small palette. */
+  swatches?: string[]
+  class?: string
+}
+
+/**
+ * Controlled color picker: a native color well, a hex text field, and a row of
+ * preset swatches. The text field validates against `#rrggbb` and only reports
+ * complete, valid hex values while letting you type freely in between.
+ *
+ * @example
+ * ```tsx
+ * const [color, setColor] = createSignal('#3b82f6')
+ * <ColorPicker value={color()} onChange={setColor} />
+ * ```
+ */
+export function ColorPicker(props: ColorPickerProps): JSX.Element {
+  const [text, setText] = createSignal(props.value)
+
+  // Keep the text buffer in sync when the value changes from outside.
+  createEffect(() => setText(props.value))
+
+  const swatches = () => props.swatches ?? DEFAULT_SWATCHES
+
+  const onHexInput = (value: string): void => {
+    setText(value)
+    if (HEX_RE.test(value)) props.onChange(value)
+  }
+
+  return (
+    <div class={cn('flex flex-wrap items-center gap-3', props.class)}>
+      <input
+        type="color"
+        aria-label="Pick a color"
+        class="h-10 w-14 cursor-pointer rounded-md border border-border bg-transparent"
+        value={props.value}
+        onInput={(ev) => props.onChange(ev.currentTarget.value)}
+      />
+      <input
+        class="rounded-md border border-input bg-background px-3 py-2 text-sm font-mono"
+        value={text()}
+        onInput={(ev) => onHexInput(ev.currentTarget.value)}
+      />
+      <div class="flex w-full flex-wrap items-center gap-2">
+        <For each={swatches()}>
+          {(hex) => (
+            <button
+              type="button"
+              aria-label={hex}
+              style={{ background: hex }}
+              class={cn(
+                'h-6 w-6 rounded-md border border-border transition-transform active:scale-90 focus:outline-none focus:ring-2 focus:ring-ring',
+                hex === props.value && 'ring-2 ring-ring ring-offset-1 ring-offset-background',
+              )}
+              onClick={() => props.onChange(hex)}
+            />
+          )}
+        </For>
+      </div>
+    </div>
+  )
+}

package/src/ui/Combobox.tsx

@@ -0,0 +1,67 @@
+// Searchable single-select on Kobalte's Combobox primitive (string options).
+import { Combobox as KCombobox } from '@kobalte/core/combobox'
+import { Check, ChevronsUpDown } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+interface ComboboxProps {
+  /** Full list of selectable string options (filtered as the user types). */
+  options: string[]
+  value: string
+  /** Called with the newly selected option, or `''` if the selection is cleared. */
+  onChange: (value: string) => void
+  placeholder?: string
+  class?: string
+}
+
+/**
+ * Searchable single-select dropdown for plain string options, built on
+ * Kobalte's `Combobox` primitive with a filterable text input and trigger.
+ *
+ * @example
+ * ```tsx
+ * <Combobox
+ *   options={['Draft', 'Active', 'Archived']}
+ *   value={status()}
+ *   onChange={setStatus}
+ *   placeholder="Select a status"
+ * />
+ * ```
+ */
+export function Combobox(props: ComboboxProps): JSX.Element {
+  return (
+    <KCombobox
+      options={props.options}
+      value={props.value}
+      onChange={(v) => props.onChange(v ?? '')}
+      placeholder={props.placeholder}
+      class={cn('w-full', props.class)}
+      itemComponent={(itemProps) => (
+        <KCombobox.Item
+          item={itemProps.item}
+          class="flex cursor-pointer select-none items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-muted"
+        >
+          <KCombobox.ItemLabel>{itemProps.item.rawValue}</KCombobox.ItemLabel>
+          <KCombobox.ItemIndicator>
+            <Check class="h-4 w-4" />
+          </KCombobox.ItemIndicator>
+        </KCombobox.Item>
+      )}
+    >
+      <KCombobox.Control class="flex w-full items-center rounded-md border border-input bg-background text-foreground transition-colors focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/30">
+        <KCombobox.Input class="w-full bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground" />
+        <KCombobox.Trigger class="grid h-9 w-9 shrink-0 place-items-center text-muted-foreground">
+          <KCombobox.Icon>
+            <ChevronsUpDown class="h-4 w-4" />
+          </KCombobox.Icon>
+        </KCombobox.Trigger>
+      </KCombobox.Control>
+      <KCombobox.Portal>
+        <KCombobox.Content class="z-50 overflow-hidden rounded-md border border-border bg-card p-1 text-card-foreground shadow-sm">
+          <KCombobox.Listbox class="max-h-60 overflow-y-auto" />
+        </KCombobox.Content>
+      </KCombobox.Portal>
+    </KCombobox>
+  )
+}

package/src/ui/Command.tsx

@@ -0,0 +1,158 @@
+// ⌘K command palette on Kobalte's Dialog primitive — a generic, app-agnostic
+// version of preview/CommandPalette. Feed it a flat list of CommandItems and it
+// handles fuzzy filtering (label + hint + group), keyboard navigation
+// (↑/↓/Enter), optional grouping, and query reset on close. Theme-agnostic:
+// every color comes from a semantic token, never a literal.
+import { Dialog } from '@kobalte/core/dialog'
+import { createEffect, createMemo, createSignal, For, Show, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+/** A single selectable row in the palette. */
+export interface CommandItem {
+  /** Primary text shown on the left of the row. */
+  label: string
+  /** Optional secondary text shown muted on the right. */
+  hint?: string
+  /** Optional group name; rows sharing a group render under one header. */
+  group?: string
+  /** Invoked when the row is picked (click or Enter). */
+  onSelect: () => void
+}
+
+export interface CommandProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** Flat list of commands; filtered live against the search query. */
+  items: CommandItem[]
+  /** Search input placeholder. @default 'Type a command…' */
+  placeholder?: string
+}
+
+/**
+ * A ⌘K command palette: a centered, top-anchored dialog with a search input and
+ * a filtered, keyboard-navigable list of commands. Filtering is a
+ * case-insensitive substring match over each item's `label + hint + group`.
+ * Picking a row runs its `onSelect`, closes the palette, and clears the query.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = createSignal(false)
+ * <Command
+ *   open={open()}
+ *   onOpenChange={setOpen}
+ *   items={[
+ *     { label: 'New file', hint: '⌘N', group: 'File', onSelect: () => createFile() },
+ *     { label: 'Toggle theme', group: 'View', onSelect: () => toggleTheme() },
+ *   ]}
+ * />
+ * ```
+ */
+export function Command(props: CommandProps): JSX.Element {
+  const [query, setQuery] = createSignal('')
+  const [active, setActive] = createSignal(0)
+
+  const results = createMemo<CommandItem[]>(() => {
+    const q = query().trim().toLowerCase()
+    if (!q) return props.items
+    return props.items.filter((item) =>
+      `${item.label} ${item.hint ?? ''} ${item.group ?? ''}`.toLowerCase().includes(q),
+    )
+  })
+
+  // Keep the highlighted row in range whenever the result set changes.
+  createEffect(() => {
+    results()
+    setActive(0)
+  })
+
+  // Reset the query whenever the palette closes so it opens fresh next time.
+  createEffect(() => {
+    if (!props.open) setQuery('')
+  })
+
+  const pick = (item: CommandItem) => {
+    item.onSelect()
+    props.onOpenChange(false)
+    setQuery('')
+  }
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    const list = results()
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setActive((i) => Math.min(i + 1, list.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setActive((i) => Math.max(i - 1, 0))
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      const item = list[active()]
+      if (item) pick(item)
+    }
+  }
+
+  return (
+    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay class="modal-overlay fixed inset-0 z-40 bg-background/80 backdrop-blur-sm" />
+        <div class="fixed inset-x-0 top-[14vh] z-50 mx-auto w-full max-w-lg px-4">
+          <Dialog.Content
+            role="dialog"
+            class="modal-content bg-glass overflow-hidden rounded-xl border border-border shadow-2xl"
+          >
+            <input
+              autofocus
+              type="text"
+              value={query()}
+              onInput={(e) => setQuery(e.currentTarget.value)}
+              onKeyDown={onKeyDown}
+              placeholder={props.placeholder ?? 'Type a command…'}
+              aria-label={props.placeholder ?? 'Type a command…'}
+              class="w-full border-b border-border bg-transparent px-4 py-3 text-sm text-foreground outline-none placeholder:text-muted-foreground"
+            />
+            <ul class="max-h-80 overflow-y-auto p-2">
+              <Show
+                when={results().length}
+                fallback={<li class="px-3 py-8 text-center text-sm text-muted-foreground">No results</li>}
+              >
+                <For each={results()}>
+                  {(item, i) => (
+                    <li>
+                      <Show when={item.group && (i() === 0 || results()[i() - 1]?.group !== item.group)}>
+                        <div class="px-3 pb-1 pt-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+                          {item.group}
+                        </div>
+                      </Show>
+                      <button
+                        type="button"
+                        onMouseEnter={() => setActive(i())}
+                        onClick={() => pick(item)}
+                        class={cn(
+                          'flex w-full items-center justify-between gap-3 rounded-md px-3 py-2 text-left transition-colors',
+                          active() === i() ? 'bg-primary/15 text-foreground' : 'text-muted-foreground',
+                        )}
+                      >
+                        <span class="text-sm text-foreground">{item.label}</span>
+                        <Show when={item.hint}>
+                          <span class="text-[11px] uppercase tracking-wide text-muted-foreground">
+                            {item.hint}
+                          </span>
+                        </Show>
+                      </button>
+                    </li>
+                  )}
+                </For>
+              </Show>
+            </ul>
+            <div class="flex items-center gap-3 border-t border-border px-4 py-2 text-[11px] text-muted-foreground">
+              <span>↑↓ to navigate</span>
+              <span>↵ to select</span>
+              <span>esc to close</span>
+            </div>
+          </Dialog.Content>
+        </div>
+      </Dialog.Portal>
+    </Dialog>
+  )
+}

package/src/ui/Comment.tsx

@@ -0,0 +1,91 @@
+// Threaded comment layout — an avatar, header/content/actions, and recursive replies.
+import type { JSX } from 'solid-js'
+import { For, Show } from 'solid-js'
+
+import { Avatar } from './Avatar'
+
+/** A single comment node, optionally carrying its own nested `replies`. */
+export interface CommentData {
+  /** Unique identifier for the comment. */
+  id: string
+  /** Display name of the comment's author. */
+  author: string
+  /** Author avatar image URL; falls back to the author's initials. */
+  avatar?: string
+  /** Human-readable timestamp shown next to the author. */
+  time?: string
+  /** The comment body. */
+  content: JSX.Element
+  /** Nested replies, rendered recursively below the comment. */
+  replies?: CommentData[]
+}
+
+export interface CommentProps {
+  comment: CommentData
+  /** Renders an actions row (e.g. reply/like) for a given comment. */
+  actions?: (comment: CommentData) => JSX.Element
+  class?: string
+}
+
+/** Derives up-to-two-letter initials from an author name. */
+function initials(author: string): string {
+  return author
+    .trim()
+    .split(/\s+/)
+    .map((word) => word[0] ?? '')
+    .slice(0, 2)
+    .join('')
+    .toUpperCase()
+}
+
+/**
+ * Threaded comment layout: a left-aligned {@link Avatar} beside the author,
+ * timestamp, content, and an optional actions row. Any `replies` are rendered
+ * recursively in a left-indented, bordered thread, inheriting the same `actions`.
+ *
+ * @example
+ * ```tsx
+ * <Comment
+ *   comment={{
+ *     id: '1',
+ *     author: 'Jane Doe',
+ *     time: '2h ago',
+ *     content: <p>Great work on this!</p>,
+ *     replies: [{ id: '2', author: 'John Smith', content: <p>Agreed.</p> }],
+ *   }}
+ *   actions={(c) => <button>Reply to {c.author}</button>}
+ * />
+ * ```
+ */
+export function Comment(props: CommentProps): JSX.Element {
+  return (
+    <div class={props.class}>
+      <div class="flex gap-3">
+        <Avatar
+          src={props.comment.avatar}
+          alt={props.comment.author}
+          fallback={initials(props.comment.author)}
+        />
+        <div class="flex-1">
+          <div class="flex items-baseline gap-2">
+            <span class="text-sm font-medium text-foreground">{props.comment.author}</span>
+            <Show when={props.comment.time}>
+              <span class="text-xs text-muted-foreground">{props.comment.time}</span>
+            </Show>
+          </div>
+          <div class="mt-1 text-sm text-foreground">{props.comment.content}</div>
+          <Show when={props.actions}>
+            <div class="mt-2 flex gap-3 text-xs text-muted-foreground">{props.actions?.(props.comment)}</div>
+          </Show>
+        </div>
+      </div>
+      <Show when={props.comment.replies?.length}>
+        <div class="mt-4 space-y-4 border-l border-border pl-4">
+          <For each={props.comment.replies}>
+            {(reply) => <Comment comment={reply} actions={props.actions} />}
+          </For>
+        </div>
+      </Show>
+    </div>
+  )
+}