"use client"; import { useState } from "react"; import { motion } from "framer-motion"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { nightOwl } from "react-syntax-highlighter/dist/esm/styles/prism"; import { Check, Copy, File, FileCode, FileText } from "lucide-react"; const Icons = { check: Check, copy: Copy, file: File, javascript: FileCode, typescript: FileCode, css: FileText, }; interface FileBlock { title: string; code: string; language?: string; } interface CodeBlockProps { files: FileBlock[]; defaultTitle?: string; className?: string; } const lightTheme = { ...nightOwl, 'pre[class*="language-"]': { ...nightOwl['pre[class*="language-"]'], background: "transparent", }, 'code[class*="language-"]': { ...nightOwl['code[class*="language-"]'], color: "hsl(var(--foreground))", }, comment: { color: "hsl(var(--muted-foreground))", fontStyle: "italic", }, punctuation: { color: "hsl(var(--foreground))", }, property: { color: "#0550FF", }, string: { color: "#14532D", }, keyword: { color: "#9333EA", }, function: { color: "#E45C3A", }, boolean: { color: "#9333EA", }, number: { color: "#9333EA", }, operator: { color: "hsl(var(--foreground))", }, }; const darkTheme = { ...nightOwl, 'pre[class*="language-"]': { ...nightOwl['pre[class*="language-"]'], background: "transparent", }, }; export function CodeBlock({ files, defaultTitle, className }: CodeBlockProps) { const [activeTitle, setActiveTitle] = useState( defaultTitle || files[0]?.title ); const [copied, setCopied] = useState(false); const activeFile = files.find((file) => file.title === activeTitle); const code = activeFile?.code || ""; const language = activeFile?.language || getLanguageFromFileName(activeTitle || ""); const copyToClipboard = async (text: string) => { try { await navigator.clipboard.writeText(text); setCopied(true); setTimeout(() => setCopied(false), 2000); } catch (err) { console.error("Failed to copy:", err); } }; return (

{files.map(({ title }) => ( ))}

{code}

); } function getLanguageFromFileName(fileName: string): string { const ext = fileName.split(".").pop()?.toLowerCase(); const languageMap: Record = { js: "javascript", jsx: "jsx", ts: "typescript", tsx: "typescript", html: "html", css: "css", json: "json", }; return languageMap[ext || ""] || "javascript"; } function FileIcon({ fileName }: { fileName: string }) { const ext = fileName.split(".").pop()?.toLowerCase(); switch (ext) { case "js": case "jsx": return ; case "ts": case "tsx": return ; case "css": return ; default: return ; } }