Code Block

1"use client";
2import type { BundledLanguage } from "shiki";
3import { codeToHtml } from "shiki";
4import { Copy01Icon, Tick01Icon, File01Icon } from "@hugeicons/core-free-icons";
5import { HugeiconsIcon } from "@hugeicons/react";
6import Image from "next/image";
7import {
8  useState,
9  useEffect,
10  useCallback,
11  createContext,
12  useContext,
13} from "react";
14import {
15  Tooltip,
16  TooltipTrigger,
17  TooltipContent,
18} from "@/components/ui/tooltip";
19import { cn } from "@/lib/utils";
20 
21type CodeBlockContextType = {
22  code: string;
23};
24 
25const CodeBlockContext = createContext<CodeBlockContextType>({
26  code: "",
27});
28 
29function useCodeBlockContext() {
30  const ctx = useContext(CodeBlockContext);
31  if (!ctx) {
32    throw Error("useCodeBlockContext must be used within a CodeBlock");
33  }
34  return ctx;
35}
36 
37type CodeBlockCopyButtonProps = {
38  className?: string;
39};
40 
41export function CodeBlockCopyButton({ className }: CodeBlockCopyButtonProps) {
42  const { code } = useCodeBlockContext();
43  const [copied, setCopied] = useState(false);
44 
45  const handleCopy = async () => {
46    await navigator.clipboard.writeText(code);
47    setCopied(true);
48    setTimeout(() => setCopied(false), 2000);
49  };
50 
51  return (
52    <Tooltip>
53      <TooltipTrigger
54        className={cn("p-1 rounded-md hover:bg-muted transition", className)}
55        onClick={handleCopy}
56      >
57        {copied ? (
58          <HugeiconsIcon icon={Tick01Icon} size={18} />
59        ) : (
60          <HugeiconsIcon icon={Copy01Icon} size={18} />
61        )}
62      </TooltipTrigger>
63      <TooltipContent>
64        <p>{copied ? "Copied!" : "Copy to Clipboard"}</p>
65      </TooltipContent>
66    </Tooltip>
67  );
68}
69 
70type CodeBlockTitleProps = {
71  children: string;
72  lang?: string;
73  className?: string;
74};
75 
76export function CodeBlockTitle({
77  children,
78  lang,
79  className,
80}: CodeBlockTitleProps) {
81  const iconUrl = lang
82    ? `https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/${lang}/${lang}-original.svg`
83    : null;
84 
85  return (
86    <div
87      className={cn(
88        "flex items-center gap-2.5 px-4 py-3 border-b bg-muted/30 text-sm text-muted-foreground font-mono",
89        className
90      )}
91    >
92      {iconUrl ? (
93        <Image
94          src={iconUrl}
95          alt=""
96          width={16}
97          height={16}
98          className="size-4 shrink-0"
99        />
100      ) : (
101        <HugeiconsIcon
102          icon={File01Icon}
103          size={16}
104          className="text-muted-foreground shrink-0"
105        />
106      )}
107// … truncated