nitrostack 1.0.71 → 1.0.73

package/src/studio/components/Sidebar.tsx

@@ -1,42 +1,49 @@
 'use client';
 
 import { useStudioStore } from '@/lib/store';
+import { api } from '@/lib/api';
 import type { TabType } from '@/lib/types';
 import { useRouter, usePathname } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import Image from 'next/image';
-import { 
-  Wrench, 
-  MessageSquare, 
-  Package, 
-  FileText, 
-  Activity, 
-  Shield, 
-  Wifi,
-  Zap,
-  Settings,
-  Sparkles,
-  Terminal
-} from 'lucide-react';
+import {
+  WrenchScrewdriverIcon,
+  ChatBubbleLeftIcon,
+  CubeIcon,
+  DocumentTextIcon,
+  HeartIcon,
+  ShieldCheckIcon,
+  WifiIcon,
+  Cog6ToothIcon,
+  CommandLineIcon
+} from '@heroicons/react/24/outline';
 
-const navItems: Array<{ id: TabType | 'settings' | 'logs'; label: string; icon: any; path: string }> = [
-  { id: 'tools', label: 'Tools', icon: Wrench, path: '/' },
-  { id: 'chat', label: 'AI Chat', icon: MessageSquare, path: '/chat' },
-  { id: 'resources', label: 'Resources', icon: Package, path: '/resources' },
-  { id: 'prompts', label: 'Prompts', icon: FileText, path: '/prompts' },
-  { id: 'health', label: 'Health', icon: Activity, path: '/health' },
-  { id: 'logs', label: 'Logs', icon: Terminal, path: '/logs' },
-  { id: 'auth', label: 'OAuth 2.1', icon: Shield, path: '/auth' },
-  { id: 'ping', label: 'Ping', icon: Wifi, path: '/ping' },
-  { id: 'settings', label: 'Settings', icon: Settings, path: '/settings' },
+const navItems = [
+  {
+    id: 'app',
+    label: 'App',
+    icon: CubeIcon,
+    path: '/',
+    children: [
+      { id: 'tools', label: 'Tools', icon: WrenchScrewdriverIcon, path: '/tools' },
+      { id: 'resources', label: 'Resources', icon: CubeIcon, path: '/resources' },
+      { id: 'prompts', label: 'Prompts', icon: DocumentTextIcon, path: '/prompts' },
+    ]
+  },
+  { id: 'chat', label: 'AI Chat', icon: ChatBubbleLeftIcon, path: '/chat' },
+  { id: 'health', label: 'Health', icon: HeartIcon, path: '/health' },
+  { id: 'logs', label: 'Logs', icon: CommandLineIcon, path: '/logs' },
+  { id: 'settings', label: 'Settings', icon: Cog6ToothIcon, path: '/settings' },
 ];
 
 export function Sidebar() {
-  const { connection } = useStudioStore();
+  const { connection, setConnection } = useStudioStore();
   const router = useRouter();
   const pathname = usePathname();
   const [mounted, setMounted] = useState(false);
   const [isCollapsed, setIsCollapsed] = useState(false);
+  // Default expanded parents
+  const [expandedItems, setExpandedItems] = useState<string[]>(['app']);
 
   useEffect(() => {
     setMounted(true);
@@ -45,12 +52,34 @@ export function Sidebar() {
     // Load collapse state from localStorage
     const saved = localStorage.getItem('sidebar_collapsed');
     if (saved !== null) setIsCollapsed(saved === 'true');
+
+    // Initialize Connection (Global)
+    const initConnection = async () => {
+      try {
+        await api.initialize();
+        const health = await api.checkConnection();
+        setConnection({
+          connected: health.connected,
+          status: health.connected ? 'connected' : 'disconnected',
+        });
+      } catch (e) {
+        setConnection({ connected: false, status: 'disconnected' });
+      }
+    };
+    initConnection();
   }, []);
 
   const handleNavigation = (path: string) => {
     router.push(path);
   };
 
+  const toggleExpand = (id: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setExpandedItems(prev =>
+      prev.includes(id) ? prev.filter(item => item !== id) : [...prev, id]
+    );
+  };
+
   const getConnectionStatus = () => {
     if (connection.status === 'connected') return 'connected';
     if (connection.status === 'connecting') return 'connecting';
@@ -61,235 +90,161 @@ export function Sidebar() {
     const newState = !isCollapsed;
     setIsCollapsed(newState);
     localStorage.setItem('sidebar_collapsed', String(newState));
-    // Dispatch custom event to update layout
     window.dispatchEvent(new Event('sidebar-toggle'));
   };
 
+  interface NavChild {
+    id: string;
+    label: string;
+    icon: React.ComponentType<{ className?: string }>;
+    path: string;
+  }
+
+  interface NavItem {
+    id: string;
+    label: string;
+    icon: React.ComponentType<{ className?: string }>;
+    path: string;
+    children?: NavChild[];
+  }
+
+  const renderNavItem = (item: NavItem, depth = 0) => {
+    const Icon = item.icon;
+    const isActive = pathname === item.path || (item.children && item.children.some((child) => pathname === child.path));
+    const isExpanded = expandedItems.includes(item.id);
+    const hasChildren = item.children && item.children.length > 0;
+
+    return (
+      <div key={item.id} className="w-full">
+        <button
+          onClick={(e) => {
+            if (hasChildren && !isCollapsed) {
+              toggleExpand(item.id, e);
+              // Also navigate if it has a path
+              if (item.path && item.path !== '#') handleNavigation(item.path);
+            } else {
+              handleNavigation(item.path);
+            }
+          }}
+          title={isCollapsed ? item.label : undefined}
+          className={`
+            relative flex items-center gap-2 text-sm font-medium rounded-lg transition-all duration-300 group overflow-hidden
+            ${isCollapsed ? 'w-10 h-10 justify-center mx-auto mb-1' : 'w-full px-3 py-2'}
+            ${isActive && !hasChildren
+              ? 'bg-gradient-to-r from-primary/15 to-secondary/10 text-primary shadow-md ring-1 ring-primary/30'
+              : 'text-foreground/70 hover:bg-primary/5 hover:text-primary'
+            }
+            ${depth > 0 && !isCollapsed ? 'ml-4 w-[calc(100%-1rem)] border-l border-border/50 pl-2' : ''}
+          `}
+        >
+          {/* Active indicator (Left strip) - Only for leaf nodes or exact match */}
+          {isActive && !isCollapsed && !hasChildren && (
+            <div className="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-6 bg-gradient-to-b from-primary to-secondary rounded-r-full" />
+          )}
+
+          {/* Icon */}
+          <div className={`relative flex-shrink-0 ${isActive ? 'scale-105' : 'group-hover:scale-105'} transition-transform duration-300`}>
+            <Icon
+              className={`h-5 w-5 ${isActive
+                ? 'text-primary'
+                : 'text-muted-foreground group-hover:text-primary'
+                }`}
+            />
+          </div>
+
+          {/* Label & Chevron - only show when expanded */}
+          {!isCollapsed && (
+            <div className="flex-1 flex items-center justify-between overflow-hidden">
+              <span className="text-xs whitespace-nowrap overflow-hidden">
+                {item.label}
+              </span>
+              {hasChildren && (
+                <div className={`transition-transform duration-200 ${isExpanded ? 'rotate-90' : ''}`}>
+                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-muted-foreground/50">
+                    <path d="M9 18l6-6-6-6" />
+                  </svg>
+                </div>
+              )}
+            </div>
+          )}
+        </button>
+
+        {/* Render Children */}
+        {!isCollapsed && hasChildren && isExpanded && (
+          <div className="mt-0.5 space-y-0.5">
+            {item.children!.map((child) => renderNavItem(child as NavItem, depth + 1))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
   if (!mounted) return null;
 
   return (
-    <nav className={`fixed left-0 top-0 h-screen glass flex flex-col z-50 border-r border-border/50 transition-all duration-300 ease-in-out ${
-      isCollapsed ? 'w-16' : 'w-60 md:w-60'
-    } ${isCollapsed ? '' : 'max-md:w-16'}`}>
-      {/* Compact Professional Header */}
+    <nav className={`fixed left-0 top-0 h-screen glass flex flex-col z-50 border-r border-border/50 transition-all duration-300 ease-in-out ${isCollapsed ? 'w-16' : 'w-60 md:w-60'} ${isCollapsed ? '' : 'max-md:w-16'}`}>
+      {/* Header */}
       <div className="relative p-3 border-b border-border/50 bg-gradient-to-b from-card/80 to-transparent">
         <div className="flex items-center justify-between mb-2">
-          {/* Minimalist Professional Logo */}
-          <div 
-            className="flex items-center gap-2 group cursor-pointer flex-1"
-            onClick={() => handleNavigation('/')}
-          >
+          {/* Logo */}
+          <div className="flex items-center gap-2 group cursor-pointer flex-1" onClick={() => handleNavigation('/')}>
             <div className="relative flex-shrink-0">
-              <div className="absolute inset-0 rounded-lg bg-gradient-to-br from-primary to-amber-500 blur opacity-30 group-hover:opacity-50 transition-opacity duration-300" />
-              <div className="relative w-9 h-9 rounded-lg bg-gradient-to-br from-slate-900 to-slate-800 border border-primary/30 flex items-center justify-center shadow-lg group-hover:shadow-primary/30 transition-all duration-300 overflow-hidden">
-                {/* NitroCloud Logo */}
-                <Image
-                  src="/nitrocloud.png"
-                  alt="NitroCloud Logo"
-                  width={36}
-                  height={36}
-                  className="relative z-10 object-contain"
-                  unoptimized
-                />
-                {/* Subtle glow effect */}
-                <div className="absolute inset-0 bg-gradient-to-tr from-primary/20 to-amber-500/20 group-hover:opacity-100 opacity-0 transition-opacity duration-300" />
+              <div className="relative w-10 h-10 rounded bg-white/5 border border-primary/20 flex items-center justify-center shadow-lg group-hover:border-primary/40 transition-all duration-300 overflow-hidden backdrop-blur-sm">
+                <Image src="/NitroStudio Isotype Color.png" alt="NitroStudio Logo" width={28} height={28} className="relative z-10 object-contain" unoptimized />
               </div>
-          </div>
-            
+            </div>
             {!isCollapsed && (
-              <div className="flex-1 overflow-hidden">
-                <h1 className="text-base font-bold bg-gradient-to-r from-primary to-amber-500 bg-clip-text text-transparent tracking-tight whitespace-nowrap">
-                  NitroStudio
-            </h1>
-                <p className="text-[9px] text-muted-foreground font-medium uppercase tracking-wider">
-                  MCP Suite
-                </p>
+              <div className="flex-1 overflow-hidden ml-2.5">
+                <h1 className="text-sm font-bold bg-gradient-to-r from-primary via-primary to-secondary bg-clip-text text-transparent tracking-wide whitespace-nowrap leading-tight" style={{ fontFamily: 'Space Grotesk, sans-serif' }}>NitroStudio</h1>
+                <p className="text-[8px] text-muted-foreground/70 font-semibold uppercase tracking-wider leading-none mt-0.5" style={{ fontFamily: 'IBM Plex Sans, sans-serif' }}>MCP Suite</p>
               </div>
             )}
           </div>
-          
-          {/* Toggle Button */}
-          <button
-            onClick={toggleSidebar}
-            className="flex-shrink-0 w-7 h-7 rounded-md bg-muted/50 hover:bg-muted border border-border/50 hover:border-primary/30 flex items-center justify-center transition-all duration-300 group/toggle"
-            title={isCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-          >
-            <svg 
-              width="14" 
-              height="14" 
-              viewBox="0 0 24 24" 
-              fill="none" 
-              className={`text-muted-foreground group-hover/toggle:text-primary transition-all duration-300 ${
-                isCollapsed ? 'rotate-180' : ''
-              }`}
-            >
-              <path d="M15 18L9 12L15 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-            </svg>
+          {/* Toggle */}
+          <button onClick={toggleSidebar} className="flex-shrink-0 w-7 h-7 rounded-md bg-muted/50 hover:bg-muted border border-border/50 flex items-center justify-center transition-all duration-300">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" className={`text-muted-foreground transition-all duration-300 ${isCollapsed ? 'rotate-180' : ''}`}><path d="M15 18L9 12L15 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
           </button>
         </div>
 
-        {/* Compact Status Indicators */}
+        {/* Status */}
         {!isCollapsed ? (
           <div className="space-y-1.5">
-        {/* Connection Status */}
             <div className="relative group">
               <div className="relative flex items-center gap-2 px-2 py-1.5 rounded-md bg-card/60 border border-border/50 backdrop-blur-sm group-hover:border-primary/30 transition-all duration-300">
-                <div className="relative flex items-center justify-center flex-shrink-0">
-                  {getConnectionStatus() === 'connected' && (
-                    <div className="absolute inset-0 rounded-full bg-emerald-500/30 animate-ping" />
-                  )}
-            <div 
-                    className={`relative w-2 h-2 rounded-full transition-all duration-300 ${
-                getConnectionStatus() === 'connected' 
-                  ? 'bg-emerald-500' 
-                  : getConnectionStatus() === 'connecting'
-                        ? 'bg-amber-500 animate-pulse'
-                  : 'bg-rose-500'
-              }`}
-              style={{
-                boxShadow: getConnectionStatus() === 'connected'
-                        ? '0 0 8px rgba(34, 197, 94, 0.6)'
-                  : getConnectionStatus() === 'connecting'
-                        ? '0 0 8px rgba(245, 158, 11, 0.6)'
-                        : '0 0 8px rgba(239, 68, 68, 0.6)'
-              }}
-            />
-          </div>
-                <span className="text-[10px] font-semibold uppercase tracking-wide text-foreground">
-            {connection.status}
-          </span>
-        </div>
-      </div>
-
-            {/* Transport Mode */}
+                <div className={`relative w-2 h-2 rounded-full transition-all duration-300 ${getConnectionStatus() === 'connected' ? 'bg-emerald-500' : getConnectionStatus() === 'connecting' ? 'bg-status-warning animate-pulse' : 'bg-rose-500'}`} />
+                <span className="text-[10px] font-semibold uppercase tracking-wide text-foreground">{connection.status}</span>
+              </div>
+            </div>
             <div className="relative group">
               <div className="relative px-2 py-1.5 rounded-md bg-primary/5 border border-primary/20 backdrop-blur-sm group-hover:border-primary/30 transition-all duration-300">
                 <div className="flex items-center justify-between text-[10px]">
                   <span className="font-medium text-muted-foreground">Transport:</span>
-                  <span className="font-bold text-primary uppercase">
-                    STDIO
-                  </span>
+                  <span className="font-bold text-primary uppercase">STDIO</span>
                 </div>
               </div>
             </div>
           </div>
         ) : (
           <div className="flex flex-col items-center gap-1.5">
-            {/* Collapsed: Just the status dot */}
-            <div 
-              className="relative w-7 h-7 rounded-md bg-card/60 border border-border/50 flex items-center justify-center group hover:border-primary/30 transition-all"
-              title={`Status: ${connection.status}`}
-            >
-              {getConnectionStatus() === 'connected' && (
-                <div className="absolute inset-0 rounded-md bg-emerald-500/20 animate-ping" />
-              )}
-              <div 
-                className={`relative w-2 h-2 rounded-full ${
-                  getConnectionStatus() === 'connected' 
-                    ? 'bg-emerald-500' 
-                    : getConnectionStatus() === 'connecting'
-                    ? 'bg-amber-500 animate-pulse'
-                    : 'bg-rose-500'
-                }`}
-                style={{
-                  boxShadow: getConnectionStatus() === 'connected'
-                    ? '0 0 8px rgba(34, 197, 94, 0.8)'
-                    : getConnectionStatus() === 'connecting'
-                    ? '0 0 8px rgba(245, 158, 11, 0.8)'
-                    : '0 0 8px rgba(239, 68, 68, 0.8)'
-                }}
-              />
-            </div>
+            <div className={`relative w-2 h-2 rounded-full ${getConnectionStatus() === 'connected' ? 'bg-emerald-500' : 'bg-rose-500'}`} />
           </div>
         )}
       </div>
 
-      {/* Compact Navigation */}
+      {/* Navigation */}
       <div className="flex-1 overflow-y-auto py-2 px-2 scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent">
         <div className={`space-y-0.5 ${isCollapsed ? 'flex flex-col items-center' : ''}`}>
-          {navItems.map((item) => {
-            const Icon = item.icon;
-            const isActive = pathname === item.path;
-            
-            return (
-              <button
-                key={item.id}
-                onClick={() => handleNavigation(item.path)}
-                title={isCollapsed ? item.label : undefined}
-                className={`
-                  relative flex items-center gap-2 text-sm font-medium rounded-lg transition-all duration-300 group overflow-hidden
-                  ${isCollapsed ? 'w-10 h-10 justify-center' : 'w-full px-3 py-2'}
-                  ${isActive 
-                    ? 'bg-gradient-to-r from-primary/15 to-amber-500/10 text-primary shadow-md ring-1 ring-primary/30' 
-                    : 'text-foreground/70 hover:bg-primary/5 hover:text-primary'
-                  }
-                `}
-              >
-                {/* Active indicator */}
-                {isActive && !isCollapsed && (
-                  <div className="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-6 bg-gradient-to-b from-primary to-amber-500 rounded-r-full" />
-                )}
-                
-                {/* Icon */}
-                <div className={`relative flex-shrink-0 ${isActive ? 'scale-105' : 'group-hover:scale-105'} transition-transform duration-300`}>
-                  <Icon 
-                    className={`w-4 h-4 ${
-                      isActive 
-                        ? 'text-primary' 
-                        : 'text-muted-foreground group-hover:text-primary'
-                    }`}
-                    strokeWidth={isActive ? 2.5 : 2}
-                  />
-                </div>
-                
-                {/* Label - only show when expanded */}
-                {!isCollapsed && (
-                  <span className="text-xs whitespace-nowrap overflow-hidden">
-                    {item.label}
-                  </span>
-                )}
-                
-                {/* Subtle shine effect */}
-                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-out pointer-events-none" />
-              </button>
-            );
-          })}
+          {navItems.map((item) => renderNavItem(item))}
         </div>
       </div>
 
-      {/* Compact Footer */}
+      {/* Footer */}
       <div className="p-2 border-t border-border/50 bg-gradient-to-t from-card/60 to-transparent backdrop-blur-sm">
         {!isCollapsed ? (
-          <div className="space-y-1.5">
-            {/* Version info */}
-            <div className="px-2 py-1.5 rounded-md bg-muted/30 border border-border/30">
-              <div className="flex items-center justify-between text-[9px]">
-                <span className="font-medium text-muted-foreground uppercase tracking-wide">MCP v1.0</span>
-                <span className="font-bold text-foreground">NitroStack</span>
-              </div>
-            </div>
-            
-            {/* Copyright */}
-            <div className="text-center">
-              <p className="text-[8px] text-muted-foreground/50 font-medium">
-                © 2025 NitroCloud
-              </p>
-            </div>
-          </div>
-        ) : (
-          <div className="flex flex-col items-center">
-            {/* Collapsed: Minimal version indicator */}
-            <div 
-              className="w-10 h-10 rounded-md bg-muted/30 border border-border/30 flex items-center justify-center group hover:border-primary/30 transition-all"
-              title="MCP v1.0 • NitroStack"
-            >
-              <span className="text-[9px] font-bold text-primary group-hover:scale-110 transition-transform">
-                v1
-              </span>
-          </div>
-        </div>
-        )}
+          <div className="text-center"><p className="text-[8px] text-muted-foreground/50 font-medium">© 2025 NitroCloud</p></div>
+        ) : null}
       </div>
+
     </nav>
   );
 }

package/src/studio/components/SplashScreen.tsx

@@ -0,0 +1,109 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Image from 'next/image';
+
+const LOADING_TEXTS = [
+    "Initializing NitroStudio...",
+    "Waking up the agents...",
+    "Aligning gradients...",
+    "Charging flux capacitors...",
+    "Assembling pixels...",
+    "Connecting to the matrix...",
+    "Spinning up the studio...",
+    "Almost there..."
+];
+
+export function SplashScreen() {
+    const [show, setShow] = useState(true);
+    const [textIndex, setTextIndex] = useState(0);
+    const [fadeOut, setFadeOut] = useState(false);
+
+    useEffect(() => {
+        // Initial load delay logic
+        const timer = setTimeout(() => {
+            setFadeOut(true);
+            setTimeout(() => setShow(false), 500); // 500ms fade out duration
+        }, 3000); // Slightly longer for the "system check" vibe
+
+        return () => clearTimeout(timer);
+    }, []);
+
+    useEffect(() => {
+        if (!show) return;
+
+        // Cycle text every 800ms
+        const interval = setInterval(() => {
+            setTextIndex((prev) => (prev + 1) % LOADING_TEXTS.length);
+        }, 800);
+
+        return () => clearInterval(interval);
+    }, [show]);
+
+    if (!show) return null;
+
+    return (
+        <div
+            className={`fixed inset-0 z-[100] flex flex-col items-center justify-center bg-background transition-opacity duration-500 font-mono ${fadeOut ? 'opacity-0' : 'opacity-100'
+                }`}
+        >
+            {/* Tech Background Grid - Subtle & Professional */}
+            <div
+                className="absolute inset-0 opacity-[0.03]"
+                style={{
+                    backgroundImage: `linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px)`,
+                    backgroundSize: '40px 40px',
+                    mask: 'radial-gradient(circle at center, black 40%, transparent 100%)',
+                    WebkitMask: 'radial-gradient(circle at center, black 40%, transparent 100%)'
+                }}
+            />
+
+            {/* Center Content */}
+            <div className="relative flex items-center justify-center mb-8">
+                {/* Glowing Gradient Ring Container */}
+                {/* Outer pulsing glow */}
+                <div className="absolute inset-[-12px] rounded-full animate-pulse bg-primary/10 blur-xl"></div>
+
+                {/* Spinning Gradient Ring */}
+                <div className="absolute inset-[-4px] rounded-full animate-spin-slow"
+                    style={{
+                        background: 'conic-gradient(from 0deg, transparent 0deg, var(--primary) 360deg)',
+                        mask: 'radial-gradient(farthest-side, transparent calc(100% - 2px), black calc(100% - 2px))',
+                        WebkitMask: 'radial-gradient(farthest-side, transparent calc(100% - 2px), black calc(100% - 2px))'
+                    }}
+                ></div>
+
+                {/* Secondary thinner ring for detail */}
+                <div className="absolute inset-[-8px] rounded-full animate-spin-slow"
+                    style={{
+                        animationDirection: 'reverse',
+                        opacity: 0.3,
+                        background: 'conic-gradient(from 0deg, transparent 0deg, var(--primary) 360deg)',
+                        mask: 'radial-gradient(farthest-side, transparent calc(100% - 1px), black calc(100% - 1px))',
+                        WebkitMask: 'radial-gradient(farthest-side, transparent calc(100% - 1px), black calc(100% - 1px))'
+                    }}
+                ></div>
+
+                {/* Logo Container */}
+                <div className="relative z-10 bg-background rounded-full p-8 shadow-2xl border border-primary/10">
+                    <div className="relative w-20 h-20">
+                        <Image
+                            src="/NitroStudio Isotype Color.png"
+                            alt="NitroStudio Logo"
+                            fill
+                            className="object-contain"
+                            priority
+                        />
+                    </div>
+                </div>
+            </div>
+
+            {/* Loading Text with Glitch-like Vibe */}
+            <div className="h-6 overflow-hidden flex flex-col items-center justify-center">
+                <p className="text-xs font-mono text-primary/80 animate-pulse tracking-[0.2em] uppercase">
+                    {LOADING_TEXTS[textIndex]}
+                </p>
+            </div>
+        </div>
+    );
+}