@fragments-sdk/cli 0.2.2

package/src/viewer/components/InteractionsPanel.tsx

@@ -0,0 +1,720 @@
+/**
+ * Interactions Panel - Storybook-style interaction testing
+ *
+ * Runs play functions from Storybook stories and displays:
+ * - Step-by-step progress
+ * - Assertion results (pass/fail)
+ * - Error messages with stack traces
+ * - Re-run capabilities
+ * - Step-through debugging with breakpoints
+ */
+
+import { useState, useCallback, useRef, useEffect } from "react";
+import clsx from "clsx";
+import type { PlayFunction, PlayFunctionContext, SegmentVariant } from "../../core/index.js";
+import {
+  PlayIcon,
+  CheckIcon,
+  XIcon,
+  LoadingIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  RefreshIcon,
+  BugIcon,
+  PauseIcon,
+  StepOverIcon,
+  ContinueIcon,
+  BreakpointIcon,
+  BreakpointEmptyIcon,
+} from "./Icons.js";
+
+// Step execution state
+interface StepResult {
+  name: string;
+  status: "pending" | "running" | "passed" | "failed" | "paused";
+  error?: string;
+  duration?: number;
+}
+
+interface InteractionResult {
+  status: "idle" | "running" | "passed" | "failed" | "paused";
+  steps: StepResult[];
+  error?: string;
+  duration?: number;
+  startTime?: number;
+}
+
+// Debug state
+interface DebugState {
+  mode: "normal" | "debug";
+  isPaused: boolean;
+  currentStepIndex: number;
+  breakpoints: Set<number>;
+}
+
+interface InteractionsPanelProps {
+  /** The current variant being displayed */
+  variant: SegmentVariant | null;
+  /** Selector for the preview container element */
+  previewSelector?: string;
+  /** Key that changes when the preview updates */
+  previewKey?: number;
+  /** Args currently being used for the preview */
+  currentArgs?: Record<string, unknown>;
+}
+
+export function InteractionsPanel({
+  variant,
+  previewSelector = '[data-preview-container="true"]',
+  previewKey = 0,
+  currentArgs = {},
+}: InteractionsPanelProps) {
+  const [result, setResult] = useState<InteractionResult>({
+    status: "idle",
+    steps: [],
+  });
+  const [expandedSteps, setExpandedSteps] = useState<Set<number>>(new Set());
+  const [debugState, setDebugState] = useState<DebugState>({
+    mode: "normal",
+    isPaused: false,
+    currentStepIndex: -1,
+    breakpoints: new Set(),
+  });
+  const abortControllerRef = useRef<AbortController | null>(null);
+  const resumeResolverRef = useRef<(() => void) | null>(null);
+
+  // Reset state when variant changes
+  useEffect(() => {
+    setResult({ status: "idle", steps: [] });
+    setExpandedSteps(new Set());
+    setDebugState((prev) => ({
+      ...prev,
+      isPaused: false,
+      currentStepIndex: -1,
+    }));
+  }, [variant?.name, previewKey]);
+
+  // Keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Only handle if this panel is focused or no specific element is focused
+      if (document.activeElement && document.activeElement.tagName !== 'BODY') {
+        const isInteractionsPanelFocused = (document.activeElement as HTMLElement).closest('[data-interactions-panel]');
+        if (!isInteractionsPanelFocused) return;
+      }
+
+      switch (e.key) {
+        case 'F5':
+          e.preventDefault();
+          if (debugState.mode === 'debug' && !result.status.includes('running')) {
+            runInteractions(true);
+          }
+          break;
+        case 'F8':
+          e.preventDefault();
+          if (debugState.isPaused) {
+            handleResume();
+          }
+          break;
+        case 'F9':
+          e.preventDefault();
+          if (debugState.currentStepIndex >= 0) {
+            toggleBreakpoint(debugState.currentStepIndex);
+          }
+          break;
+        case 'F10':
+          e.preventDefault();
+          if (debugState.isPaused) {
+            handleStepOver();
+          }
+          break;
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [debugState, result.status]);
+
+  const hasPlayFunction = variant?.hasPlayFunction && variant?.play;
+
+  const toggleBreakpoint = (index: number) => {
+    setDebugState((prev) => {
+      const next = new Set(prev.breakpoints);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        next.add(index);
+      }
+      return { ...prev, breakpoints: next };
+    });
+  };
+
+  const toggleDebugMode = () => {
+    setDebugState((prev) => ({
+      ...prev,
+      mode: prev.mode === 'normal' ? 'debug' : 'normal',
+    }));
+  };
+
+  const handleResume = () => {
+    if (resumeResolverRef.current) {
+      resumeResolverRef.current();
+      resumeResolverRef.current = null;
+    }
+    setDebugState((prev) => ({ ...prev, isPaused: false }));
+    setResult((prev) => ({ ...prev, status: 'running' }));
+  };
+
+  const handleStepOver = () => {
+    // Mark current step to not pause, then resume
+    if (resumeResolverRef.current) {
+      resumeResolverRef.current();
+      resumeResolverRef.current = null;
+    }
+    setDebugState((prev) => ({ ...prev, isPaused: false }));
+    setResult((prev) => ({ ...prev, status: 'running' }));
+  };
+
+  // Run the play function
+  const runInteractions = useCallback(async (withDebugger = false) => {
+    if (!variant?.play) return;
+
+    // Cancel any existing run
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    abortControllerRef.current = new AbortController();
+
+    const startTime = performance.now();
+    const steps: StepResult[] = [];
+    const isDebugMode = withDebugger || debugState.mode === 'debug';
+    let stepIndex = 0;
+
+    setResult({
+      status: "running",
+      steps: [],
+      startTime,
+    });
+
+    setDebugState((prev) => ({
+      ...prev,
+      isPaused: false,
+      currentStepIndex: -1,
+    }));
+
+    // Find the preview container
+    const canvasElement = document.querySelector(previewSelector) as HTMLElement;
+    if (!canvasElement) {
+      setResult({
+        status: "failed",
+        steps: [],
+        error: `Preview container not found: ${previewSelector}`,
+        duration: performance.now() - startTime,
+      });
+      return;
+    }
+
+    // Create the step function that tracks execution
+    const step = async (name: string, fn: () => Promise<void>): Promise<void> => {
+      const currentIndex = stepIndex++;
+      const stepStartTime = performance.now();
+
+      // Check for breakpoint or debug mode pause
+      if (isDebugMode && (debugState.breakpoints.has(currentIndex) || currentIndex === 0)) {
+        // Pause at breakpoint
+        steps.push({ name, status: "paused" });
+        setResult((prev) => ({
+          ...prev,
+          status: "paused",
+          steps: [...steps],
+        }));
+        setDebugState((prev) => ({
+          ...prev,
+          isPaused: true,
+          currentStepIndex: currentIndex,
+        }));
+
+        // Wait for resume
+        await new Promise<void>((resolve) => {
+          resumeResolverRef.current = resolve;
+        });
+
+        // Update to running
+        steps[currentIndex] = { name, status: "running" };
+        setResult((prev) => ({
+          ...prev,
+          status: "running",
+          steps: [...steps],
+        }));
+      } else {
+        // Add step as running
+        steps.push({ name, status: "running" });
+        setResult((prev) => ({
+          ...prev,
+          steps: [...steps],
+        }));
+      }
+
+      setDebugState((prev) => ({
+        ...prev,
+        currentStepIndex: currentIndex,
+      }));
+
+      try {
+        await fn();
+        steps[currentIndex] = {
+          name,
+          status: "passed",
+          duration: performance.now() - stepStartTime,
+        };
+        setResult((prev) => ({
+          ...prev,
+          steps: [...steps],
+        }));
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        steps[currentIndex] = {
+          name,
+          status: "failed",
+          error: errorMessage,
+          duration: performance.now() - stepStartTime,
+        };
+        setResult((prev) => ({
+          ...prev,
+          steps: [...steps],
+        }));
+        throw error; // Re-throw to stop execution
+      }
+
+      // In debug mode, pause after each step if stepping
+      if (isDebugMode && debugState.breakpoints.has(currentIndex + 1)) {
+        setResult((prev) => ({
+          ...prev,
+          status: "paused",
+        }));
+        setDebugState((prev) => ({
+          ...prev,
+          isPaused: true,
+        }));
+
+        await new Promise<void>((resolve) => {
+          resumeResolverRef.current = resolve;
+        });
+      }
+    };
+
+    // Create the context for the play function
+    const context: PlayFunctionContext = {
+      canvasElement,
+      args: currentArgs,
+      step,
+    };
+
+    try {
+      await variant.play(context);
+
+      // If no explicit steps were defined, the whole play function is one step
+      if (steps.length === 0) {
+        steps.push({
+          name: "Play function",
+          status: "passed",
+          duration: performance.now() - startTime,
+        });
+      }
+
+      setResult({
+        status: "passed",
+        steps: [...steps],
+        duration: performance.now() - startTime,
+      });
+
+      setDebugState((prev) => ({
+        ...prev,
+        isPaused: false,
+        currentStepIndex: -1,
+      }));
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error);
+
+      // If no steps failed explicitly, mark as failed at top level
+      if (steps.length === 0 || !steps.some((s) => s.status === "failed")) {
+        steps.push({
+          name: "Play function",
+          status: "failed",
+          error: errorMessage,
+          duration: performance.now() - startTime,
+        });
+      }
+
+      setResult({
+        status: "failed",
+        steps: [...steps],
+        error: errorMessage,
+        duration: performance.now() - startTime,
+      });
+
+      // Auto-expand failed steps
+      const failedIndices = steps
+        .map((s, i) => (s.status === "failed" ? i : -1))
+        .filter((i) => i >= 0);
+      setExpandedSteps(new Set(failedIndices));
+
+      setDebugState((prev) => ({
+        ...prev,
+        isPaused: false,
+        currentStepIndex: -1,
+      }));
+    }
+  }, [variant, previewSelector, currentArgs, debugState.mode, debugState.breakpoints]);
+
+  const toggleStep = (index: number) => {
+    setExpandedSteps((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        next.add(index);
+      }
+      return next;
+    });
+  };
+
+  const formatDuration = (ms?: number) => {
+    if (ms === undefined) return "";
+    if (ms < 1000) return `${Math.round(ms)}ms`;
+    return `${(ms / 1000).toFixed(2)}s`;
+  };
+
+  // No play function available
+  if (!hasPlayFunction) {
+    return (
+      <div className="h-full flex flex-col">
+        <div className="p-4 border-b border-gray-200 dark:border-gray-700">
+          <h3 className="font-medium text-gray-900 dark:text-gray-100 flex items-center gap-2">
+            <PlayIcon className="w-4 h-4" />
+            Interactions
+          </h3>
+        </div>
+        <div className="flex-1 flex items-center justify-center p-8 text-center">
+          <div className="max-w-md">
+            <div className="w-12 h-12 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mx-auto mb-4">
+              <PlayIcon className="w-6 h-6 text-gray-400" />
+            </div>
+            <h4 className="font-medium text-gray-700 dark:text-gray-300 mb-2">
+              No interactions defined
+            </h4>
+            <p className="text-sm text-gray-500 dark:text-gray-400">
+              This variant doesn't have a play function. Add a <code className="px-1 py-0.5 bg-gray-100 dark:bg-gray-800 rounded text-xs">play</code> function to your Storybook story to enable interaction testing.
+            </p>
+            <div className="mt-4 p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg text-left">
+              <pre className="text-xs text-gray-600 dark:text-gray-400 overflow-x-auto">
+{`export const Default = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Click the button', async () => {
+      await userEvent.click(
+        canvas.getByRole('button')
+      );
+    });
+
+    await expect(
+      canvas.getByText('Clicked!')
+    ).toBeInTheDocument();
+  }
+};`}
+              </pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full flex flex-col" data-interactions-panel>
+      {/* Header */}
+      <div className="p-4 border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
+        <h3 className="font-medium text-gray-900 dark:text-gray-100 flex items-center gap-2">
+          <PlayIcon className="w-4 h-4" />
+          Interactions
+        </h3>
+        <div className="flex items-center gap-2">
+          {result.duration !== undefined && (
+            <span className="text-xs text-gray-500 dark:text-gray-400">
+              {formatDuration(result.duration)}
+            </span>
+          )}
+
+          {/* Debug mode toggle */}
+          <button
+            onClick={toggleDebugMode}
+            className={clsx(
+              "p-1.5 rounded-md transition-colors",
+              debugState.mode === 'debug'
+                ? "bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400"
+                : "text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800"
+            )}
+            title={debugState.mode === 'debug' ? "Exit debug mode" : "Enable debug mode (F5 to run with debugger)"}
+          >
+            <BugIcon className="w-4 h-4" />
+          </button>
+
+          {/* Debug controls when paused */}
+          {debugState.isPaused && (
+            <>
+              <button
+                onClick={handleResume}
+                className="p-1.5 text-green-600 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900/30 rounded-md transition-colors"
+                title="Continue (F8)"
+              >
+                <ContinueIcon className="w-4 h-4" />
+              </button>
+              <button
+                onClick={handleStepOver}
+                className="p-1.5 text-blue-600 dark:text-blue-400 hover:bg-blue-100 dark:hover:bg-blue-900/30 rounded-md transition-colors"
+                title="Step over (F10)"
+              >
+                <StepOverIcon className="w-4 h-4" />
+              </button>
+            </>
+          )}
+
+          <button
+            onClick={() => runInteractions(debugState.mode === 'debug')}
+            disabled={result.status === "running"}
+            className={clsx(
+              "flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors",
+              result.status === "running" || result.status === "paused"
+                ? "bg-gray-100 dark:bg-gray-800 text-gray-400 cursor-not-allowed"
+                : "bg-blue-600 hover:bg-blue-700 text-white"
+            )}
+          >
+            {result.status === "running" ? (
+              <>
+                <LoadingIcon className="w-4 h-4 animate-spin" />
+                Running...
+              </>
+            ) : result.status === "paused" ? (
+              <>
+                <PauseIcon className="w-4 h-4" />
+                Paused
+              </>
+            ) : result.status === "idle" ? (
+              <>
+                <PlayIcon className="w-4 h-4" />
+                {debugState.mode === 'debug' ? 'Debug' : 'Run'}
+              </>
+            ) : (
+              <>
+                <RefreshIcon className="w-4 h-4" />
+                Rerun
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Results */}
+      <div className="flex-1 overflow-y-auto">
+        {result.status === "idle" ? (
+          <div className="p-8 text-center">
+            <p className="text-sm text-gray-500 dark:text-gray-400">
+              Click "Run" to execute the interaction tests
+            </p>
+          </div>
+        ) : (
+          <div className="p-4 space-y-2">
+            {/* Overall status */}
+            <div
+              className={clsx(
+                "p-3 rounded-lg flex items-center justify-between",
+                result.status === "running" && "bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800",
+                result.status === "paused" && "bg-orange-50 dark:bg-orange-950/30 border border-orange-200 dark:border-orange-800",
+                result.status === "passed" && "bg-green-50 dark:bg-green-950/30 border border-green-200 dark:border-green-800",
+                result.status === "failed" && "bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800"
+              )}
+            >
+              <div className="flex items-center gap-2">
+                {result.status === "running" && (
+                  <LoadingIcon className="w-5 h-5 text-blue-600 dark:text-blue-400 animate-spin" />
+                )}
+                {result.status === "paused" && (
+                  <PauseIcon className="w-5 h-5 text-orange-600 dark:text-orange-400" />
+                )}
+                {result.status === "passed" && (
+                  <CheckIcon className="w-5 h-5 text-green-600 dark:text-green-400" />
+                )}
+                {result.status === "failed" && (
+                  <XIcon className="w-5 h-5 text-red-600 dark:text-red-400" />
+                )}
+                <span
+                  className={clsx(
+                    "font-medium",
+                    result.status === "running" && "text-blue-700 dark:text-blue-300",
+                    result.status === "paused" && "text-orange-700 dark:text-orange-300",
+                    result.status === "passed" && "text-green-700 dark:text-green-300",
+                    result.status === "failed" && "text-red-700 dark:text-red-300"
+                  )}
+                >
+                  {result.status === "running" && "Running interactions..."}
+                  {result.status === "paused" && "Paused at breakpoint"}
+                  {result.status === "passed" && "All interactions passed"}
+                  {result.status === "failed" && "Interactions failed"}
+                </span>
+              </div>
+              <span className="text-xs text-gray-500 dark:text-gray-400">
+                {result.steps.filter((s) => s.status === "passed").length}/{result.steps.length} steps
+              </span>
+            </div>
+
+            {/* Steps */}
+            {result.steps.length > 0 && (
+              <div className="mt-4 space-y-1">
+                <div className="flex items-center justify-between mb-2">
+                  <h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">
+                    Steps
+                  </h4>
+                  {debugState.mode === 'debug' && (
+                    <span className="text-xs text-orange-600 dark:text-orange-400">
+                      Debug mode - click gutter to set breakpoints
+                    </span>
+                  )}
+                </div>
+                {result.steps.map((step, index) => (
+                  <div
+                    key={index}
+                    className={clsx(
+                      "rounded-lg border transition-colors flex",
+                      step.status === "pending" && "bg-gray-50 dark:bg-gray-800/50 border-gray-200 dark:border-gray-700",
+                      step.status === "running" && "bg-blue-50 dark:bg-blue-950/30 border-blue-200 dark:border-blue-800",
+                      step.status === "paused" && "bg-orange-50 dark:bg-orange-950/30 border-orange-200 dark:border-orange-800",
+                      step.status === "passed" && "bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700",
+                      step.status === "failed" && "bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-800",
+                      debugState.currentStepIndex === index && "ring-2 ring-orange-400 dark:ring-orange-500"
+                    )}
+                  >
+                    {/* Breakpoint gutter - only show in debug mode */}
+                    {debugState.mode === 'debug' && (
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          toggleBreakpoint(index);
+                        }}
+                        className="w-6 flex-shrink-0 flex items-center justify-center border-r border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-700/50 transition-colors"
+                        title={debugState.breakpoints.has(index) ? "Remove breakpoint (F9)" : "Add breakpoint (F9)"}
+                      >
+                        {debugState.breakpoints.has(index) ? (
+                          <BreakpointIcon className="w-3 h-3 text-red-500" />
+                        ) : (
+                          <BreakpointEmptyIcon className="w-3 h-3 text-gray-300 dark:text-gray-600 hover:text-red-400" />
+                        )}
+                      </button>
+                    )}
+
+                    <div className="flex-1">
+                      <button
+                        onClick={() => step.error && toggleStep(index)}
+                        className={clsx(
+                          "w-full p-3 flex items-center gap-2 text-left",
+                          step.error && "cursor-pointer"
+                        )}
+                        disabled={!step.error}
+                      >
+                        {/* Current step indicator */}
+                        {debugState.mode === 'debug' && debugState.currentStepIndex === index && (
+                          <span className="text-orange-500 font-bold">▶</span>
+                        )}
+
+                        {/* Status icon */}
+                        {step.status === "pending" && (
+                          <div className="w-4 h-4 rounded-full border-2 border-gray-300 dark:border-gray-600" />
+                        )}
+                        {step.status === "running" && (
+                          <LoadingIcon className="w-4 h-4 text-blue-600 dark:text-blue-400 animate-spin" />
+                        )}
+                        {step.status === "paused" && (
+                          <PauseIcon className="w-4 h-4 text-orange-600 dark:text-orange-400" />
+                        )}
+                        {step.status === "passed" && (
+                          <CheckIcon className="w-4 h-4 text-green-600 dark:text-green-400" />
+                        )}
+                        {step.status === "failed" && (
+                          <XIcon className="w-4 h-4 text-red-600 dark:text-red-400" />
+                        )}
+
+                        {/* Step name */}
+                        <span
+                          className={clsx(
+                            "flex-1 text-sm",
+                            step.status === "pending" && "text-gray-400 dark:text-gray-500",
+                            step.status === "running" && "text-blue-700 dark:text-blue-300",
+                            step.status === "paused" && "text-orange-700 dark:text-orange-300",
+                            step.status === "passed" && "text-gray-700 dark:text-gray-300",
+                            step.status === "failed" && "text-red-700 dark:text-red-300"
+                          )}
+                        >
+                          {step.name}
+                        </span>
+
+                        {/* Duration */}
+                        {step.duration !== undefined && (
+                          <span className="text-xs text-gray-400 dark:text-gray-500">
+                            {formatDuration(step.duration)}
+                          </span>
+                        )}
+
+                        {/* Expand icon for errors */}
+                        {step.error && (
+                          expandedSteps.has(index) ? (
+                            <ChevronDownIcon className="w-4 h-4 text-gray-400" />
+                          ) : (
+                            <ChevronRightIcon className="w-4 h-4 text-gray-400" />
+                          )
+                        )}
+                      </button>
+
+                      {/* Error details */}
+                      {step.error && expandedSteps.has(index) && (
+                        <div className="px-3 pb-3 pl-9">
+                          <pre className="text-xs text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-950/50 p-2 rounded overflow-x-auto whitespace-pre-wrap">
+                            {step.error}
+                          </pre>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* Keyboard shortcuts help in debug mode */}
+            {debugState.mode === 'debug' && (
+              <div className="mt-4 p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg text-xs text-gray-500 dark:text-gray-400">
+                <div className="font-medium mb-1">Keyboard shortcuts:</div>
+                <div className="grid grid-cols-2 gap-1">
+                  <span><kbd className="px-1 bg-gray-200 dark:bg-gray-700 rounded">F5</kbd> Run with debugger</span>
+                  <span><kbd className="px-1 bg-gray-200 dark:bg-gray-700 rounded">F8</kbd> Continue</span>
+                  <span><kbd className="px-1 bg-gray-200 dark:bg-gray-700 rounded">F9</kbd> Toggle breakpoint</span>
+                  <span><kbd className="px-1 bg-gray-200 dark:bg-gray-700 rounded">F10</kbd> Step over</span>
+                </div>
+              </div>
+            )}
+
+            {/* Top-level error (if no steps failed) */}
+            {result.error && !result.steps.some((s) => s.status === "failed") && (
+              <div className="mt-4">
+                <h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">
+                  Error
+                </h4>
+                <pre className="text-xs text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-950/50 p-3 rounded overflow-x-auto whitespace-pre-wrap">
+                  {result.error}
+                </pre>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}