"use client" import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react" import { Check, Copy } from "lucide-react" import { AnimatePresence, motion } from "motion/react" import { cn } from "@/lib/utils" interface CodeTab { label: string code: string language?: string } interface CodeBlockProps { tabs?: CodeTab[] code?: string language?: string className?: string } export function CodeBlock({ tabs, code, language = "bash", className, }: CodeBlockProps) { const [activeTab, setActiveTab] = useState(0) const [copied, setCopied] = useState(false) const [direction, setDirection] = useState(0) const preRef = useRef(null) const tabsContainerRef = useRef(null) const tabRefs = useRef<(HTMLButtonElement | null)[]>([]) const [hasOverflow, setHasOverflow] = useState(false) const [indicator, setIndicator] = useState<{ left: number width: number } | null>(null) const measureIndicator = useCallback(() => { const container = tabsContainerRef.current const activeEl = tabRefs.current[activeTab] if (!container || !activeEl) { return } const containerRect = container.getBoundingClientRect() const tabRect = activeEl.getBoundingClientRect() setIndicator({ left: tabRect.left - containerRect.left, width: tabRect.width, }) }, [activeTab]) const codeContent = useMemo(() => { if (tabs && tabs.length > 0) { return tabs } if (code) { return [{ label: language, code, language }] } return [] }, [tabs, code, language]) const currentCode = codeContent[activeTab]?.code || "" // Check overflow when tab changes or content updates // biome-ignore lint/correctness/useExhaustiveDependencies: activeTab is needed to recheck overflow when content changes useLayoutEffect(() => { const checkOverflow = () => { if (preRef.current) { const hasHorizontalOverflow = preRef.current.scrollWidth > preRef.current.clientWidth setHasOverflow(hasHorizontalOverflow) } } checkOverflow() const resizeObserver = new ResizeObserver(checkOverflow) if (preRef.current) { resizeObserver.observe(preRef.current) } return () => { resizeObserver.disconnect() } }, [activeTab]) useLayoutEffect(() => { measureIndicator() const resizeObserver = new ResizeObserver(measureIndicator) const container = tabsContainerRef.current if (container) { resizeObserver.observe(container) } for (const tab of tabRefs.current) { if (tab) { resizeObserver.observe(tab) } } return () => { resizeObserver.disconnect() } }, [measureIndicator]) const handleCopy = async () => { await navigator.clipboard.writeText(currentCode) setCopied(true) setTimeout(() => setCopied(false), 2000) } const handleTabChange = (index: number) => { setDirection(index > activeTab ? 1 : -1) setActiveTab(index) } if (codeContent.length === 0) return null return (

{/* Tab Bar */} {codeContent.length > 1 && (

{codeContent.map((tab, index) => ( ))} {indicator && (

)} {/* Code Content */}

{/* Copy Button */} {copied ? "Copied" : "Copy"}

 1 ? "rounded-b-2xl" : "rounded-2xl",
            hasOverflow ? "overflow-x-auto" : "overflow-x-hidden",
            hasOverflow && "scrollbar-thin scrollbar-thumb-rounded",
            hasOverflow &&
              "scrollbar-thumb-black/15 hover:scrollbar-thumb-black/20",
            hasOverflow &&
              "dark:scrollbar-thumb-white/20 dark:hover:scrollbar-thumb-white/25",
            hasOverflow && "[&::-webkit-scrollbar]:h-2",
            hasOverflow && "[&::-webkit-scrollbar-thumb]:rounded-full",
            hasOverflow && "[&::-webkit-scrollbar-thumb]:bg-black/15",
            hasOverflow && "[&::-webkit-scrollbar-thumb]:dark:bg-white/20",
            hasOverflow && "[&::-webkit-scrollbar-thumb:hover]:bg-black/20",
            hasOverflow &&
              "[&::-webkit-scrollbar-thumb:hover]:dark:bg-white/25",
            hasOverflow && "[&::-webkit-scrollbar-track]:bg-transparent"
          )}
        >
          
             0 ? 20 : -20,
                filter: "blur(4px)",
              }}
              animate={{
                opacity: 1,
                x: 0,
                filter: "blur(0px)",
              }}
              exit={{
                opacity: 0,
                x: direction > 0 ? -20 : 20,
                filter: "blur(4px)",
              }}
              transition={{
                duration: 0.15,
                ease: "easeOut",
              }}
              className="font-mono text-zinc-950 dark:text-zinc-50 block whitespace-pre"
            >
              {currentCode}

) }

Code Block

Instalação

Dependências