@polderlabs/bizar 7.0.4 → 8.1.0

package/bizar-dash/src/web/v8/ui/feedback/Toast.tsx

@@ -0,0 +1,66 @@
+import { Toaster as SonnerToaster, toast as sonnerToast } from 'sonner';
+import { CheckCircle2, AlertCircle, Info, XCircle } from 'lucide-react';
+import { type ReactNode } from 'react';
+
+/**
+ * Toast — transient feedback notifications.
+ *
+ * Built on `sonner` (the same library Linear + Vercel use). Wire the
+ * `<Toaster />` once at the app root; then call `toast.*` from anywhere.
+ *
+ * Per DESIGN.md §9: optimistic mutations rollback with a toast.
+ */
+
+export interface ToasterProps {
+  position?: 'top-right' | 'top-center' | 'top-left' | 'bottom-right' | 'bottom-center' | 'bottom-left';
+}
+
+export function Toaster({ position = 'bottom-right' }: ToasterProps): JSX.Element {
+  return (
+    <SonnerToaster
+      position={position}
+      theme="system"
+      toastOptions={{
+        style: {
+          background: 'var(--surface-popover)',
+          color: 'var(--fg)',
+          border: '1px solid var(--border)',
+          fontSize: 'var(--fs-13)',
+        },
+      }}
+      icons={{
+        success: <CheckCircle2 size={16} aria-hidden="true" style={{ color: 'var(--success)' }} />,
+        info: <Info size={16} aria-hidden="true" style={{ color: 'var(--info)' }} />,
+        warning: <AlertCircle size={16} aria-hidden="true" style={{ color: 'var(--warning)' }} />,
+        error: <XCircle size={16} aria-hidden="true" style={{ color: 'var(--danger)' }} />,
+      }}
+    />
+  );
+}
+
+export interface ToastOptions {
+  description?: ReactNode;
+  duration?: number;
+  action?: { label: string; onClick: () => void };
+}
+
+export const toast = {
+  success(message: string, opts?: ToastOptions): string | number {
+    return sonnerToast.success(message, opts as never);
+  },
+  error(message: string, opts?: ToastOptions): string | number {
+    return sonnerToast.error(message, opts as never);
+  },
+  info(message: string, opts?: ToastOptions): string | number {
+    return sonnerToast.info(message, opts as never);
+  },
+  warning(message: string, opts?: ToastOptions): string | number {
+    return sonnerToast.warning(message, opts as never);
+  },
+  message(message: string, opts?: ToastOptions): string | number {
+    return sonnerToast.message(message, opts as never);
+  },
+  dismiss(id?: string | number): void {
+    sonnerToast.dismiss(id);
+  },
+};

package/bizar-dash/src/web/v8/ui/feedback/Tooltip.tsx

@@ -0,0 +1,89 @@
+import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import * as RxTooltip from '@radix-ui/react-tooltip';
+import { cx } from '../utils/cx.js';
+
+/**
+ * Tooltip — small popup with descriptive text.
+ *
+ * Built on Radix Tooltip. Per DESIGN.md §10:
+ *   - tooltip on disabled controls is BANNED — use inline helper text
+ *   - never put interactive content inside a tooltip
+ */
+export type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
+export type TooltipAlign = 'start' | 'center' | 'end';
+
+export interface TooltipProps extends Omit<ComponentPropsWithoutRef<typeof RxTooltip.Root>, 'children'> {
+  children: ReactNode;
+  content: ReactNode;
+  side?: TooltipSide;
+  align?: TooltipAlign;
+  delayDuration?: number;
+  shortcut?: string;
+}
+
+export const TooltipProvider = RxTooltip.Provider;
+
+export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(props, ref) {
+  const {
+    children,
+    content,
+    side = 'top',
+    align = 'center',
+    delayDuration = 250,
+    shortcut,
+    open,
+    defaultOpen,
+    onOpenChange,
+  } = props;
+
+  return (
+    <RxTooltip.Root
+      delayDuration={delayDuration}
+      open={open}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
+    >
+      <RxTooltip.Trigger asChild>{children}</RxTooltip.Trigger>
+      <RxTooltip.Portal>
+        <RxTooltip.Content
+          ref={ref}
+          side={side}
+          align={align}
+          sideOffset={6}
+          className={cx('v8-tooltip')}
+          style={{
+            background: 'var(--fg)',
+            color: 'var(--bg)',
+            fontSize: 'var(--fs-12)',
+            fontWeight: 500,
+            padding: '4px 8px',
+            borderRadius: 'var(--radius-sm)',
+            boxShadow: 'var(--shadow-2)',
+            maxWidth: 280,
+            zIndex: 'var(--z-tooltip)',
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 'var(--space-2)',
+            userSelect: 'none',
+          }}
+        >
+          {content}
+          {shortcut !== undefined && (
+            <kbd
+              style={{
+                fontFamily: 'var(--font-mono)',
+                fontSize: 'var(--fs-12)',
+                padding: '0 4px',
+                background: 'oklch(from var(--fg) l c h / 0.15)',
+                borderRadius: 'var(--radius-sm)',
+              }}
+            >
+              {shortcut}
+            </kbd>
+          )}
+          <RxTooltip.Arrow style={{ fill: 'var(--fg)' }} />
+        </RxTooltip.Content>
+      </RxTooltip.Portal>
+    </RxTooltip.Root>
+  );
+});

