xertica-ui 1.0.0

package/components/AudioPlayer.tsx

@@ -0,0 +1,203 @@
+import React, { useState, useEffect } from 'react';
+import { 
+  PlayCircle, 
+  PauseCircle, 
+  Volume2, 
+  RotateCcw, 
+  Gauge, 
+  Info, 
+  RefreshCw, 
+  Download, 
+  X,
+  ExternalLink,
+  VolumeX,
+  Radio
+} from 'lucide-react';
+import { Button } from './ui/button';
+import { Slider } from './ui/slider';
+import { 
+  Tooltip, 
+  TooltipContent, 
+  TooltipProvider, 
+  TooltipTrigger 
+} from './ui/tooltip';
+import { cn } from './ui/utils';
+
+interface AudioPlayerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  sidebarExpanded: boolean;
+  title?: string;
+  subtitle?: string;
+  duration?: number; // in seconds
+  currentTime?: number;
+}
+
+export function AudioPlayer({ 
+  isOpen, 
+  onClose, 
+  sidebarExpanded,
+  title = "Processo 50002396220258210104",
+  subtitle = "Podcast atualizado até Evento 26",
+  duration = 1200, // 20:00
+  currentTime = 0
+}: AudioPlayerProps) {
+  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 {
+      const timer = setTimeout(() => setIsVisible(false), 300);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen]);
+
+  if (!isVisible) 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);
+
+  return (
+    <div 
+      className={cn(
+        "fixed bottom-0 right-0 z-50 border-t border-border backdrop-blur-md transition-all duration-300 ease-in-out",
+        "bg-card/95 text-card-foreground shadow-[var(--elevation-sm)]", 
+        sidebarExpanded ? "left-0 md:left-64" : "left-0 md:left-20",
+        isOpen ? "translate-y-0 opacity-100" : "translate-y-full opacity-0"
+      )}
+    >
+      <div className="h-[72px] px-4 md:px-6 flex 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="font-medium text-sm md:text-base truncate" title={title}>
+              {title}
+            </h4>
+          </div>
+          <div className="flex items-center gap-1 text-xs text-muted-foreground">
+            <span className="truncate">{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"
+          >
+            {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"
+             />
+             <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">
+                 {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"
+               />
+            </div>
+
+            <div className="flex items-center gap-1">
+              <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>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>Velocidade (1.0x)</TooltipContent>
+                 </Tooltip>
+              </TooltipProvider>
+
+              <TooltipProvider>
+                 <Tooltip>
+                   <TooltipTrigger asChild>
+                     <Button variant="ghost" size="icon" className="text-[var(--chart-3)] hover:text-[var(--chart-3)]/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] bg-popover text-popover-foreground">
+                     <p>Identificamos a entrada de novos eventos neste processo desde a última atualização deste podcast.</p>
+                   </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">
+                       <RefreshCw className="w-4 h-4" />
+                     </Button>
+                   </TooltipTrigger>
+                   <TooltipContent>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 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>
+    </div>
+  );
+}

package/components/CodeBlock.tsx

@@ -0,0 +1,242 @@
+import React, { useState } from 'react';
+import { Check, Copy } from 'lucide-react';
+import { Button } from './ui/button';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+
+// Elegant custom theme inspired by Xertica.ai design system
+const elegantTheme = {
+  'code[class*="language-"]': {
+    color: 'var(--foreground)',
+    fontFamily: 'var(--font-mono)',
+    fontSize: '0.875rem',
+    textAlign: 'left' as const,
+    whiteSpace: 'pre' as const,
+    wordSpacing: 'normal',
+    wordBreak: 'normal',
+    lineHeight: '1.6',
+    tabSize: 2,
+    hyphens: 'none' as const,
+  },
+  'pre[class*="language-"]': {
+    color: 'var(--foreground)',
+    fontFamily: 'var(--font-mono)',
+    fontSize: '0.875rem',
+    textAlign: 'left' as const,
+    whiteSpace: 'pre' as const,
+    wordSpacing: 'normal',
+    wordBreak: 'normal',
+    lineHeight: '1.6',
+    tabSize: 2,
+    hyphens: 'none' as const,
+    padding: '1rem',
+    margin: 0,
+    overflow: 'auto',
+    background: 'transparent',
+  },
+  'comment': {
+    color: 'var(--muted-foreground)',
+    fontStyle: 'italic',
+  },
+  'prolog': {
+    color: 'var(--muted-foreground)',
+  },
+  'doctype': {
+    color: 'var(--muted-foreground)',
+  },
+  'cdata': {
+    color: 'var(--muted-foreground)',
+  },
+  'punctuation': {
+    color: 'var(--muted-foreground)',
+  },
+  'property': {
+    color: 'var(--chart-4)',
+  },
+  'tag': {
+    color: 'var(--chart-1)',
+  },
+  'boolean': {
+    color: 'var(--chart-5)',
+  },
+  'number': {
+    color: 'var(--chart-5)',
+  },
+  'constant': {
+    color: 'var(--chart-5)',
+  },
+  'symbol': {
+    color: 'var(--chart-5)',
+  },
+  'deleted': {
+    color: 'var(--chart-5)',
+  },
+  'selector': {
+    color: 'var(--chart-2)',
+  },
+  'attr-name': {
+    color: 'var(--chart-4)',
+  },
+  'string': {
+    color: 'var(--chart-2)',
+  },
+  'char': {
+    color: 'var(--chart-2)',
+  },
+  'builtin': {
+    color: 'var(--chart-4)',
+  },
+  'inserted': {
+    color: 'var(--chart-2)',
+  },
+  'operator': {
+    color: 'var(--primary)',
+  },
+  'entity': {
+    color: 'var(--chart-4)',
+  },
+  'url': {
+    color: 'var(--chart-1)',
+  },
+  '.language-css .token.string': {
+    color: 'var(--chart-2)',
+  },
+  '.style .token.string': {
+    color: 'var(--chart-2)',
+  },
+  'atrule': {
+    color: 'var(--chart-3)',
+  },
+  'attr-value': {
+    color: 'var(--chart-2)',
+  },
+  'keyword': {
+    color: 'var(--chart-3)',
+  },
+  'function': {
+    color: 'var(--chart-1)',
+  },
+  'class-name': {
+    color: 'var(--chart-4)',
+  },
+  'regex': {
+    color: 'var(--chart-5)',
+  },
+  'important': {
+    color: 'var(--chart-5)',
+    fontWeight: 'bold',
+  },
+  'variable': {
+    color: 'var(--chart-5)',
+  },
+};
+
+interface CodeBlockProps {
+  code: string;
+  language?: 'typescript' | 'tsx' | 'css' | 'bash' | 'jsx';
+  filename?: string;
+  showLineNumbers?: boolean;
+}
+
+export const CodeBlock = ({ 
+  code, 
+  language = 'tsx', 
+  filename,
+  showLineNumbers = false 
+}: CodeBlockProps) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      // Try modern Clipboard API first (with permission check)
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        try {
+          await navigator.clipboard.writeText(code);
+        } catch (clipboardError: any) {
+          // If clipboard API fails due to permissions, fall back to execCommand
+          if (clipboardError.name === 'NotAllowedError' || clipboardError.message.includes('permissions policy')) {
+            throw new Error('Clipboard permission denied, falling back');
+          }
+          throw clipboardError;
+        }
+      } else {
+        throw new Error('Clipboard API not available');
+      }
+      
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      // Fallback for browsers that don't support Clipboard API or when permissions are denied
+      try {
+        const textArea = document.createElement('textarea');
+        textArea.value = code;
+        textArea.style.position = 'fixed';
+        textArea.style.left = '-999999px';
+        textArea.style.top = '-999999px';
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+        
+        const successful = document.execCommand('copy');
+        document.body.removeChild(textArea);
+        
+        if (successful) {
+          setCopied(true);
+          setTimeout(() => setCopied(false), 2000);
+        } else {
+          console.error('Failed to copy text: execCommand returned false');
+        }
+      } catch (fallbackErr) {
+        console.error('All copy methods failed:', fallbackErr);
+      }
+    }
+  };
+
+  // Ensure code is a string
+  const codeString = typeof code === 'string' ? code : String(code || '');
+
+  return (
+    <div className="relative group rounded-[var(--radius)] border border-border overflow-hidden bg-muted/30">
+      {filename && (
+        <div className="flex items-center justify-between px-4 py-2 bg-muted border-b border-border">
+          <span className="text-xs text-muted-foreground font-mono">{filename}</span>
+          <span className="text-xs text-muted-foreground uppercase">{language}</span>
+        </div>
+      )}
+      
+      <div className="relative">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity z-10 bg-background/80 hover:bg-background"
+          onClick={handleCopy}
+        >
+          {copied ? (
+            <Check className="w-4 h-4 text-[var(--toast-success-icon)]" />
+          ) : (
+            <Copy className="w-4 h-4" />
+          )}
+        </Button>
+
+        <div className="overflow-x-auto w-full max-w-full">
+          <SyntaxHighlighter
+            language={language}
+            style={elegantTheme}
+            showLineNumbers={showLineNumbers}
+            wrapLines={true}
+            customStyle={{
+              margin: 0,
+              padding: '1rem',
+              background: 'transparent',
+              fontSize: 'inherit',
+            }}
+            codeTagProps={{
+              className: "text-[length:inherit]"
+            }}
+          >
+            {codeString}
+          </SyntaxHighlighter>
+        </div>
+      </div>
+    </div>
+  );
+};