Implement HGTX Codex interface
This commit is contained in:
gpt-engineer-app[bot]
+5
-5
@@ -3,12 +3,12 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>hgtx-nova-era</title>
|
<title>HGTX Codex - AI Interface System</title>
|
||||||
<meta name="description" content="Lovable Generated Project" />
|
<meta name="description" content="Sistema moderno de interface conversacional com IA - Chat, Geração de Imagens e Processamento de Áudio" />
|
||||||
<meta name="author" content="Lovable" />
|
<meta name="author" content="HGTX Codex" />
|
||||||
|
|
||||||
<meta property="og:title" content="hgtx-nova-era" />
|
<meta property="og:title" content="HGTX Codex - AI Interface System" />
|
||||||
<meta property="og:description" content="Lovable Generated Project" />
|
<meta property="og:description" content="Sistema moderno de interface conversacional com IA - Chat, Geração de Imagens e Processamento de Áudio" />
|
||||||
<meta property="og:type" content="website" />
|
<meta property="og:type" content="website" />
|
||||||
<meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
|
<meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,48 @@
|
|||||||
|
import { ChevronDown } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/components/ui/dropdown-menu";
|
||||||
|
|
||||||
|
export const ChatHeader = () => {
|
||||||
|
const models = [
|
||||||
|
"ChatGPT 4.1",
|
||||||
|
"GPT-5 Mini",
|
||||||
|
"Claude 3.5 Sonnet",
|
||||||
|
"Gemini 2.5 Flash",
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="border-b border-border bg-card/50 backdrop-blur-sm px-6 py-4 flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-2 h-2 rounded-full bg-primary animate-pulse-glow" />
|
||||||
|
<span className="text-sm text-muted-foreground">Online</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button variant="outline" className="gap-2 glass-effect">
|
||||||
|
<span className="font-medium">ChatGPT 4.1</span>
|
||||||
|
<ChevronDown className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="start" className="glass-effect">
|
||||||
|
{models.map((model) => (
|
||||||
|
<DropdownMenuItem key={model} className="cursor-pointer">
|
||||||
|
{model}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
))}
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-sm text-muted-foreground">
|
||||||
|
Modelo de linguagem avançado
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,90 @@
|
|||||||
|
import { MessageSquare, Image, Mic, Settings, Plus } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Separator } from "@/components/ui/separator";
|
||||||
|
|
||||||
|
interface LayoutProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
activeTab: "chat" | "images" | "audio";
|
||||||
|
onTabChange: (tab: "chat" | "images" | "audio") => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
type TabType = "chat" | "images" | "audio";
|
||||||
|
|
||||||
|
export const Layout = ({ children, activeTab, onTabChange }: LayoutProps) => {
|
||||||
|
|
||||||
|
const tabs = [
|
||||||
|
{ id: "chat" as TabType, label: "Bate-papo", icon: MessageSquare },
|
||||||
|
{ id: "images" as TabType, label: "Imagens", icon: Image },
|
||||||
|
{ id: "audio" as TabType, label: "Áudio", icon: Mic },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex h-screen w-full bg-background overflow-hidden">
|
||||||
|
{/* Sidebar */}
|
||||||
|
<aside className="w-72 bg-sidebar border-r border-sidebar-border flex flex-col">
|
||||||
|
{/* Logo */}
|
||||||
|
<div className="p-6 border-b border-sidebar-border">
|
||||||
|
<h1 className="text-2xl font-bold gradient-text">HGTX Codex</h1>
|
||||||
|
<p className="text-xs text-muted-foreground mt-1">AI Interface System</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* New Chat Button */}
|
||||||
|
<div className="p-4">
|
||||||
|
<Button className="w-full gap-2 cyber-glow" variant="default">
|
||||||
|
<Plus className="w-4 h-4" />
|
||||||
|
Novo Chat
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation Tabs */}
|
||||||
|
<nav className="flex-1 px-3 py-2 space-y-1">
|
||||||
|
{tabs.map((tab) => {
|
||||||
|
const Icon = tab.icon;
|
||||||
|
const isActive = activeTab === tab.id;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={tab.id}
|
||||||
|
onClick={() => onTabChange(tab.id)}
|
||||||
|
className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-all ${
|
||||||
|
isActive
|
||||||
|
? "bg-sidebar-accent text-sidebar-accent-foreground cyber-border"
|
||||||
|
: "text-sidebar-foreground hover:bg-sidebar-accent/50"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<Icon className="w-5 h-5" />
|
||||||
|
<span className="font-medium">{tab.label}</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<Separator className="bg-sidebar-border" />
|
||||||
|
|
||||||
|
{/* Recent Section */}
|
||||||
|
<div className="p-4 space-y-2">
|
||||||
|
<p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
||||||
|
Recentes
|
||||||
|
</p>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<div className="text-sm text-sidebar-foreground/70 hover:text-sidebar-foreground px-3 py-2 rounded cursor-pointer hover:bg-sidebar-accent/30 transition-colors">
|
||||||
|
Conversa anterior...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Settings */}
|
||||||
|
<div className="p-4 border-t border-sidebar-border">
|
||||||
|
<Button variant="ghost" className="w-full justify-start gap-2 text-sidebar-foreground">
|
||||||
|
<Settings className="w-4 h-4" />
|
||||||
|
Configurações
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<main className="flex-1 flex flex-col overflow-hidden">
|
||||||
|
{children}
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,222 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { ChatHeader } from "@/components/ChatHeader";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
|
import { Upload, Mic, Play, Download, Copy, Trash2 } from "lucide-react";
|
||||||
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
|
||||||
|
export const AudioView = () => {
|
||||||
|
const [textToSpeech, setTextToSpeech] = useState("");
|
||||||
|
const [isProcessing, setIsProcessing] = useState(false);
|
||||||
|
|
||||||
|
const handleGenerateAudio = () => {
|
||||||
|
setIsProcessing(true);
|
||||||
|
setTimeout(() => setIsProcessing(false), 2000);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col h-full">
|
||||||
|
<ChatHeader />
|
||||||
|
|
||||||
|
<ScrollArea className="flex-1">
|
||||||
|
<div className="max-w-4xl mx-auto p-6">
|
||||||
|
<Tabs defaultValue="transcription" className="space-y-6">
|
||||||
|
<TabsList className="grid w-full grid-cols-2 glass-effect">
|
||||||
|
<TabsTrigger value="transcription">
|
||||||
|
Transcrição de Áudio
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger value="generation">Geração de Voz</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
{/* Transcription Tab */}
|
||||||
|
<TabsContent value="transcription" className="space-y-6">
|
||||||
|
<div className="glass-effect rounded-xl p-6 space-y-4">
|
||||||
|
<h3 className="text-lg font-semibold">
|
||||||
|
Converter Áudio em Texto
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Envie um arquivo de áudio (.mp3, .wav) para transcrição
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="border-2 border-dashed border-border rounded-xl p-12 text-center space-y-4 hover:border-primary/50 transition-colors cursor-pointer">
|
||||||
|
<div className="w-16 h-16 mx-auto rounded-full bg-primary/10 flex items-center justify-center">
|
||||||
|
<Upload className="w-8 h-8 text-primary" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="font-medium">
|
||||||
|
Clique para selecionar ou arraste o arquivo
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-muted-foreground mt-1">
|
||||||
|
Suporta MP3, WAV (máx. 25MB)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Button variant="outline" className="gap-2">
|
||||||
|
<Upload className="w-4 h-4" />
|
||||||
|
Selecionar Arquivo
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sample Transcription Result */}
|
||||||
|
<div className="glass-effect rounded-xl p-6 space-y-3">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h4 className="font-semibold">audio_sample.mp3</h4>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Transcrito há 5 minutos
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button size="sm" variant="outline" className="gap-1">
|
||||||
|
<Copy className="w-3 h-3" />
|
||||||
|
Copiar
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" variant="outline" className="gap-1">
|
||||||
|
<Download className="w-3 h-3" />
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" variant="destructive" className="gap-1">
|
||||||
|
<Trash2 className="w-3 h-3" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="bg-muted/30 rounded-lg p-4">
|
||||||
|
<p className="text-sm leading-relaxed">
|
||||||
|
Esta é uma transcrição de exemplo do áudio enviado. O
|
||||||
|
sistema utilizará modelos de IA avançados para converter
|
||||||
|
sua fala em texto com alta precisão.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
{/* Generation Tab */}
|
||||||
|
<TabsContent value="generation" className="space-y-6">
|
||||||
|
<div className="glass-effect rounded-xl p-6 space-y-4">
|
||||||
|
<h3 className="text-lg font-semibold">
|
||||||
|
Converter Texto em Voz
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium">
|
||||||
|
Digite o texto para converter
|
||||||
|
</label>
|
||||||
|
<Textarea
|
||||||
|
value={textToSpeech}
|
||||||
|
onChange={(e) => setTextToSpeech(e.target.value)}
|
||||||
|
placeholder="Digite o texto que deseja converter em fala..."
|
||||||
|
className="min-h-[120px] resize-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4 items-end">
|
||||||
|
<div className="flex-1 space-y-2">
|
||||||
|
<label className="text-sm font-medium">Tipo de Voz</label>
|
||||||
|
<Select defaultValue="neutral">
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="neutral">Neutra</SelectItem>
|
||||||
|
<SelectItem value="masculine">Masculina</SelectItem>
|
||||||
|
<SelectItem value="feminine">Feminina</SelectItem>
|
||||||
|
<SelectItem value="child">Infantil</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
onClick={handleGenerateAudio}
|
||||||
|
disabled={!textToSpeech.trim() || isProcessing}
|
||||||
|
className="gap-2 cyber-glow"
|
||||||
|
size="lg"
|
||||||
|
>
|
||||||
|
<Mic className="w-4 h-4" />
|
||||||
|
{isProcessing ? "Gerando..." : "Gerar Áudio"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isProcessing && (
|
||||||
|
<div className="bg-muted/30 rounded-lg p-6 flex items-center justify-center gap-3">
|
||||||
|
<div className="w-8 h-8 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
|
||||||
|
<p className="text-sm font-medium">
|
||||||
|
Processando áudio...
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Sample Generated Audio */}
|
||||||
|
<div className="glass-effect rounded-xl p-6 space-y-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h4 className="font-semibold">Áudio Gerado</h4>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Há 2 minutos · Voz Neutra
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button size="sm" variant="outline" className="gap-1">
|
||||||
|
<Download className="w-3 h-3" />
|
||||||
|
Baixar
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" variant="destructive" className="gap-1">
|
||||||
|
<Trash2 className="w-3 h-3" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-muted/30 rounded-lg p-4 flex items-center gap-4">
|
||||||
|
<Button size="icon" variant="outline" className="rounded-full">
|
||||||
|
<Play className="w-5 h-5" />
|
||||||
|
</Button>
|
||||||
|
<div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
|
||||||
|
<div className="h-full w-1/3 bg-primary rounded-full" />
|
||||||
|
</div>
|
||||||
|
<span className="text-sm text-muted-foreground tabular-nums">
|
||||||
|
0:12 / 0:35
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
|
||||||
|
{/* History Section */}
|
||||||
|
<div className="mt-8 space-y-4">
|
||||||
|
<h3 className="text-lg font-semibold">Histórico Recente</h3>
|
||||||
|
<div className="grid gap-3">
|
||||||
|
{[1, 2].map((i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className="glass-effect rounded-lg p-4 flex items-center justify-between hover:bg-muted/20 transition-colors"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||||
|
<Mic className="w-5 h-5 text-primary" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-sm">audio_file_{i}.mp3</p>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Processado há {i} hora{i > 1 ? "s" : ""}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button size="icon" variant="ghost">
|
||||||
|
<Play className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,70 @@
|
|||||||
|
import { Send, Paperclip, Mic } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
interface ChatInputProps {
|
||||||
|
onSendMessage: (message: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ChatInput = ({ onSendMessage }: ChatInputProps) => {
|
||||||
|
const [message, setMessage] = useState("");
|
||||||
|
|
||||||
|
const handleSend = () => {
|
||||||
|
if (message.trim()) {
|
||||||
|
onSendMessage(message);
|
||||||
|
setMessage("");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||||
|
if (e.key === "Enter" && !e.shiftKey) {
|
||||||
|
e.preventDefault();
|
||||||
|
handleSend();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="border-t border-border bg-card/50 backdrop-blur-sm p-4">
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
<div className="relative glass-effect rounded-xl p-1">
|
||||||
|
<Textarea
|
||||||
|
value={message}
|
||||||
|
onChange={(e) => setMessage(e.target.value)}
|
||||||
|
onKeyDown={handleKeyDown}
|
||||||
|
placeholder="Digite sua mensagem..."
|
||||||
|
className="min-h-[60px] max-h-[200px] resize-none border-0 bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 pr-24"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="absolute right-2 bottom-2 flex items-center gap-1">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="h-8 w-8 text-muted-foreground hover:text-foreground"
|
||||||
|
>
|
||||||
|
<Paperclip className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="h-8 w-8 text-muted-foreground hover:text-foreground"
|
||||||
|
>
|
||||||
|
<Mic className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={handleSend}
|
||||||
|
size="icon"
|
||||||
|
className="h-8 w-8 cyber-glow"
|
||||||
|
disabled={!message.trim()}
|
||||||
|
>
|
||||||
|
<Send className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted-foreground text-center mt-2">
|
||||||
|
Pressione Enter para enviar, Shift + Enter para nova linha
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,72 @@
|
|||||||
|
import { Bot, User, Copy, Edit, Trash2 } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
interface ChatMessageProps {
|
||||||
|
role: "user" | "assistant";
|
||||||
|
content: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ChatMessage = ({ role, content }: ChatMessageProps) => {
|
||||||
|
const [showActions, setShowActions] = useState(false);
|
||||||
|
const isAssistant = role === "assistant";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`flex gap-4 py-6 px-6 group ${
|
||||||
|
isAssistant ? "bg-muted/30" : ""
|
||||||
|
} hover:bg-muted/20 transition-colors`}
|
||||||
|
onMouseEnter={() => setShowActions(true)}
|
||||||
|
onMouseLeave={() => setShowActions(false)}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${
|
||||||
|
isAssistant
|
||||||
|
? "bg-gradient-to-br from-primary to-secondary"
|
||||||
|
: "bg-accent/20 border border-accent"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{isAssistant ? (
|
||||||
|
<Bot className="w-5 h-5 text-primary-foreground" />
|
||||||
|
) : (
|
||||||
|
<User className="w-5 h-5 text-accent" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 space-y-2">
|
||||||
|
<div className="prose prose-invert max-w-none">
|
||||||
|
<p className="text-foreground leading-relaxed">{content}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{showActions && (
|
||||||
|
<div className="flex gap-1 animate-fade-in">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-7 px-2 text-muted-foreground hover:text-foreground"
|
||||||
|
>
|
||||||
|
<Copy className="w-3 h-3 mr-1" />
|
||||||
|
Copiar
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-7 px-2 text-muted-foreground hover:text-foreground"
|
||||||
|
>
|
||||||
|
<Edit className="w-3 h-3 mr-1" />
|
||||||
|
Editar
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-7 px-2 text-muted-foreground hover:text-destructive"
|
||||||
|
>
|
||||||
|
<Trash2 className="w-3 h-3 mr-1" />
|
||||||
|
Excluir
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,79 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { ChatHeader } from "@/components/ChatHeader";
|
||||||
|
import { ChatMessage } from "./ChatMessage";
|
||||||
|
import { ChatInput } from "./ChatInput";
|
||||||
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||||
|
|
||||||
|
interface Message {
|
||||||
|
id: string;
|
||||||
|
role: "user" | "assistant";
|
||||||
|
content: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ChatView = () => {
|
||||||
|
const [messages, setMessages] = useState<Message[]>([
|
||||||
|
{
|
||||||
|
id: "1",
|
||||||
|
role: "assistant",
|
||||||
|
content: "Olá! Sou o assistente HGTX Codex. Como posso ajudá-lo hoje?",
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
|
|
||||||
|
const handleSendMessage = (content: string) => {
|
||||||
|
const newMessage: Message = {
|
||||||
|
id: Date.now().toString(),
|
||||||
|
role: "user",
|
||||||
|
content,
|
||||||
|
};
|
||||||
|
|
||||||
|
setMessages((prev) => [...prev, newMessage]);
|
||||||
|
setIsLoading(true);
|
||||||
|
|
||||||
|
// Simulate AI response
|
||||||
|
setTimeout(() => {
|
||||||
|
const aiResponse: Message = {
|
||||||
|
id: (Date.now() + 1).toString(),
|
||||||
|
role: "assistant",
|
||||||
|
content:
|
||||||
|
"Esta é uma resposta simulada. Em breve, estarei conectado a modelos de IA reais para fornecer respostas inteligentes e úteis.",
|
||||||
|
};
|
||||||
|
setMessages((prev) => [...prev, aiResponse]);
|
||||||
|
setIsLoading(false);
|
||||||
|
}, 1500);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col h-full">
|
||||||
|
<ChatHeader />
|
||||||
|
|
||||||
|
<ScrollArea className="flex-1">
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
{messages.map((message) => (
|
||||||
|
<ChatMessage
|
||||||
|
key={message.id}
|
||||||
|
role={message.role}
|
||||||
|
content={message.content}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{isLoading && (
|
||||||
|
<div className="flex gap-4 py-6 px-6 bg-muted/30">
|
||||||
|
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
|
||||||
|
<div className="w-5 h-5 border-2 border-primary-foreground border-t-transparent rounded-full animate-spin" />
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-1 items-center">
|
||||||
|
<div className="w-2 h-2 bg-primary rounded-full animate-bounce" />
|
||||||
|
<div className="w-2 h-2 bg-primary rounded-full animate-bounce delay-100" />
|
||||||
|
<div className="w-2 h-2 bg-primary rounded-full animate-bounce delay-200" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
|
||||||
|
<ChatInput onSendMessage={handleSendMessage} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,146 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { ChatHeader } from "@/components/ChatHeader";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
|
import { Download, Copy, Trash2, Sparkles } from "lucide-react";
|
||||||
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
|
||||||
|
export const ImageView = () => {
|
||||||
|
const [prompt, setPrompt] = useState("");
|
||||||
|
const [isGenerating, setIsGenerating] = useState(false);
|
||||||
|
const [images, setImages] = useState<string[]>([]);
|
||||||
|
|
||||||
|
const handleGenerate = () => {
|
||||||
|
setIsGenerating(true);
|
||||||
|
// Simulate image generation
|
||||||
|
setTimeout(() => {
|
||||||
|
setImages((prev) => [
|
||||||
|
"https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=512&h=512&fit=crop",
|
||||||
|
...prev,
|
||||||
|
]);
|
||||||
|
setIsGenerating(false);
|
||||||
|
}, 3000);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col h-full">
|
||||||
|
<ChatHeader />
|
||||||
|
|
||||||
|
<ScrollArea className="flex-1">
|
||||||
|
<div className="max-w-5xl mx-auto p-6 space-y-6">
|
||||||
|
{/* Generation Form */}
|
||||||
|
<div className="glass-effect rounded-xl p-6 space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm font-medium text-foreground">
|
||||||
|
Descreva a imagem
|
||||||
|
</label>
|
||||||
|
<Textarea
|
||||||
|
value={prompt}
|
||||||
|
onChange={(e) => setPrompt(e.target.value)}
|
||||||
|
placeholder="Descreva a imagem que deseja criar..."
|
||||||
|
className="min-h-[100px] resize-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-4 items-end">
|
||||||
|
<div className="flex-1 space-y-2">
|
||||||
|
<label className="text-sm font-medium text-foreground">
|
||||||
|
Tamanho
|
||||||
|
</label>
|
||||||
|
<Select defaultValue="1024x1024">
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="512x512">512x512</SelectItem>
|
||||||
|
<SelectItem value="1024x1024">1024x1024</SelectItem>
|
||||||
|
<SelectItem value="1792x1024">1792x1024 (Wide)</SelectItem>
|
||||||
|
<SelectItem value="1024x1792">1024x1792 (Tall)</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
onClick={handleGenerate}
|
||||||
|
disabled={!prompt.trim() || isGenerating}
|
||||||
|
className="gap-2 cyber-glow"
|
||||||
|
size="lg"
|
||||||
|
>
|
||||||
|
<Sparkles className="w-4 h-4" />
|
||||||
|
{isGenerating ? "Gerando..." : "Gerar Imagem"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Loading State */}
|
||||||
|
{isGenerating && (
|
||||||
|
<div className="glass-effect rounded-xl p-12 flex flex-col items-center justify-center space-y-4 animate-fade-in">
|
||||||
|
<div className="relative">
|
||||||
|
<div className="w-24 h-24 rounded-full border-4 border-primary/20 border-t-primary animate-spin" />
|
||||||
|
<div className="absolute inset-0 flex items-center justify-center">
|
||||||
|
<Sparkles className="w-8 h-8 text-primary animate-pulse-glow" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-lg font-medium gradient-text">
|
||||||
|
Gerando sua imagem...
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Isso pode levar alguns segundos
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Generated Images Grid */}
|
||||||
|
{images.length > 0 && (
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-semibold mb-4">Imagens Geradas</h3>
|
||||||
|
<div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
{images.map((image, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="group relative glass-effect rounded-xl overflow-hidden aspect-square animate-fade-in"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={image}
|
||||||
|
alt={`Generated ${index}`}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/0 to-black/0 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 p-3 flex gap-2">
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="secondary"
|
||||||
|
className="flex-1 gap-1"
|
||||||
|
>
|
||||||
|
<Download className="w-3 h-3" />
|
||||||
|
Baixar
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" variant="secondary" className="gap-1">
|
||||||
|
<Copy className="w-3 h-3" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="destructive"
|
||||||
|
className="gap-1"
|
||||||
|
>
|
||||||
|
<Trash2 className="w-3 h-3" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</ScrollArea>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -5,14 +5,14 @@ import { cva, type VariantProps } from "class-variance-authority";
|
|||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
const buttonVariants = cva(
|
const buttonVariants = cva(
|
||||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-lg hover:shadow-primary/50",
|
||||||
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
||||||
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
|
outline: "border border-border bg-background hover:bg-accent hover:text-accent-foreground",
|
||||||
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-md hover:shadow-secondary/40",
|
||||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||||
link: "text-primary underline-offset-4 hover:underline",
|
link: "text-primary underline-offset-4 hover:underline",
|
||||||
},
|
},
|
||||||
|
|||||||
+79
-76
@@ -1,96 +1,61 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
|
||||||
|
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
/* Definition of the design system. All colors, gradients, fonts, etc should be defined here.
|
|
||||||
All colors MUST be HSL.
|
|
||||||
*/
|
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
:root {
|
:root {
|
||||||
--background: 0 0% 100%;
|
/* HGTX Codex - Cyberpunk Dark Theme */
|
||||||
--foreground: 222.2 84% 4.9%;
|
--background: 222 47% 5%;
|
||||||
|
--foreground: 200 100% 95%;
|
||||||
|
|
||||||
--card: 0 0% 100%;
|
--card: 222 40% 8%;
|
||||||
--card-foreground: 222.2 84% 4.9%;
|
--card-foreground: 200 100% 95%;
|
||||||
|
|
||||||
--popover: 0 0% 100%;
|
--popover: 222 45% 10%;
|
||||||
--popover-foreground: 222.2 84% 4.9%;
|
--popover-foreground: 200 100% 95%;
|
||||||
|
|
||||||
--primary: 222.2 47.4% 11.2%;
|
--primary: 190 100% 50%;
|
||||||
--primary-foreground: 210 40% 98%;
|
--primary-foreground: 222 47% 5%;
|
||||||
|
|
||||||
--secondary: 210 40% 96.1%;
|
--secondary: 210 100% 50%;
|
||||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
--secondary-foreground: 222 47% 5%;
|
||||||
|
|
||||||
--muted: 210 40% 96.1%;
|
--muted: 222 30% 15%;
|
||||||
--muted-foreground: 215.4 16.3% 46.9%;
|
--muted-foreground: 200 20% 65%;
|
||||||
|
|
||||||
--accent: 210 40% 96.1%;
|
--accent: 190 100% 60%;
|
||||||
--accent-foreground: 222.2 47.4% 11.2%;
|
--accent-foreground: 222 47% 5%;
|
||||||
|
|
||||||
--destructive: 0 84.2% 60.2%;
|
--destructive: 0 84% 60%;
|
||||||
--destructive-foreground: 210 40% 98%;
|
--destructive-foreground: 200 100% 95%;
|
||||||
|
|
||||||
--border: 214.3 31.8% 91.4%;
|
--border: 222 30% 18%;
|
||||||
--input: 214.3 31.8% 91.4%;
|
--input: 222 30% 18%;
|
||||||
--ring: 222.2 84% 4.9%;
|
--ring: 190 100% 50%;
|
||||||
|
|
||||||
--radius: 0.5rem;
|
--radius: 0.75rem;
|
||||||
|
|
||||||
--sidebar-background: 0 0% 98%;
|
/* Sidebar specific */
|
||||||
|
--sidebar-background: 222 45% 7%;
|
||||||
|
--sidebar-foreground: 200 100% 90%;
|
||||||
|
--sidebar-primary: 190 100% 50%;
|
||||||
|
--sidebar-primary-foreground: 222 47% 5%;
|
||||||
|
--sidebar-accent: 222 35% 12%;
|
||||||
|
--sidebar-accent-foreground: 190 100% 60%;
|
||||||
|
--sidebar-border: 222 30% 15%;
|
||||||
|
--sidebar-ring: 190 100% 50%;
|
||||||
|
|
||||||
--sidebar-foreground: 240 5.3% 26.1%;
|
/* Custom gradients */
|
||||||
|
--gradient-cyber: linear-gradient(135deg, hsl(190 100% 50%) 0%, hsl(210 100% 50%) 100%);
|
||||||
|
--gradient-subtle: linear-gradient(180deg, hsl(222 45% 8%) 0%, hsl(222 47% 5%) 100%);
|
||||||
|
--glow-cyan: 0 0 40px hsl(190 100% 50% / 0.3);
|
||||||
|
--glow-blue: 0 0 30px hsl(210 100% 50% / 0.25);
|
||||||
|
|
||||||
--sidebar-primary: 240 5.9% 10%;
|
/* Animation speeds */
|
||||||
|
--transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
--sidebar-primary-foreground: 0 0% 98%;
|
--transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||||
|
|
||||||
--sidebar-accent: 240 4.8% 95.9%;
|
|
||||||
|
|
||||||
--sidebar-accent-foreground: 240 5.9% 10%;
|
|
||||||
|
|
||||||
--sidebar-border: 220 13% 91%;
|
|
||||||
|
|
||||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark {
|
|
||||||
--background: 222.2 84% 4.9%;
|
|
||||||
--foreground: 210 40% 98%;
|
|
||||||
|
|
||||||
--card: 222.2 84% 4.9%;
|
|
||||||
--card-foreground: 210 40% 98%;
|
|
||||||
|
|
||||||
--popover: 222.2 84% 4.9%;
|
|
||||||
--popover-foreground: 210 40% 98%;
|
|
||||||
|
|
||||||
--primary: 210 40% 98%;
|
|
||||||
--primary-foreground: 222.2 47.4% 11.2%;
|
|
||||||
|
|
||||||
--secondary: 217.2 32.6% 17.5%;
|
|
||||||
--secondary-foreground: 210 40% 98%;
|
|
||||||
|
|
||||||
--muted: 217.2 32.6% 17.5%;
|
|
||||||
--muted-foreground: 215 20.2% 65.1%;
|
|
||||||
|
|
||||||
--accent: 217.2 32.6% 17.5%;
|
|
||||||
--accent-foreground: 210 40% 98%;
|
|
||||||
|
|
||||||
--destructive: 0 62.8% 30.6%;
|
|
||||||
--destructive-foreground: 210 40% 98%;
|
|
||||||
|
|
||||||
--border: 217.2 32.6% 17.5%;
|
|
||||||
--input: 217.2 32.6% 17.5%;
|
|
||||||
--ring: 212.7 26.8% 83.9%;
|
|
||||||
--sidebar-background: 240 5.9% 10%;
|
|
||||||
--sidebar-foreground: 240 4.8% 95.9%;
|
|
||||||
--sidebar-primary: 224.3 76.3% 48%;
|
|
||||||
--sidebar-primary-foreground: 0 0% 100%;
|
|
||||||
--sidebar-accent: 240 3.7% 15.9%;
|
|
||||||
--sidebar-accent-foreground: 240 4.8% 95.9%;
|
|
||||||
--sidebar-border: 240 3.7% 15.9%;
|
|
||||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -100,6 +65,44 @@ All colors MUST be HSL.
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@apply bg-background text-foreground;
|
@apply bg-background text-foreground font-sans antialiased;
|
||||||
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scrollbar styling */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
@apply bg-background;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
@apply bg-muted rounded-full;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
@apply bg-primary/50;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
.glass-effect {
|
||||||
|
@apply bg-card/40 backdrop-blur-xl border border-border/50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cyber-glow {
|
||||||
|
box-shadow: var(--glow-cyan);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cyber-border {
|
||||||
|
@apply border border-primary/30 rounded-lg;
|
||||||
|
box-shadow: 0 0 20px hsl(190 100% 50% / 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.gradient-text {
|
||||||
|
@apply bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+12
-7
@@ -1,13 +1,18 @@
|
|||||||
// Update this page (the content is just a fallback if you fail to update the page)
|
import { useState } from "react";
|
||||||
|
import { Layout } from "@/components/Layout";
|
||||||
|
import { ChatView } from "@/components/chat/ChatView";
|
||||||
|
import { ImageView } from "@/components/images/ImageView";
|
||||||
|
import { AudioView } from "@/components/audio/AudioView";
|
||||||
|
|
||||||
const Index = () => {
|
const Index = () => {
|
||||||
|
const [activeView, setActiveView] = useState<"chat" | "images" | "audio">("chat");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex min-h-screen items-center justify-center bg-background">
|
<Layout activeTab={activeView} onTabChange={setActiveView}>
|
||||||
<div className="text-center">
|
{activeView === "chat" && <ChatView />}
|
||||||
<h1 className="mb-4 text-4xl font-bold">Welcome to Your Blank App</h1>
|
{activeView === "images" && <ImageView />}
|
||||||
<p className="text-xl text-muted-foreground">Start building your amazing project here!</p>
|
{activeView === "audio" && <AudioView />}
|
||||||
</div>
|
</Layout>
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
+26
-10
@@ -13,6 +13,9 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
extend: {
|
extend: {
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
||||||
|
},
|
||||||
colors: {
|
colors: {
|
||||||
border: "hsl(var(--border))",
|
border: "hsl(var(--border))",
|
||||||
input: "hsl(var(--input))",
|
input: "hsl(var(--input))",
|
||||||
@@ -65,25 +68,38 @@ export default {
|
|||||||
},
|
},
|
||||||
keyframes: {
|
keyframes: {
|
||||||
"accordion-down": {
|
"accordion-down": {
|
||||||
from: {
|
from: { height: "0" },
|
||||||
height: "0",
|
to: { height: "var(--radix-accordion-content-height)" },
|
||||||
},
|
|
||||||
to: {
|
|
||||||
height: "var(--radix-accordion-content-height)",
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
"accordion-up": {
|
"accordion-up": {
|
||||||
from: {
|
from: { height: "var(--radix-accordion-content-height)" },
|
||||||
height: "var(--radix-accordion-content-height)",
|
to: { height: "0" },
|
||||||
},
|
},
|
||||||
to: {
|
"pulse-glow": {
|
||||||
height: "0",
|
"0%, 100%": {
|
||||||
|
boxShadow: "0 0 20px hsl(190 100% 50% / 0.3)",
|
||||||
|
transform: "scale(1)"
|
||||||
},
|
},
|
||||||
|
"50%": {
|
||||||
|
boxShadow: "0 0 40px hsl(190 100% 50% / 0.5)",
|
||||||
|
transform: "scale(1.02)"
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"slide-in-right": {
|
||||||
|
"0%": { transform: "translateX(100%)", opacity: "0" },
|
||||||
|
"100%": { transform: "translateX(0)", opacity: "1" },
|
||||||
|
},
|
||||||
|
"fade-in": {
|
||||||
|
"0%": { opacity: "0", transform: "translateY(10px)" },
|
||||||
|
"100%": { opacity: "1", transform: "translateY(0)" },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
animation: {
|
animation: {
|
||||||
"accordion-down": "accordion-down 0.2s ease-out",
|
"accordion-down": "accordion-down 0.2s ease-out",
|
||||||
"accordion-up": "accordion-up 0.2s ease-out",
|
"accordion-up": "accordion-up 0.2s ease-out",
|
||||||
|
"pulse-glow": "pulse-glow 2s ease-in-out infinite",
|
||||||
|
"slide-in-right": "slide-in-right 0.3s ease-out",
|
||||||
|
"fade-in": "fade-in 0.3s ease-out",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user