package/bizar-dash/src/web/v8/ui/goals/GoalCard.tsx

@@ -0,0 +1,176 @@
+import { type ReactNode } from 'react';
+import { Calendar, ChevronRight } from 'lucide-react';
+import { cx } from '../utils/cx.js';
+import { ProgressBar } from '../data/ProgressBar.js';
+import { Badge } from '../data/Badge.js';
+
+/**
+ * GoalCard — long-horizon goal surface (PLAN.md: "Goals page").
+ *
+ * Goals are NOT kanban cards. They are intentional commitments tracked
+ * over weeks/months. Each card shows: title, why (description), status,
+ * progress, due, owner, key results count.
+ */
+
+export type GoalStatus = 'on-track' | 'at-risk' | 'off-track' | 'done';
+
+export interface GoalCardProps {
+  id: string;
+  title: string;
+  /** Why this goal matters (the "because"). */
+  description?: string;
+  status: GoalStatus;
+  /** 0..1 fractional progress. */
+  progress: number;
+  /** Due date label (e.g. "Q3 2026", "Mar 31"). */
+  due?: string;
+  /** Owner name (renders as Avatar when paired with avatarUrl). */
+  ownerName?: string;
+  ownerAvatarUrl?: string;
+  /** Key results count + done count (e.g. "3 / 5 key results"). */
+  keyResultsDone?: number;
+  keyResultsTotal?: number;
+  /** Optional badges row (priority, tags). */
+  badges?: ReactNode;
+  /** Click handler — opens the goal detail. */
+  onOpen?: () => void;
+  className?: string;
+}
+
+const STATUS_LABEL: Record<GoalStatus, string> = {
+  'on-track': 'On track',
+  'at-risk': 'At risk',
+  'off-track': 'Off track',
+  done: 'Done',
+};
+
+const STATUS_TONE: Record<GoalStatus, 'success' | 'warning' | 'danger' | 'neutral'> = {
+  'on-track': 'success',
+  'at-risk': 'warning',
+  'off-track': 'danger',
+  done: 'neutral',
+};
+
+export function GoalCard(props: GoalCardProps) {
+  const {
+    title,
+    description,
+    status,
+    progress,
+    due,
+    ownerName,
+    ownerAvatarUrl,
+    keyResultsDone,
+    keyResultsTotal,
+    badges,
+    onOpen,
+    className,
+  } = props;
+
+  return (
+    <button
+      type="button"
+      onClick={onOpen}
+      className={cx('v8-goal-card', `v8-goal-card--${status}`, className)}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 'var(--space-3)',
+        width: '100%',
+        padding: 'var(--space-4)',
+        background: 'var(--surface-1)',
+        border: '1px solid var(--border)',
+        borderRadius: 'var(--radius-lg)',
+        textAlign: 'left',
+        cursor: 'pointer',
+        font: 'inherit',
+        color: 'inherit',
+        transition: 'border-color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out)',
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 'var(--space-2)' }}>
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div style={{ fontSize: 'var(--fs-14)', fontWeight: 600, color: 'var(--fg)', lineHeight: 'var(--lh-snug)' }}>
+            {title}
+          </div>
+          {description !== undefined && (
+            <div
+              style={{
+                fontSize: 'var(--fs-13)',
+                color: 'var(--fg-muted)',
+                marginTop: 4,
+                display: '-webkit-box',
+                WebkitLineClamp: 2,
+                WebkitBoxOrient: 'vertical',
+                overflow: 'hidden',
+              }}
+            >
+              {description}
+            </div>
+          )}
+        </div>
+        <Badge tone={STATUS_TONE[status]} dot>
+          {STATUS_LABEL[status]}
+        </Badge>
+      </div>
+      <div>
+        <ProgressBar
+          value={progress}
+          tone={status === 'on-track' ? 'success' : status === 'at-risk' ? 'warning' : status === 'off-track' ? 'danger' : 'accent'}
+        />
+        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 6, fontSize: 'var(--fs-12)', color: 'var(--fg-muted)', fontVariantNumeric: 'tabular-nums' }}>
+          <span>{Math.round(progress * 100)}% complete</span>
+          {keyResultsDone !== undefined && keyResultsTotal !== undefined && (
+            <span>
+              {keyResultsDone} / {keyResultsTotal} key results
+            </span>
+          )}
+        </div>
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          gap: 'var(--space-2)',
+          fontSize: 'var(--fs-12)',
+          color: 'var(--fg-subtle)',
+        }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
+          {due !== undefined && (
+            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
+              <Calendar size={12} aria-hidden="true" />
+              {due}
+            </span>
+          )}
+          {ownerName !== undefined && (
+            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+              <span
+                aria-hidden="true"
+                style={{
+                  width: 16,
+                  height: 16,
+                  borderRadius: 'var(--radius-pill)',
+                  background: ownerAvatarUrl !== undefined ? `url(${ownerAvatarUrl}) center/cover` : 'var(--accent)',
+                  display: 'inline-block',
+                }}
+              />
+              {ownerName}
+            </span>
+          )}
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)' }}>
+          {badges}
+          <ChevronRight size={14} aria-hidden="true" style={{ color: 'var(--fg-subtle)' }} />
+        </div>
+      </div>
+      <style>{`
+        .v8-goal-card:hover {
+          border-color: var(--accent);
+          background: var(--surface-2);
+        }
+      `}</style>
+    </button>
+  );
+}

