xertica-ui 1.0.0

package/components/TemplatePage.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { useLocation, useNavigate } from 'react-router';
+import { Sidebar } from './Sidebar';
+import { TemplateContent } from './TemplateContent';
+import { AssistenteXertica } from './AssistenteXertica';
+
+interface TemplatePageProps {
+  user: { email: string } | null;
+  onLogout: () => void;
+}
+
+export function TemplatePage({ user, onLogout }: TemplatePageProps) {
+  const [sidebarExpanded, setSidebarExpanded] = useState(false);
+  const [assistenteExpanded, setAssistenteExpanded] = useState(false);
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  // Função para alternar a sidebar - fecha o assistente se estiver aberto
+  const handleToggleSidebar = () => {
+    if (!sidebarExpanded && assistenteExpanded) {
+      // Se a sidebar vai abrir e o assistente está aberto, fechar o assistente
+      setAssistenteExpanded(false);
+    }
+    setSidebarExpanded(!sidebarExpanded);
+  };
+
+  // Função para alternar o assistente - fecha a sidebar se estiver aberta
+  const handleToggleAssistente = () => {
+    if (!assistenteExpanded && sidebarExpanded) {
+      // Se o assistente vai abrir e a sidebar está aberta, fechar a sidebar
+      setSidebarExpanded(false);
+    }
+    setAssistenteExpanded(!assistenteExpanded);
+  };
+
+  // Função para abrir assistente com tab específica - fecha a sidebar se estiver aberta
+  const handleToggleAssistenteWithTab = (tab: string) => {
+    if (!assistenteExpanded) {
+      if (sidebarExpanded) {
+        // Se o assistente vai abrir e a sidebar está aberta, fechar a sidebar
+        setSidebarExpanded(false);
+      }
+      setAssistenteExpanded(true);
+    }
+  };
+
+  return (
+    <div className="h-screen flex bg-muted overflow-hidden relative">
+      <Sidebar 
+        expanded={sidebarExpanded}
+        onToggle={handleToggleSidebar}
+        user={user}
+        onLogout={onLogout}
+        location={location}
+        navigate={navigate}
+      />
+      <TemplateContent 
+        sidebarExpanded={sidebarExpanded}
+        assistenteExpanded={assistenteExpanded}
+        onToggleSidebar={handleToggleSidebar}
+        onToggleAssistente={handleToggleAssistente}
+      />
+      <AssistenteXertica
+        isExpanded={assistenteExpanded}
+        onToggle={handleToggleAssistente}
+        onToggleWithTab={handleToggleAssistenteWithTab}
+      />
+    </div>
+  );
+}

package/components/ThemeToggle.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Sun, Moon } from 'lucide-react';
+import { Button } from './ui/button';
+import { useTheme } from '../contexts/ThemeContext';
+
+interface ThemeToggleProps {
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'outline' | 'ghost';
+  className?: string;
+  showLabel?: boolean;
+}
+
+export function ThemeToggle({ 
+  size = 'md', 
+  variant = 'ghost', 
+  className = '',
+  showLabel = false 
+}: ThemeToggleProps) {
+  const { theme, toggleTheme, isDark } = useTheme();
+
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'sm':
+        return 'h-8 w-8 p-0';
+      case 'lg':
+        return 'h-12 w-12 p-0';
+      default:
+        return 'h-9 w-9 p-0';
+    }
+  };
+
+  const getIconSize = () => {
+    switch (size) {
+      case 'sm':
+        return 'h-3 w-3';
+      case 'lg':
+        return 'h-6 w-6';
+      default:
+        return 'h-4 w-4';
+    }
+  };
+
+  const buttonClasses = showLabel ? 'flex items-center gap-2 px-3 py-2' : getSizeClasses();
+
+  return (
+    <Button
+      variant={variant}
+      onClick={toggleTheme}
+      className={`group ${buttonClasses} transition-all duration-200 hover:scale-105 ${className}`}
+      title={isDark ? 'Alternar para tema claro' : 'Alternar para tema escuro'}
+    >
+      {isDark ? (
+        <>
+          <Sun className={`${getIconSize()} text-[var(--primary)] group-hover:opacity-80`} />
+          {showLabel && <span>Tema Claro</span>}
+        </>
+      ) : (
+        <>
+          <Moon className={`${getIconSize()} text-muted-foreground group-hover:text-foreground`} />
+          {showLabel && <span>Tema Escuro</span>}
+        </>
+      )}
+    </Button>
+  );
+}

package/components/VerifyEmailPage.tsx

