xertica-ui 1.0.0

package/components/PodcastPlayer.tsx

@@ -0,0 +1,409 @@
+import React, { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { 
+  PlayCircle, 
+  PauseCircle, 
+  Volume2, 
+  RotateCcw, 
+  Gauge, 
+  Info, 
+  RefreshCw, 
+  Download, 
+  X,
+  ExternalLink,
+  VolumeX,
+  Radio,
+  MoreHorizontal
+} from 'lucide-react';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+import { Button } from './ui/button';
+import { Slider } from './ui/slider';
+import { 
+  Tooltip, 
+  TooltipContent, 
+  TooltipProvider, 
+  TooltipTrigger 
+} from './ui/tooltip';
+import { cn } from './ui/utils';
+
+interface PodcastPlayerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  sidebarExpanded: boolean;
+  title?: string;
+  subtitle?: string;
+  duration?: number; // in seconds
+  currentTime?: number;
+  variant?: 'fixed' | 'inline';
+  layoutMode?: 'viewport' | 'container';
+  rightSidebarState?: 'none' | 'collapsed' | 'expanded';
+}
+
+export function PodcastPlayer({ 
+  isOpen, 
+  onClose, 
+  sidebarExpanded,
+  title = "Processo 50002396220258210104",
+  subtitle = "Podcast atualizado até Evento 26",
+  duration = 1200, // 20:00
+  currentTime = 0,
+  variant = 'fixed',
+  layoutMode = 'viewport',
+  rightSidebarState = 'none'
+}: PodcastPlayerProps) {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [current, setCurrent] = useState(currentTime);
+  const [volume, setVolume] = useState([80]);
+  const [isMuted, setIsMuted] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      setIsVisible(true);
+    } else {
+      if (variant === 'fixed') {
+        const timer = setTimeout(() => setIsVisible(false), 300);
+        return () => clearTimeout(timer);
+      } else {
+        setIsVisible(false);
+      }
+    }
+  }, [isOpen, variant]);
+
+  if (!isVisible && variant === 'fixed') return null;
+  if (!isOpen && variant === 'inline') return null;
+
+  const formatTime = (seconds: number) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  const togglePlay = () => setIsPlaying(!isPlaying);
+  const toggleMute = () => setIsMuted(!isMuted);
+
+  const isFixed = variant === 'fixed';
+  const isViewport = layoutMode === 'viewport';
+
+  const rightClasses = {
+    none: "right-0",
+    collapsed: "right-0 md:right-20",
+    expanded: "right-0 md:right-[420px]"
+  }[rightSidebarState];
+
+  const playerContent = (
+    <div 
+      className={cn(
+        "backdrop-blur-md transition-all duration-300 ease-in-out shadow-[var(--elevation-sm)]",
+        isFixed 
+          ? "bg-primary/80 text-primary-foreground border-t border-primary/20 [&_.text-muted-foreground]:text-primary-foreground/80 [&_.text-foreground]:text-primary-foreground [&_.text-[var(--chart-4)]]:text-primary-foreground [&_button:hover]:bg-primary-foreground/10 [&_button:hover]:text-primary-foreground [&_[data-slot=slider-track]]:bg-primary-foreground/20 [&_[data-slot=slider-range]]:bg-primary-foreground [&_[data-slot=slider-thumb]]:border-primary-foreground"
+          : "bg-card/95 text-card-foreground border border-border",
+        isFixed ? [
+          "z-50",
+          isViewport ? "fixed bottom-0" : "absolute bottom-0 left-0 w-full",
+          isViewport && rightClasses,
+          isViewport && (sidebarExpanded ? "left-0 md:left-64" : "left-0 md:left-20"),
+          isOpen ? "translate-y-0 opacity-100" : "translate-y-full opacity-0"
+        ] : [
+          "relative w-full rounded-lg",
+          "opacity-100 translate-y-0"
+        ]
+      )}
+    >
+      {/* Desktop Layout: Horizontal */}
+      <div className="hidden md:flex h-[72px] px-4 md:px-6 items-center justify-between gap-4">
+        
+        {/* Left: Info */}
+        <div className="flex flex-col min-w-0 w-[180px] lg:w-[240px] shrink-0">
+          <div className="flex items-center gap-2 mb-0.5">
+            <Radio className="w-3 h-3 text-[var(--chart-4)] animate-pulse" />
+            <h4 className="text-sm md:text-base truncate font-medium" title={title}>
+              {title}
+            </h4>
+          </div>
+          <div className="flex items-center gap-1">
+            <span className="truncate text-xs text-muted-foreground">{subtitle}</span>
+            <ExternalLink className="w-3 h-3 cursor-pointer hover:text-foreground ml-1 opacity-70 hover:opacity-100" />
+          </div>
+        </div>
+
+        {/* Center: Controls */}
+        <div className="flex-1 flex items-center justify-center gap-4 max-w-3xl">
+          <button 
+            onClick={togglePlay}
+            className="text-muted-foreground hover:text-foreground transition-colors focus:outline-none hover:scale-105 active:scale-95 transform duration-100"
+            aria-label={isPlaying ? "Pausar" : "Reproduzir"}
+          >
+            {isPlaying ? (
+              <PauseCircle className="w-10 h-10" strokeWidth={1.5} />
+            ) : (
+              <PlayCircle className="w-10 h-10" strokeWidth={1.5} />
+            )}
+          </button>
+          
+          <div className="flex-1 flex items-center gap-3">
+             <span className="text-xs text-muted-foreground font-mono shrink-0 w-10 text-right">
+               {formatTime(current)}
+             </span>
+             <Slider 
+               defaultValue={[0]} 
+               max={duration} 
+               value={[current]}
+               onValueChange={(val) => setCurrent(val[0])}
+               className="cursor-pointer"
+               aria-label="Barra de progresso"
+             />
+             <span className="text-xs text-muted-foreground font-mono shrink-0 w-10">
+               {formatTime(duration)}
+             </span>
+          </div>
+        </div>
+
+        {/* Right: Actions */}
+        <div className="flex items-center gap-1 md:gap-3 shrink-0">
+            {/* Volume */}
+            <div className="hidden lg:flex items-center gap-2 w-28 mr-2 group">
+               <button 
+                 onClick={toggleMute} 
+                 className="text-muted-foreground hover:text-foreground"
+                 aria-label={isMuted ? "Ativar som" : "Silenciar"}
+               >
+                 {isMuted || volume[0] === 0 ? <VolumeX className="w-5 h-5" /> : <Volume2 className="w-5 h-5" />}
+               </button>
+               <Slider 
+                 defaultValue={[80]} 
+                 max={100} 
+                 value={volume}
+                 onValueChange={setVolume}
+                 className="w-full opacity-60 group-hover:opacity-100 transition-opacity"
+                 aria-label="Controle de volume"
+               />
+            </div>
+
+            <div className="flex items-center gap-1">
+              {/* Desktop: Restart & Speed */}
+              <div className={cn("hidden md:flex items-center gap-1", variant === 'inline' && "!hidden")}>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                       <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-9 w-9">
+                         <RotateCcw className="w-4 h-4" />
+                       </Button>
+                    </TooltipTrigger>
+                    <TooltipContent className="text-xs">Reiniciar</TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+
+                <TooltipProvider>
+                   <Tooltip>
+                     <TooltipTrigger asChild>
+                       <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-9 w-9">
+                         <Gauge className="w-4 h-4" />
+                       </Button>
+                     </TooltipTrigger>
+                     <TooltipContent className="text-xs">Velocidade (1.0x)</TooltipContent>
+                   </Tooltip>
+                </TooltipProvider>
+              </div>
+
+              {/* Info (Always visible) */}
+              <TooltipProvider>
+                 <Tooltip>
+                   <TooltipTrigger asChild>
+                     <Button variant="ghost" size="icon" className="text-[var(--chart-4)] hover:text-[var(--chart-4)]/80 hover:bg-accent rounded-full h-9 w-9">
+                       <Info className="w-4 h-4 fill-current" />
+                     </Button>
+                   </TooltipTrigger>
+                   <TooltipContent className="max-w-[300px]">
+                     <p className="text-xs">Identificamos a entrada de novos eventos neste processo desde a última atualização deste podcast.</p>
+                   </TooltipContent>
+                 </Tooltip>
+              </TooltipProvider>
+
+              {/* Desktop: Refresh & Download */}
+              <div className={cn("hidden md:flex items-center gap-1", variant === 'inline' && "!hidden")}>
+                <TooltipProvider>
+                   <Tooltip>
+                     <TooltipTrigger asChild>
+                       <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-9 w-9">
+                         <RefreshCw className="w-4 h-4" />
+                       </Button>
+                     </TooltipTrigger>
+                     <TooltipContent className="text-xs">Atualizar Versão</TooltipContent>
+                   </Tooltip>
+                </TooltipProvider>
+
+                <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-9 w-9">
+                  <Download className="w-4 h-4" />
+                </Button>
+              </div>
+
+              {/* Mobile: Menu (containing Restart, Speed, Refresh, Download) */}
+              <div className={cn("md:hidden", variant === 'inline' && "!block")}>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-9 w-9">
+                      <MoreHorizontal className="w-5 h-5" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end" className="w-48">
+                    <DropdownMenuItem className="cursor-pointer">
+                      <RotateCcw className="w-4 h-4 mr-2" />
+                      <span className="text-xs">Reiniciar</span>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem className="cursor-pointer">
+                      <Gauge className="w-4 h-4 mr-2" />
+                      <span className="text-xs">Velocidade (1.0x)</span>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem className="cursor-pointer">
+                      <RefreshCw className="w-4 h-4 mr-2" />
+                      <span className="text-xs">Atualizar Versão</span>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem className="cursor-pointer">
+                      <Download className="w-4 h-4 mr-2" />
+                      <span className="text-xs">Download</span>
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </div>
+
+              <div className="w-px h-8 bg-border mx-1" />
+
+              <Button onClick={onClose} variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-9 w-9">
+                <X className="w-5 h-5" />
+              </Button>
+            </div>
+        </div>
+      </div>
+
+      {/* Mobile Layout: Vertical */}
+      <div className="flex md:hidden flex-col py-3 px-4 gap-3">
+        {/* Top: Info & Close Button */}
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex flex-col min-w-0 flex-1">
+            <div className="flex items-center gap-2 mb-1">
+              <Radio className="w-3 h-3 text-[var(--chart-4)] animate-pulse shrink-0" />
+              <h4 className="text-sm truncate font-medium" title={title}>
+                {title}
+              </h4>
+            </div>
+            <div className="flex items-center gap-1.5">
+              <span className="truncate text-xs text-muted-foreground">{subtitle}</span>
+              <ExternalLink className="w-3 h-3 cursor-pointer hover:text-foreground opacity-70 hover:opacity-100 shrink-0" />
+            </div>
+          </div>
+          
+          <Button onClick={onClose} variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-8 w-8 shrink-0">
+            <X className="w-4 h-4" />
+          </Button>
+        </div>
+
+        {/* Middle: Progress Bar */}
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-muted-foreground font-mono shrink-0 w-10 text-right">
+            {formatTime(current)}
+          </span>
+          <Slider 
+            defaultValue={[0]} 
+            max={duration} 
+            value={[current]}
+            onValueChange={(val) => setCurrent(val[0])}
+            className="cursor-pointer"
+            aria-label="Barra de progresso"
+          />
+          <span className="text-xs text-muted-foreground font-mono shrink-0 w-10">
+            {formatTime(duration)}
+          </span>
+        </div>
+
+        {/* Bottom: Controls */}
+        <div className="flex items-center justify-between gap-2">
+          {/* Play/Pause Button */}
+          <button 
+            onClick={togglePlay}
+            className="text-muted-foreground hover:text-foreground transition-colors focus:outline-none hover:scale-105 active:scale-95 transform duration-100"
+            aria-label={isPlaying ? "Pausar" : "Reproduzir"}
+          >
+            {isPlaying ? (
+              <PauseCircle className="w-12 h-12" strokeWidth={1.5} />
+            ) : (
+              <PlayCircle className="w-12 h-12" strokeWidth={1.5} />
+            )}
+          </button>
+
+          {/* Volume Control */}
+          <div className="flex items-center gap-2 flex-1 max-w-[140px]">
+            <button 
+              onClick={toggleMute} 
+              className="text-muted-foreground hover:text-foreground shrink-0"
+              aria-label={isMuted ? "Ativar som" : "Silenciar"}
+            >
+              {isMuted || volume[0] === 0 ? <VolumeX className="w-4 h-4" /> : <Volume2 className="w-4 h-4" />}
+            </button>
+            <Slider 
+              defaultValue={[80]} 
+              max={100} 
+              value={volume}
+              onValueChange={setVolume}
+              className="w-full"
+              aria-label="Controle de volume"
+            />
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex items-center gap-1">
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant="ghost" size="icon" className="text-[var(--chart-4)] hover:text-[var(--chart-4)]/80 hover:bg-accent rounded-full h-8 w-8">
+                    <Info className="w-4 h-4 fill-current" />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent className="max-w-[300px]">
+                  <p className="text-xs">Identificamos a entrada de novos eventos neste processo desde a última atualização deste podcast.</p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
+
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon" className="text-muted-foreground hover:text-foreground hover:bg-accent rounded-full h-8 w-8">
+                  <MoreHorizontal className="w-4 h-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-48">
+                <DropdownMenuItem className="cursor-pointer">
+                  <RotateCcw className="w-4 h-4 mr-2" />
+                  <span className="text-xs">Reiniciar</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem className="cursor-pointer">
+                  <Gauge className="w-4 h-4 mr-2" />
+                  <span className="text-xs">Velocidade (1.0x)</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem className="cursor-pointer">
+                  <RefreshCw className="w-4 h-4 mr-2" />
+                  <span className="text-xs">Atualizar Versão</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem className="cursor-pointer">
+                  <Download className="w-4 h-4 mr-2" />
+                  <span className="text-xs">Download</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  if (isFixed && isViewport && typeof document !== 'undefined') {
+    return createPortal(playerContent, document.body);
+  }
+
+  return playerContent;
+}