package/bizar-dash/src/web/v8/ui/goals/GoalDetail.tsx

@@ -0,0 +1,245 @@
+import { useEffect, useState } from 'react';
+import { Plus, Trash2 } from 'lucide-react';
+import { Sheet, SheetContent } from '../feedback/Sheet.js';
+import { Stack } from '../primitives/Stack.js';
+import { Inline } from '../primitives/Inline.js';
+import { Button } from '../controls/Button.js';
+import { Input } from '../controls/Input.js';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '../controls/Select.js';
+import { Skeleton } from '../feedback/Skeleton.js';
+import { Badge } from '../data/Badge.js';
+import { fetchJson } from '../../data/fetcher.js';
+import type { Goal } from '../../data/types.js';
+
+/**
+ * GoalDetail — Sprint S12. Right-side Drawer with editable
+ * title / status / due / owner / key-results.
+ *
+ * Source-of-truth = `.bizar/PROGRESS.md` (per user direction). Each
+ * edit PATCHes `/api/goals/:id` and the server re-broadcasts the
+ * canonical state via `goals:change`.
+ */
+
+const STATUS_OPTIONS = [
+  { value: 'on-track', label: 'On track' },
+  { value: 'at-risk', label: 'At risk' },
+  { value: 'off-track', label: 'Off track' },
+  { value: 'blocked', label: 'Blocked' },
+  { value: 'active', label: 'Active' },
+  { value: 'done', label: 'Done' },
+];
+
+export interface GoalDetailProps {
+  goal: Goal;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function GoalDetail(props: GoalDetailProps): JSX.Element {
+  const { goal, open, onOpenChange } = props;
+  const [title, setTitle] = useState<string>(goal.title);
+  const [status, setStatus] = useState<string>(goal.status);
+  const [owner, setOwner] = useState<string>(goal.owner || '');
+  const [due, setDue] = useState<string>(goal.due || '');
+  const [newKr, setNewKr] = useState<string>('');
+  const [busy, setBusy] = useState<string | null>(null);
+  const [message, setMessage] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (open) {
+      setTitle(goal.title);
+      setStatus(goal.status);
+      setOwner(goal.owner || '');
+      setDue(goal.due || '');
+      setMessage(null);
+      setError(null);
+      setNewKr('');
+    }
+  }, [open, goal]);
+
+  const patch = async (body: Record<string, unknown>, label: string): Promise<void> => {
+    setBusy(label);
+    setMessage(null);
+    setError(null);
+    try {
+      await fetchJson(`/api/goals/${encodeURIComponent(goal.id)}`, { method: 'PATCH', body });
+      setMessage(`${label} saved.`);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const saveTitle = (): void => {
+    if (title.trim() && title !== goal.title) void patch({ title: title.trim() }, 'Title');
+  };
+  const saveStatus = (v: string): void => {
+    setStatus(v);
+    if (v !== goal.status) void patch({ status: v }, 'Status');
+  };
+  const saveOwner = (): void => {
+    const v = owner.trim();
+    if (v !== (goal.owner || '')) void patch({ owner: v }, 'Owner');
+  };
+  const saveDue = (): void => {
+    const v = due.trim();
+    if (v !== (goal.due || '')) void patch({ due: v }, 'Due');
+  };
+
+  const toggleKr = async (krId: string, current: boolean): Promise<void> => {
+    setBusy(`kr-${krId}`);
+    setError(null);
+    try {
+      await fetchJson(`/api/goals/${encodeURIComponent(goal.id)}/key-results/${encodeURIComponent(krId)}`, {
+        method: 'PATCH',
+        body: { done: !current },
+      });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const addKr = async (): Promise<void> => {
+    const v = newKr.trim();
+    if (!v) return;
+    setNewKr('');
+    setBusy('add-kr');
+    setError(null);
+    try {
+      await fetchJson(`/api/goals/${encodeURIComponent(goal.id)}/key-results`, {
+        method: 'POST',
+        body: { title: v },
+      });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  const removeKr = async (krId: string): Promise<void> => {
+    setBusy(`remove-${krId}`);
+    setError(null);
+    try {
+      await fetchJson(`/api/goals/${encodeURIComponent(goal.id)}/key-results/${encodeURIComponent(krId)}`, {
+        method: 'DELETE',
+      });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" title="Edit goal">
+      <Stack gap={4} style={{ padding: 'var(--space-4)' }}>
+        <Stack gap={2}>
+          <label htmlFor="goal-title" style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
+            Title
+          </label>
+          <Inline gap={2}>
+            <Input
+              id="goal-title"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              onBlur={saveTitle}
+              disabled={busy !== null}
+              style={{ flex: 1 }}
+            />
+          </Inline>
+        </Stack>
+
+        <Stack gap={2}>
+          <label htmlFor="goal-status" style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
+            Status
+          </label>
+          <Select value={status} onValueChange={saveStatus}>
+            <SelectTrigger id="goal-status" size="sm" placeholder="Status" />
+            <SelectContent>
+              {STATUS_OPTIONS.map((opt) => (
+                <SelectItem key={opt.value} value={opt.value}>
+                  {opt.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </Stack>
+
+        <Inline gap={2}>
+          <Stack gap={2} style={{ flex: 1 }}>
+            <label htmlFor="goal-owner" style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
+              Owner
+            </label>
+            <Input id="goal-owner" value={owner} onChange={(e) => setOwner(e.target.value)} onBlur={saveOwner} disabled={busy !== null} />
+          </Stack>
+          <Stack gap={2} style={{ flex: 1 }}>
+            <label htmlFor="goal-due" style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>
+              Due
+            </label>
+            <Input id="goal-due" value={due} onChange={(e) => setDue(e.target.value)} onBlur={saveDue} placeholder="2026-09-30" disabled={busy !== null} />
+          </Stack>
+        </Inline>
+
+        <Stack gap={2}>
+          <div style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>Key results</div>
+          <Stack gap={1}>
+            {goal.keyResults.length === 0 && (
+              <div style={{ fontSize: 'var(--fs-12)', color: 'var(--fg-muted)' }}>None yet.</div>
+            )}
+            {goal.keyResults.map((kr) => (
+              <Inline key={kr.id} gap={2} align="center">
+                <input
+                  type="checkbox"
+                  checked={kr.done}
+                  onChange={() => { void toggleKr(kr.id, kr.done); }}
+                  aria-label={`Toggle ${kr.title}`}
+                  disabled={busy !== null}
+                />
+                <span style={{ flex: 1, fontSize: 'var(--fs-13)', textDecoration: kr.done ? 'line-through' : 'none' }}>
+                  {kr.title}
+                </span>
+                {kr.assignee && <Badge tone="neutral">{kr.assignee}</Badge>}
+                <Button
+                  variant="ghost"
+                  onClick={() => { void removeKr(kr.id); }}
+                  disabled={busy !== null}
+                  aria-label={`Remove ${kr.title}`}
+                >
+                  <Trash2 size={12} aria-hidden />
+                </Button>
+              </Inline>
+            ))}
+          </Stack>
+          <Inline gap={2}>
+            <Input
+              value={newKr}
+              onChange={(e) => setNewKr(e.target.value)}
+              onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); void addKr(); } }}
+              placeholder="Add key result…"
+              disabled={busy !== null}
+              style={{ flex: 1 }}
+            />
+            <Button variant="secondary" onClick={() => { void addKr(); }} disabled={!newKr.trim() || busy !== null}>
+              <Plus size={14} aria-hidden /> Add
+            </Button>
+          </Inline>
+        </Stack>
+
+        {message !== null && (
+          <div role="status" style={{ fontSize: 'var(--fs-12)', color: 'var(--success)' }}>{message}</div>
+        )}
+        {error !== null && (
+          <div role="alert" style={{ fontSize: 'var(--fs-12)', color: 'var(--danger)' }}>{error}</div>
+        )}
+        {busy !== null && <Skeleton style={{ height: 12 }} />}
+      </Stack>
+    </SheetContent>
+    </Sheet>
+  );
+}

package/bizar-dash/src/web/v8/ui/goals/KeyResult.tsx

@@ -0,0 +1,115 @@
+import { type ReactNode } from 'react';
+import { CheckCircle2, Circle, Minus } from 'lucide-react';
+import { cx } from '../utils/cx.js';
+import { ProgressBar } from '../data/ProgressBar.js';
+
+/**
+ * KeyResult — a measurable sub-goal inside a Goal.
+ *
+ * Renders title + progress + status icon + optional metric caption
+ * (e.g. "47 / 100 tasks completed").
+ */
+
+export type KeyResultStatus = 'done' | 'in-progress' | 'not-started';
+
+export interface KeyResultProps {
+  id: string;
+  title: string;
+  status: KeyResultStatus;
+  /** 0..1 fractional progress. */
+  progress: number;
+  /** Optional metric caption (e.g. "47 / 100"). */
+  metric?: ReactNode;
+  /** Optional assignee name. */
+  assignee?: string;
+  onToggle?: () => void;
+  className?: string;
+}
+
+const STATUS_ICON = {
+  done: CheckCircle2,
+  'in-progress': Minus,
+  'not-started': Circle,
+} as const;
+
+const STATUS_FG = {
+  done: 'var(--success)',
+  'in-progress': 'var(--info)',
+  'not-started': 'var(--fg-subtle)',
+} as const;
+
+export function KeyResult(props: KeyResultProps) {
+  const { title, status, progress, metric, assignee, onToggle, className } = props;
+  const Icon = STATUS_ICON[status];
+  return (
+    <div
+      className={cx('v8-key-result', `v8-key-result--${status}`, className)}
+      style={{
+        display: 'flex',
+        alignItems: 'flex-start',
+        gap: 'var(--space-3)',
+        padding: 'var(--space-3)',
+        background: 'var(--surface-0)',
+        border: '1px solid var(--border)',
+        borderRadius: 'var(--radius)',
+      }}
+    >
+      <button
+        type="button"
+        onClick={onToggle}
+        aria-label={status === 'done' ? 'Mark as not done' : 'Mark as done'}
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: 20,
+          height: 20,
+          marginTop: 2,
+          padding: 0,
+          background: 'transparent',
+          border: 0,
+          borderRadius: 'var(--radius-sm)',
+          color: STATUS_FG[status],
+          cursor: 'pointer',
+          flexShrink: 0,
+        }}
+      >
+        <Icon size={18} aria-hidden="true" />
+      </button>
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div
+          style={{
+            fontSize: 'var(--fs-13)',
+            color: status === 'done' ? 'var(--fg-muted)' : 'var(--fg)',
+            fontWeight: 500,
+            textDecoration: status === 'done' ? 'line-through' : 'none',
+            lineHeight: 'var(--lh-snug)',
+          }}
+        >
+          {title}
+        </div>
+        {status !== 'not-started' && (
+          <div style={{ marginTop: 'var(--space-2)' }}>
+            <ProgressBar value={progress} tone={status === 'done' ? 'success' : 'accent'} height={4} />
+          </div>
+        )}
+        {(metric !== undefined || assignee !== undefined) && (
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-between',
+              gap: 'var(--space-2)',
+              marginTop: 6,
+              fontSize: 'var(--fs-12)',
+              color: 'var(--fg-subtle)',
+            }}
+          >
+            {metric !== undefined && <span style={{ fontVariantNumeric: 'tabular-nums' }}>{metric}</span>}
+            {assignee !== undefined && <span>@{assignee}</span>}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}