@@ -0,0 +1,187 @@
+import React, { useState } from 'react';
+import { Button } from './ui/button';
+import { XerticaLogo } from './XerticaLogo';
+import { ImageWithFallback } from './figma/ImageWithFallback';
+import { LanguageSelector } from './LanguageSelector';
+import { ArrowLeft, Mail, CheckCircle2, Lock } from 'lucide-react';
+import { useNavigate, useLocation } from 'react-router';
+
+export function VerifyEmailPage() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const email = location.state?.email || 'seu@email.com';
+  const [isResending, setIsResending] = useState(false);
+  const [resendSuccess, setResendSuccess] = useState(false);
+
+  const handleResend = async () => {
+    setIsResending(true);
+    setResendSuccess(false);
+
+    // Simula reenvio de email
+    await new Promise(resolve => setTimeout(resolve, 1500));
+    
+    setIsResending(false);
+    setResendSuccess(true);
+
+    // Remove mensagem de sucesso após 3 segundos
+    setTimeout(() => setResendSuccess(false), 3000);
+  };
+
+  const handleSocialLogin = (provider: string) => {
+    // Simula login social/SSO
+    console.log(`Login com ${provider}`);
+    // Aqui seria implementada a integração real com cada provedor
+  };
+
+  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-1563986768609-322da13575f3?w=1200&h=800&fit=crop&auto=format"
+          alt="Email e comunicaçã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 - Conteúdo */}
+      <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">
+          {/* 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>
+            
+            {/* Ícone de email */}
+            <div className="flex items-center justify-center mb-4">
+              <div className="p-4 bg-primary/10 rounded-[var(--radius)]">
+                <Mail className="w-12 h-12 text-primary" />
+              </div>
+            </div>
+
+            <h2 className="text-sm text-muted-foreground">Verifique seu email</h2>
+            <p className="mt-2 text-muted-foreground">
+              Enviamos instruções para redefinir sua senha para:
+            </p>
+            <p className="mt-1 text-primary">
+              {email}
+            </p>
+          </div>
+
+          {/* Instruções */}
+          <div className="bg-accent rounded-[var(--radius)] p-4 space-y-3">
+            <p className="text-muted-foreground">
+              Siga as instruções no email para redefinir sua senha. O link expira em 24 horas.
+            </p>
+            <div className="flex items-start gap-2 text-muted-foreground">
+              <CheckCircle2 className="w-4 h-4 mt-0.5 flex-shrink-0 text-[var(--chart-2)]" />
+              <span className="text-sm">Verifique a caixa de spam se não encontrar o email</span>
+            </div>
+          </div>
+
+          {/* Mensagem de sucesso ao reenviar */}
+          {resendSuccess && (
+            <div className="bg-[var(--chart-2)]/10 border border-[var(--chart-2)]/20 rounded-[var(--radius)] p-3 flex items-center gap-2">
+              <CheckCircle2 className="w-5 h-5 text-[var(--chart-2)] flex-shrink-0" />
+              <span className="text-sm text-[var(--chart-2)]">Email reenviado com sucesso!</span>
+            </div>
+          )}
+
+          {/* Botões de ação */}
+          <div className="space-y-3">
+            <p className="text-center text-muted-foreground">
+              Não recebeu o email?
+            </p>
+            <Button 
+              variant="outline"
+              className="w-full"
+              onClick={handleResend}
+              disabled={isResending}
+            >
+              {isResending ? 'Reenviando...' : 'Reenviar email'}
+            </Button>
+
+            <Button
+              type="button"
+              onClick={() => navigate('/login')}
+              variant="outline"
+              className="w-full text-muted-foreground hover:text-foreground"
+            >
+              <ArrowLeft className="w-4 h-4 mr-2" />
+              Voltar para login
+            </Button>
+          </div>
+
+          {/* Divider */}
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <div className="w-full border-t border-border"></div>
+            </div>
+            <div className="relative flex justify-center text-sm">
+              <span className="bg-muted px-2 text-muted-foreground">
+                ou continuar com
+              </span>
+            </div>
+          </div>
+
+          {/* Opções de login social/SSO */}
+          <div className="space-y-3">
+            {/* Google */}
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full justify-center"
+              onClick={() => handleSocialLogin('Google')}
+            >
+              <svg className="w-5 h-5 mr-2" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+                <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
+                <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
+                <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path>
+                <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
+                <path fill="none" d="M0 0h48v48H0z"></path>
+              </svg>
+              <span>Entrar com Google</span>
+            </Button>
+
+            {/* MT Login */}
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full justify-center"
+              onClick={() => handleSocialLogin('MT Login')}
+            >
+              <Lock className="w-5 h-5 mr-2 text-[var(--chart-4)]" />
+              <span>Entrar com MT Login</span>
+            </Button>
+
+            {/* gov.br */}
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full justify-center font-normal"
+              onClick={() => handleSocialLogin('gov.br')}
+            >
+              <span>Entrar com <strong className="font-semibold">gov.br</strong></span>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/XerticaLogo.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+interface XerticaLogoProps {
+  className?: string;
+  color?: string;
+  variant?: 'default' | 'white' | 'theme';
+}
+
+export function XerticaLogo({ 
+  className = "w-auto h-8", 
+  color,
+  variant = 'default'
+}: XerticaLogoProps) {
+  
+  // Determinar a cor baseada na variante
+  const getColor = () => {
+    if (color) return color;
+    
+    switch (variant) {
+      case 'white':
+        return '#FFFFFF';
+      case 'theme':
+        return 'currentColor';
+      default:
+        return 'var(--primary)';
+    }
+  };
+  return (
+    <svg
+      className={className}
+      fill="none"
+      preserveAspectRatio="xMidYMid meet"
+      viewBox="0 0 1543 289"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="Xertica.ai">
+        <path d="M1352.82 239.808V285.425H1304.73V239.808H1352.82Z" fill={getColor()} />
+        <path d="M814.8 284.848H766.711V77.4971H814.8V284.848Z" fill={getColor()} />
+        <path d="M1543 284.438H1514.2V160.28H1543V284.438Z" fill={getColor()} />
+        <path 
+          clipRule="evenodd"
+          d="M1432.83 157.796C1446.98 157.796 1459.14 162.515 1468.58 170.709V160.28H1497.38V284.438H1468.58V274.01C1459.14 282.451 1446.98 286.921 1432.83 286.921C1395.1 286.921 1368.29 260.352 1368.29 222.359C1368.29 184.616 1395.1 157.796 1432.83 157.796ZM1432.83 183.778C1410.79 183.778 1396.27 199.061 1396.27 222.359C1396.27 245.658 1410.79 260.94 1432.83 260.94C1454.63 260.94 1468.9 245.658 1468.9 222.359C1468.9 199.06 1454.63 183.778 1432.83 183.778Z"
+          fill={getColor()}
+          fillRule="evenodd"
+        />
+        <path d="M947.87 73.3516C1002.88 73.3516 1044.42 107.647 1053.57 159.234H1004.68C997.221 132.988 976.34 117.308 947.87 117.308C911.387 117.308 887.337 142.612 887.337 181.176C887.337 219.739 911.387 245.036 947.87 245.036C976.34 245.036 997.221 229.356 1004.68 203.109H1053.57C1044.47 254.701 1003.26 289 947.87 289C884.853 289 840.078 244.626 840.078 181.176C840.078 118.142 884.854 73.3516 947.87 73.3516Z" fill={getColor()} />
+        <path d="M88.4971 39.8242L157.353 142.191L83.5371 251.524L60.9277 284.854H0L96.3154 142.191L5.37695 7H66.3047L88.4971 39.8242Z" fill={getColor()} />
+        <path d="M254.314 284.855H193.387L151.914 223.71L182.548 178.551L254.314 284.855Z" fill={getColor()} />
+        <path 
+          clipRule="evenodd"
+          d="M1179.14 73.3477C1202.77 73.3477 1223.08 81.2286 1238.84 94.9121V77.4971H1286.94V284.847H1238.84V267.431C1223.09 281.528 1202.77 288.992 1179.14 288.992C1116.12 288.992 1071.35 244.622 1071.35 181.172C1071.35 118.139 1116.12 73.3478 1179.14 73.3477ZM1179.14 117.308C1142.66 117.308 1118.61 142.604 1118.61 181.172C1118.61 219.739 1142.66 245.035 1179.14 245.035C1215.21 245.035 1238.84 219.739 1238.84 181.172C1238.84 142.605 1215.21 117.308 1179.14 117.308Z"
+          fill={getColor()}
+          fillRule="evenodd"
+        />
+        <path d="M1543 145.383H1514.2V118.067H1543V145.383Z" fill={getColor()} />
+        <path d="M672.466 77.501H736.31V121.457H672.466V211.448C672.466 230.939 682.415 240.891 702.313 240.891H736.309V284.852H698.999C649.246 284.851 625.203 259.968 625.203 211.449V7H672.466V77.501Z" fill={getColor()} />
+        <path d="M814.8 52.6172H766.711V7H814.8V52.6172Z" fill={getColor()} />
+        <path 
+          clipRule="evenodd"
+          d="M354.069 73.3516C417.086 73.3517 461.864 118.143 461.864 181.176C461.864 187.396 461.031 193.615 460.204 199.422H295.197C301.829 228.864 323.392 246.696 354.069 246.696C372.724 246.696 389.309 241.721 399.675 226.376H452.742C441.132 265.774 400.501 288.996 354.069 288.996C291.053 288.996 246.274 244.626 246.273 181.176C246.273 118.142 291.053 73.3516 354.069 73.3516ZM354.068 115.65C325.044 115.65 303.902 131.826 296.44 158.78H410.863C403.819 131.826 382.672 115.65 354.068 115.65Z"
+          fill={getColor()}
+          fillRule="evenodd"
+        />
+        <path d="M596.957 121.453H562.962C543.064 121.453 533.114 131.409 533.114 150.899V284.847H485.852V150.899C485.852 102.38 509.894 77.4972 559.647 77.4971H596.957V121.453Z" fill={getColor()} />
+        <path d="M182.552 98.6992L151.922 53.3906L188.014 0H248.941L182.552 98.6992Z" fill={getColor()} />
+      </g>
+    </svg>
+  );
+}