package/components/ResetPasswordPage.tsx

@@ -0,0 +1,234 @@
+import React, { useState } from 'react';
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+import { Label } from './ui/label';
+import { XerticaLogo } from './XerticaLogo';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+import { LanguageSelector } from './LanguageSelector';
+import { ArrowLeft, CheckCircle2, AlertCircle } from 'lucide-react';
+import { useNavigate } from 'react-router';
+
+export function ResetPasswordPage() {
+  const navigate = useNavigate();
+  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [passwordStrength, setPasswordStrength] = useState<'weak' | 'medium' | 'strong' | null>(null);
+
+  // Validação de força da senha
+  const checkPasswordStrength = (pwd: string) => {
+    if (pwd.length === 0) {
+      setPasswordStrength(null);
+      return;
+    }
+    
+    if (pwd.length < 6) {
+      setPasswordStrength('weak');
+    } else if (pwd.length < 10) {
+      setPasswordStrength('medium');
+    } else {
+      setPasswordStrength('strong');
+    }
+  };
+
+  const handlePasswordChange = (value: string) => {
+    setPassword(value);
+    checkPasswordStrength(value);
+    setError('');
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+
+    // Validações
+    if (password.length < 6) {
+      setError('A senha deve ter no mínimo 6 caracteres');
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError('As senhas não coincidem');
+      return;
+    }
+
+    setIsLoading(true);
+
+    // Simula redefinição de senha
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    
+    // Redireciona para login com mensagem de sucesso
+    navigate('/login', { state: { resetSuccess: true } });
+    
+    setIsLoading(false);
+  };
+
+  const getStrengthColor = () => {
+    switch (passwordStrength) {
+      case 'weak':
+        return 'text-destructive';
+      case 'medium':
+        return 'text-[var(--chart-3)]';
+      case 'strong':
+        return 'text-[var(--chart-2)]';
+      default:
+        return 'text-muted-foreground';
+    }
+  };
+
+  const getStrengthText = () => {
+    switch (passwordStrength) {
+      case 'weak':
+        return 'Senha fraca';
+      case 'medium':
+        return 'Senha média';
+      case 'strong':
+        return 'Senha forte';
+      default:
+        return '';
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex">
+      {/* Lado esquerdo - Imagem de fundo completa */}
+      <div className="hidden lg:flex lg:flex-1 relative overflow-hidden">
+        {/* Imagem de fundo preenchendo todo o espaço */}
+        <ImageWithFallback
+          src="https://images.unsplash.com/photo-1555949963-aa79dcee981c?w=1200&h=800&fit=crop&auto=format"
+          alt="Segurança e proteção"
+          className="absolute inset-0 w-full h-full object-cover"
+        />
+        
+        {/* Overlay com gradiente */}
+        <div className="absolute inset-0 bg-[image:var(--gradient-diagonal)] opacity-80" />
+      </div>
+
+      {/* Lado direito - Formulário */}
+      <div className="flex-1 flex items-center justify-center px-4 sm:px-6 lg:px-8 lg:flex-none lg:w-1/2 relative bg-muted">
+        {/* Seletor de idioma no canto superior direito */}
+        <div className="absolute top-4 right-4 z-20">
+          <LanguageSelector variant="minimal" showIcon={false} />
+        </div>
+        
+        {/* Gradiente de fundo para mobile */}
+        <div className="absolute inset-0 lg:hidden bg-[image:var(--gradient-diagonal)] opacity-10 dark:opacity-5" />
+        
+        <div className="w-full max-w-sm space-y-6 relative z-10">
+          {/* Botão voltar */}
+          <button
+            onClick={() => navigate('/login')}
+            className="flex items-center gap-2 text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <ArrowLeft className="w-4 h-4" />
+            <span className="text-small">Voltar para login</span>
+          </button>
+
+          {/* Header do formulário */}
+          <div className="text-center">
+            <div className="flex items-center justify-center mb-4">
+              <XerticaLogo 
+                className="h-12 w-auto text-primary dark:text-foreground" 
+                variant="theme"
+              />
+            </div>
+            <h2 className="text-sm text-muted-foreground">Redefinir senha</h2>
+            <p className="mt-2 text-muted-foreground">
+              Crie uma nova senha segura para sua conta
+            </p>
+          </div>
+
+          {/* Formulário */}
+          <form className="space-y-6" onSubmit={handleSubmit}>
+            <div className="space-y-2">
+              <Label htmlFor="password">
+                Nova senha
+              </Label>
+              <Input
+                id="password"
+                name="password"
+                type="password"
+                required
+                className="w-full"
+                placeholder="••••••••"
+                value={password}
+                onChange={(e) => handlePasswordChange(e.target.value)}
+              />
+              {passwordStrength && (
+                <div className="flex items-center gap-2">
+                  <div className="flex-1 h-1 bg-muted rounded-full overflow-hidden">
+                    <div 
+                      className={`h-full transition-all duration-300 ${
+                        passwordStrength === 'weak' 
+                          ? 'w-1/3 bg-destructive' 
+                          : passwordStrength === 'medium'
+                          ? 'w-2/3 bg-[var(--chart-3)]'
+                          : 'w-full bg-[var(--chart-2)]'
+                      }`}
+                    />
+                  </div>
+                  <span className={`text-small ${getStrengthColor()}`}>
+                    {getStrengthText()}
+                  </span>
+                </div>
+              )}
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="confirmPassword">
+                Confirmar senha
+              </Label>
+              <Input
+                id="confirmPassword"
+                name="confirmPassword"
+                type="password"
+                required
+                className="w-full"
+                placeholder="••••••••"
+                value={confirmPassword}
+                onChange={(e) => {
+                  setConfirmPassword(e.target.value);
+                  setError('');
+                }}
+              />
+            </div>
+
+            <div className="bg-accent rounded-[var(--radius)] p-4 space-y-2">
+              <p className="text-sm">Requisitos da senha:</p>
+              <div className="space-y-1">
+                <div className="flex items-center gap-2">
+                  <CheckCircle2 
+                    className={`w-4 h-4 ${password.length >= 6 ? 'text-[var(--chart-2)]' : 'text-muted-foreground'}`} 
+                  />
+                  <span className="text-sm text-muted-foreground">Mínimo de 6 caracteres</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <CheckCircle2 
+                    className={`w-4 h-4 ${password === confirmPassword && password.length > 0 ? 'text-[var(--chart-2)]' : 'text-muted-foreground'}`} 
+                  />
+                  <span className="text-sm text-muted-foreground">Senhas coincidem</span>
+                </div>
+              </div>
+            </div>
+
+            {error && (
+              <div className="flex items-center gap-2 text-destructive bg-destructive/10 rounded-[var(--radius)] p-3">
+                <AlertCircle className="w-4 h-4 flex-shrink-0" />
+                <span className="text-sm">{error}</span>
+              </div>
+            )}
+
+            <Button 
+              type="submit" 
+              className="w-full"
+              disabled={isLoading}
+            >
+              {isLoading ? 'Redefinindo...' : 'Redefinir senha'}
+            </Button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}