code-block

1"use client"
2 
3import * as React from "react"
4import { useEffect, useState } from "react"
5import { TerminalIcon } from "lucide-react"
6import { Highlight } from "prism-react-renderer"
7import type { PrismTheme } from "prism-react-renderer"
8 
9import { cn } from "@/lib/utils"
10import { getIconForFile } from "@/components/ui/code-block-icons"
11import { CopyButton } from "@/components/ui/copy-button"
12import { Button } from "@/components/ui/button"
13import {
14  Collapsible,
15  CollapsibleContent,
16  CollapsibleTrigger,
17} from "@/components/ui/collapsible"
18import {
19  Tabs,
20  TabsContent,
21  TabsList,
22  TabsTrigger,
23} from "@/components/ui/tabs"
24 
25type PackageManager = "npm" | "yarn" | "pnpm" | "bun"
26 
27const defaultTheme: PrismTheme = {
28  plain: {
29    color: "#FFFFFF",
30    backgroundColor: "#161616",
31  },
32  styles: [
33    {
34      types: ["comment"],
35      style: {
36        color: "#757575",
37        fontStyle: "italic",
38      },
39    },
40    {
41      types: ["keyword", "property", "property-access", "attr-name"],
42      style: {
43        color: "#77b7d7",
44      },
45    },
46    {
47      types: ["tag"],
48      style: {
49        color: "#dfab5c",
50      },
51    },
52    {
53      types: ["punctuation", "symbol", "dom"],
54      style: {
55        color: "#ffffff",
56      },
57    },
58    {
59      types: ["definition", "function"],
60      style: {
61        color: "#86d9ca",
62      },
63    },
64    {
65      types: ["string", "char", "attr-value"],
66      style: {
67        color: "#977cdc",
68      },
69    },
70    {
71      types: ["static", "number"],
72      style: {
73        color: "#ff6658",
74      },
75    },
76  ],
77}
78 
79const lightTheme: PrismTheme = {
80  plain: {
81    color: "#24292e",
82    backgroundColor: "#ffffff",
83  },
84  styles: [
85    {
86      types: ["comment"],
87      style: {
88        color: "#8b949e",
89        fontStyle: "italic",
90      },
91    },
92    {
93      types: ["variable", "parameter"],
94      style: {
95        color: "#e36209",
96      },
97    },
98    {
99      types: ["keyword", "builtin", "function-definition"],
100      style: {
101        color: "#d73a49",
102      },
103    },
104    {
105      types: ["property", "property-access", "attr-name"],
106      style: {
107        color: "#005cc5",
108      },
109    },
110    {
111      types: ["tag"],
112      style: {
113        color: "#22863a",
114      },
115    },
116    {
117      types: ["punctuation", "symbol", "dom", "operator"],
118      style: {
119        color: "#24292e",
120      },
121    },
122    {
123      types: ["function"],
124      style: {
125        color: "#6f42c1",
126      },
127    },
128    {
129      types: ["class-name"],
130// … truncated