alexui 1.0.0

package/components/InteractiveNavbar.tsx

@@ -0,0 +1,266 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Bell, LogOut, Settings, User, Menu, X } from 'lucide-react';
+import { ThemeSwitcher } from './ThemeSwitcher';
+
+export interface NavItem {
+  label: string;
+  href: string;
+}
+
+export interface UserProfile {
+  name: string;
+  email: string;
+  avatarUrl: string;
+}
+
+export interface InteractiveNavbarProps {
+  brandName?: string;
+  navItems?: NavItem[];
+  showThemeToggle?: boolean;
+  showNotifications?: boolean;
+  showUserMenu?: boolean;
+  notificationsCount?: number;
+  userProfile?: UserProfile;
+  onLogout?: () => void;
+  className?: string;
+}
+
+export const InteractiveNavbar: React.FC<InteractiveNavbarProps> = ({
+  brandName = 'AlexUI',
+  navItems = [
+    { label: 'Inicio', href: '#' },
+    { label: 'Componentes', href: '#' },
+    { label: 'Documentación', href: '#' }
+  ],
+  showThemeToggle = true,
+  showNotifications = true,
+  showUserMenu = true,
+  notificationsCount = 3,
+  userProfile = {
+    name: 'Alexis Jardin',
+    email: 'alex@jardin.com',
+    avatarUrl: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&auto=format&fit=crop'
+  },
+  onLogout,
+  className = ''
+}) => {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isNotifDropdownOpen, setIsNotifDropdownOpen] = useState(false);
+  const [isUserDropdownOpen, setIsUserDropdownOpen] = useState(false);
+
+  const notifRef = useRef<HTMLDivElement>(null);
+  const userRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdowns on click outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (notifRef.current && !notifRef.current.contains(event.target as Node)) {
+        setIsNotifDropdownOpen(false);
+      }
+      if (userRef.current && !userRef.current.contains(event.target as Node)) {
+        setIsUserDropdownOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  // Fictional notifications list
+  const mockNotifications = [
+    { id: 1, text: 'Sofía Romero te ha enviado un mensaje.', time: 'Hace 5 min' },
+    { id: 2, text: 'Nueva versión V1.5 de AlexUI liberada.', time: 'Hace 2 horas' },
+    { id: 3, text: 'Se completó la simulación de carga con éxito.', time: 'Hace 1 día' }
+  ];
+
+  return (
+    <nav className={`w-full sticky top-0 z-40 glass bg-bg-card/75 border-b border-border-app px-6 py-3.5 flex items-center justify-between transition-all duration-300 ${className}`}>
+      
+      {/* Brand Logo & Mobile Trigger */}
+      <div className="flex items-center gap-3">
+        <button 
+          onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+          className="md:hidden p-1.5 rounded-lg text-text-muted hover:bg-bg-app hover:text-text-main transition-colors cursor-pointer"
+        >
+          {isMobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+        </button>
+        <span className="font-extrabold text-lg tracking-tight bg-gradient-to-r from-accent to-pink-500 bg-clip-text text-transparent font-display">
+          {brandName}
+        </span>
+      </div>
+
+      {/* Desktop Navigation Link items */}
+      <div className="hidden md:flex items-center gap-6">
+        {navItems.map((item, idx) => (
+          <a
+            key={idx}
+            href={item.href}
+            className="text-xs font-bold text-text-muted hover:text-accent transition-colors duration-300"
+          >
+            {item.label}
+          </a>
+        ))}
+      </div>
+
+      {/* Right Side Control actions */}
+      <div className="flex items-center gap-4">
+        
+        {/* Dynamic Theme switcher */}
+        {showThemeToggle && (
+          <div className="flex items-center justify-center">
+            <ThemeSwitcher />
+          </div>
+        )}
+
+        {/* Notifications Icon with count indicator badge & dropdown */}
+        {showNotifications && (
+          <div ref={notifRef} className="relative">
+            <button
+              onClick={() => setIsNotifDropdownOpen(!isNotifDropdownOpen)}
+              className={`relative p-2 rounded-xl border transition-all duration-300 cursor-pointer ${
+                isNotifDropdownOpen 
+                  ? 'bg-accent/10 border-accent/30 text-accent shadow-xs' 
+                  : 'bg-bg-card border-border-app text-text-muted hover:text-text-main'
+              }`}
+              aria-label="Notificaciones"
+            >
+              <Bell className="w-4 h-4" />
+              {notificationsCount > 0 && (
+                <span className="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full text-[9px] font-extrabold text-white flex items-center justify-center animate-pulse">
+                  {notificationsCount}
+                </span>
+              )}
+            </button>
+
+            <AnimatePresence>
+              {isNotifDropdownOpen && (
+                <motion.div
+                  initial={{ opacity: 0, y: 10, scale: 0.95 }}
+                  animate={{ 
+                    opacity: 1, 
+                    y: 6, 
+                    scale: 1,
+                    transition: { type: 'spring', stiffness: 350, damping: 25 }
+                  }}
+                  exit={{ opacity: 0, y: 10, scale: 0.95, transition: { duration: 0.15 } }}
+                  className="absolute right-0 w-80 glass rounded-2xl shadow-2xl py-3 border border-border-app z-50 flex flex-col gap-2.5"
+                >
+                  <h4 className="text-[10px] font-bold uppercase tracking-wider text-text-muted px-4 font-display">
+                    Notificaciones Recientes
+                  </h4>
+                  <div className="flex flex-col max-h-64 overflow-y-auto">
+                    {mockNotifications.map((n) => (
+                      <div 
+                        key={n.id} 
+                        className="px-4 py-2.5 text-xs text-text-muted hover:bg-bg-app hover:text-text-main border-b border-border-app/30 last:border-0 transition-colors duration-200 cursor-pointer flex flex-col gap-1"
+                      >
+                        <p className="leading-snug">{n.text}</p>
+                        <span className="text-[9px] font-mono text-text-muted/60">{n.time}</span>
+                      </div>
+                    ))}
+                  </div>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        )}
+
+        {/* User Account Avatar & Profile Actions dropdown menu */}
+        {showUserMenu && (
+          <div ref={userRef} className="relative">
+            <button
+              onClick={() => setIsUserDropdownOpen(!isUserDropdownOpen)}
+              className={`flex items-center justify-center w-9 h-9 rounded-xl overflow-hidden border-2 cursor-pointer shadow-sm hover:scale-105 transition-all duration-300 ${
+                isUserDropdownOpen ? 'border-accent' : 'border-border-app'
+              }`}
+            >
+              <img 
+                src={userProfile.avatarUrl} 
+                alt={userProfile.name}
+                className="w-full h-full object-cover"
+              />
+            </button>
+
+            <AnimatePresence>
+              {isUserDropdownOpen && (
+                <motion.div
+                  initial={{ opacity: 0, y: 10, scale: 0.95 }}
+                  animate={{ 
+                    opacity: 1, 
+                    y: 6, 
+                    scale: 1,
+                    transition: { type: 'spring', stiffness: 350, damping: 25 }
+                  }}
+                  exit={{ opacity: 0, y: 10, scale: 0.95, transition: { duration: 0.15 } }}
+                  className="absolute right-0 w-56 glass rounded-2xl shadow-2xl p-2 border border-border-app z-50 flex flex-col gap-1"
+                >
+                  {/* User Profile Info section */}
+                  <div className="px-3.5 py-2.5 border-b border-border-app/50 flex flex-col gap-0.5">
+                    <span className="text-xs font-bold text-text-main truncate">{userProfile.name}</span>
+                    <span className="text-[10px] text-text-muted truncate font-mono">{userProfile.email}</span>
+                  </div>
+
+                  {/* Actions Links */}
+                  <button 
+                    onClick={() => setIsUserDropdownOpen(false)}
+                    className="w-full text-left px-3.5 py-2 rounded-xl text-xs font-bold text-text-muted hover:bg-bg-app hover:text-text-main flex items-center gap-2.5 transition-colors cursor-pointer"
+                  >
+                    <User className="w-4 h-4 text-text-muted/70" />
+                    <span>Mi Perfil</span>
+                  </button>
+
+                  <button 
+                    onClick={() => setIsUserDropdownOpen(false)}
+                    className="w-full text-left px-3.5 py-2 rounded-xl text-xs font-bold text-text-muted hover:bg-bg-app hover:text-text-main flex items-center gap-2.5 transition-colors cursor-pointer"
+                  >
+                    <Settings className="w-4 h-4 text-text-muted/70" />
+                    <span>Ajustes</span>
+                  </button>
+
+                  {/* Divider */}
+                  <div className="h-[1px] bg-border-app/50 my-1" />
+
+                  <button 
+                    onClick={() => {
+                      setIsUserDropdownOpen(false);
+                      if (onLogout) onLogout();
+                    }}
+                    className="w-full text-left px-3.5 py-2 rounded-xl text-xs font-extrabold text-red-500 hover:bg-red-500/10 flex items-center gap-2.5 transition-colors cursor-pointer"
+                  >
+                    <LogOut className="w-4 h-4 text-red-500/80" />
+                    <span>Cerrar Sesión</span>
+                  </button>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        )}
+
+      </div>
+
+      {/* Mobile Menu Dropdown drawer */}
+      <AnimatePresence>
+        {isMobileMenuOpen && (
+          <motion.div
+            initial={{ opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: 'auto' }}
+            exit={{ opacity: 0, height: 0 }}
+            className="absolute top-full left-0 w-full glass bg-bg-card/95 border-b border-border-app md:hidden z-30 flex flex-col p-4 gap-2"
+          >
+            {navItems.map((item, idx) => (
+              <a
+                key={idx}
+                href={item.href}
+                className="px-4 py-2.5 rounded-xl text-xs font-bold text-text-muted hover:bg-bg-app hover:text-text-main transition-all"
+                onClick={() => setIsMobileMenuOpen(false)}
+              >
+                {item.label}
+              </a>
+            ))}
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+    </nav>
+  );
+};

package/components/InteractiveSidebar.tsx

@@ -0,0 +1,211 @@
+import React, { useState } from 'react';
+import { motion, LayoutGroup } from 'framer-motion';
+import { 
+  ChevronLeft, 
+  ChevronRight, 
+  Home, 
+  User, 
+  Settings, 
+  MessageSquare, 
+  HelpCircle, 
+  LogOut 
+} from 'lucide-react';
+import { ThemeSwitcher } from './ThemeSwitcher';
+
+export interface SidebarItem {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+  count?: number;
+}
+
+export interface InteractiveSidebarProps {
+  items?: SidebarItem[];
+  activeId?: string;
+  onSelect?: (id: string) => void;
+  showCollapseButton?: boolean;
+  showUserSession?: boolean;
+  showThemeToggle?: boolean;
+  userProfile?: {
+    name: string;
+    email: string;
+    avatarUrl: string;
+  };
+  onLogout?: () => void;
+  className?: string;
+}
+
+export const InteractiveSidebar: React.FC<InteractiveSidebarProps> = ({
+  items = [
+    { id: 'home', label: 'Inicio', icon: <Home className="w-5 h-5" /> },
+    { id: 'profile', label: 'Mi Perfil', icon: <User className="w-5 h-5" /> },
+    { id: 'messages', label: 'Mensajería', icon: <MessageSquare className="w-5 h-5" />, count: 4 },
+    { id: 'settings', label: 'Configuración', icon: <Settings className="w-5 h-5" /> },
+    { id: 'help', label: 'Soporte y Ayuda', icon: <HelpCircle className="w-5 h-5" /> }
+  ],
+  activeId = 'home',
+  onSelect,
+  showCollapseButton = true,
+  showUserSession = true,
+  showThemeToggle = true,
+  userProfile = {
+    name: 'Alexis Jardin',
+    email: 'alex@jardin.com',
+    avatarUrl: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&auto=format&fit=crop'
+  },
+  onLogout,
+  className = ''
+}) => {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  const handleSelect = (id: string) => {
+    if (onSelect) onSelect(id);
+  };
+
+  return (
+    <LayoutGroup id="sidebarLayoutGroup">
+      <motion.aside
+        animate={{ width: isCollapsed ? 80 : 256 }}
+        transition={{ type: 'spring', stiffness: 300, damping: 25 }}
+        className={`h-full min-h-[500px] flex flex-col justify-between p-4 glass bg-bg-card/75 border border-border-app rounded-3xl transition-colors duration-300 select-none overflow-hidden relative ${className}`}
+      >
+        
+        {/* Upper Brand / Collapse trigger section */}
+        <div className="flex flex-col gap-5">
+          
+          <div className="flex items-center justify-between px-2.5 h-10">
+            {/* Brand Logo text (hide when collapsed) */}
+            {!isCollapsed && (
+              <motion.span
+                initial={{ opacity: 0, scale: 0.9 }}
+                animate={{ opacity: 1, scale: 1 }}
+                exit={{ opacity: 0 }}
+                className="font-extrabold tracking-tight bg-gradient-to-r from-accent to-pink-500 bg-clip-text text-transparent font-display text-sm"
+              >
+                ALEXUI MENÚ
+              </motion.span>
+            )}
+            
+            {/* Collapse toggle arrow */}
+            {showCollapseButton && (
+              <button
+                onClick={() => setIsCollapsed(!isCollapsed)}
+                className={`p-1.5 rounded-xl border border-border-app bg-bg-card hover:border-accent hover:text-accent text-text-muted transition-colors cursor-pointer ${
+                  isCollapsed ? 'mx-auto' : ''
+                }`}
+                aria-label={isCollapsed ? "Expandir" : "Colapsar"}
+              >
+                {isCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
+              </button>
+            )}
+          </div>
+
+          {/* Navigation Links Items List */}
+          <div className="flex flex-col gap-1">
+            {items.map((item) => {
+              const isSelected = activeId === item.id;
+              return (
+                <button
+                  key={item.id}
+                  onClick={() => handleSelect(item.id)}
+                  className={`w-full relative py-3 px-3 rounded-xl flex items-center justify-between text-left font-bold text-xs transition-colors duration-300 cursor-pointer ${
+                    isSelected ? 'text-accent' : 'text-text-muted hover:text-text-main'
+                  }`}
+                >
+                  
+                  {/* Sliding active pill background (layout sharing) */}
+                  {isSelected && (
+                    <motion.div
+                      layoutId="sidebarActivePill"
+                      className="absolute inset-0 bg-accent/10 border-l-2 border-accent rounded-xl z-0"
+                      transition={{ type: 'spring', stiffness: 350, damping: 25 }}
+                    />
+                  )}
+
+                  {/* Icon & Label */}
+                  <div className="flex items-center gap-3 z-10 relative">
+                    <span className="flex-shrink-0">{item.icon}</span>
+                    {!isCollapsed && (
+                      <motion.span
+                        initial={{ opacity: 0, x: -10 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        className="truncate"
+                      >
+                        {item.label}
+                      </motion.span>
+                    )}
+                  </div>
+
+                  {/* Badge Notification count (hide label when collapsed, maybe render dot) */}
+                  {item.count && item.count > 0 && (
+                    <span className={`z-10 relative bg-accent text-white font-extrabold rounded-full flex items-center justify-center shrink-0 ${
+                      isCollapsed 
+                        ? 'w-2 h-2 p-0 absolute top-2 right-2 border border-bg-card' 
+                        : 'text-[9px] px-2 py-0.5 min-w-5 h-5'
+                    }`}>
+                      {!isCollapsed && item.count}
+                    </span>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Bottom User Profile Section & Theme Toggle */}
+        <div className="flex flex-col gap-4">
+          
+          {/* Theme switcher embedded */}
+          {showThemeToggle && (
+            <div className={`flex items-center justify-center p-1 rounded-2xl bg-bg-app/40 border border-border-app/30 ${
+              isCollapsed ? 'w-full' : 'px-3 py-1.5'
+            }`}>
+              <ThemeSwitcher />
+            </div>
+          )}
+
+          {/* User profile actions summary */}
+          {showUserSession && (
+            <div className={`flex items-center justify-between border-t border-border-app/50 pt-4 px-1 ${
+              isCollapsed ? 'flex-col gap-3 justify-center' : ''
+            }`}>
+              {/* Profile Avatar + info */}
+              <div className="flex items-center gap-2.5 overflow-hidden">
+                <img
+                  src={userProfile.avatarUrl}
+                  alt={userProfile.name}
+                  className="w-9 h-9 rounded-xl border border-border-app object-cover shrink-0"
+                />
+                {!isCollapsed && (
+                  <motion.div
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    className="flex flex-col overflow-hidden shrink"
+                  >
+                    <span className="text-[11px] font-extrabold text-text-main truncate leading-tight">{userProfile.name}</span>
+                    <span className="text-[9px] font-mono text-text-muted truncate leading-none mt-0.5">{userProfile.email}</span>
+                  </motion.div>
+                )}
+              </div>
+
+              {/* Logout Button */}
+              <button
+                onClick={() => {
+                  if (onLogout) onLogout();
+                }}
+                className={`p-2 rounded-xl text-red-500 hover:bg-red-500/10 transition-colors cursor-pointer shrink-0 ${
+                  isCollapsed ? 'mx-auto' : ''
+                }`}
+                title="Cerrar Sesión"
+              >
+                <LogOut className="w-4 h-4" />
+              </button>
+            </div>
+          )}
+
+        </div>
+
+      </motion.aside>
+    </LayoutGroup>
+  );
+};

package/components/Kbd.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+export type KbdSize = 'sm' | 'md';
+
+export interface KbdProps {
+  children: React.ReactNode;
+  size?: KbdSize;
+  className?: string;
+}
+
+const sizeStyles: Record<KbdSize, string> = {
+  sm: 'text-[10px] px-1.5 py-0.5 min-w-[1.25rem]',
+  md: 'text-xs px-2 py-1 min-w-[1.5rem]'
+};
+
+export const Kbd: React.FC<KbdProps> = ({
+  children,
+  size = 'md',
+  className = ''
+}) => (
+  <kbd
+    className={`inline-flex items-center justify-center font-mono font-bold rounded-md border border-border-app bg-bg-app/80 text-text-muted shadow-[0_1px_0_rgba(255,255,255,0.06),inset_0_0_0_1px_rgba(255,255,255,0.04)] ${sizeStyles[size]} ${className}`}
+  >
+    {children}
+  </kbd>
+);
+
+export interface KbdGroupProps {
+  keys: string[];
+  separator?: string;
+  size?: KbdSize;
+  className?: string;
+}
+
+export const KbdGroup: React.FC<KbdGroupProps> = ({
+  keys,
+  separator = '+',
+  size = 'md',
+  className = ''
+}) => (
+  <span className={`inline-flex items-center gap-1 ${className}`}>
+    {keys.map((key, index) => (
+      <React.Fragment key={`${key}-${index}`}>
+        {index > 0 && (
+          <span className="text-[10px] font-bold text-text-muted/60 select-none">{separator}</span>
+        )}
+        <Kbd size={size}>{key}</Kbd>
+      </React.Fragment>
+    ))}
+  </span>
+);

package/components/LiteYouTube.tsx

@@ -0,0 +1,118 @@
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { Play } from 'lucide-react';
+import { Skeleton } from './Skeleton';
+
+export interface LiteYouTubeProps {
+  videoId: string;
+  title: string;
+  params?: string; // Optional parameters like rel=0, controls=1, etc.
+  posterSize?: 'maxresdefault' | 'hqdefault' | 'sddefault';
+  className?: string;
+  isLoading?: boolean;
+}
+
+export const LiteYouTube: React.FC<LiteYouTubeProps> = ({
+  videoId,
+  title,
+  params = 'rel=0&showinfo=0&controls=1',
+  posterSize = 'maxresdefault',
+  className = '',
+  isLoading = false
+}) => {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [posterUrl, setPosterUrl] = useState(`https://i.ytimg.com/vi/${videoId}/${posterSize}.jpg`);
+
+  // Dynamically add preconnections to speed up the YouTube player load on click
+  useEffect(() => {
+    if (isLoading) return;
+
+    const pc1 = document.createElement('link');
+    pc1.rel = 'preconnect';
+    pc1.href = 'https://www.youtube-nocookie.com';
+
+    const pc2 = document.createElement('link');
+    pc2.rel = 'preconnect';
+    pc2.href = 'https://i.ytimg.com';
+
+    document.head.appendChild(pc1);
+    document.head.appendChild(pc2);
+
+    return () => {
+      document.head.removeChild(pc1);
+      document.head.removeChild(pc2);
+    };
+  }, [videoId, isLoading]);
+
+  // Fallback to hqdefault in case maxresdefault doesn't exist
+  const handlePosterError = () => {
+    if (posterUrl.includes('maxresdefault')) {
+      setPosterUrl(`https://i.ytimg.com/vi/${videoId}/hqdefault.jpg`);
+    }
+  };
+
+  const handlePlay = () => {
+    setIsPlaying(true);
+  };
+
+  const embedUrl = `https://www.youtube-nocookie.com/embed/${videoId}?autoplay=1&mute=0&${params}`;
+
+  if (isLoading) {
+    return (
+      <Skeleton 
+        className={`w-full aspect-video rounded-2xl border border-border-app shadow-lg ${className}`} 
+      />
+    );
+  }
+
+  return (
+    <div 
+      className={`relative w-full aspect-video rounded-2xl overflow-hidden bg-black border border-border-app shadow-lg group ${className}`}
+    >
+      {!isPlaying ? (
+        <div 
+          onClick={handlePlay}
+          className="absolute inset-0 w-full h-full cursor-pointer flex items-center justify-center select-none"
+        >
+          {/* Static Image Thumbnail */}
+          <img
+            src={posterUrl}
+            alt={title}
+            onError={handlePosterError}
+            className="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+            loading="lazy"
+          />
+
+          {/* Vignette Overlay */}
+          <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-black/20" />
+
+          {/* Title Header */}
+          <span className="absolute top-4 left-4 right-4 text-sm font-bold text-white drop-shadow-md truncate opacity-90 group-hover:opacity-100 transition-opacity duration-200">
+            {title}
+          </span>
+
+          {/* Custom Animated Play Button */}
+          <motion.div
+            whileHover={{ scale: 1.15 }}
+            whileTap={{ scale: 0.95 }}
+            className="relative z-10 w-16 h-16 rounded-full bg-accent text-white flex items-center justify-center shadow-2xl transition-colors hover:bg-accent-hover group-hover:shadow-[0_0_25px_rgba(99,102,241,0.6)] cursor-pointer"
+          >
+            {/* Glowing background ripple */}
+            <div className="absolute -inset-1 rounded-full bg-accent/30 animate-ping opacity-70 group-hover:opacity-100" />
+            
+            <Play className="w-6 h-6 fill-white ml-1" />
+          </motion.div>
+        </div>
+      ) : (
+        /* Actual Iframe embed injected only on-click */
+        <iframe
+          src={embedUrl}
+          title={title}
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          allowFullScreen
+          className="absolute inset-0 w-full h-full border-0 z-10"
+        />
+      )}
+    </div>
+  );
+};