code-block

1'use client';
2 
3import {
4  type IconType,
5  SiAstro,
6  SiBiome,
7  SiBower,
8  SiBun,
9  SiC,
10  SiCircleci,
11  SiCoffeescript,
12  SiCplusplus,
13  SiCss,
14  SiCssmodules,
15  SiDart,
16  SiDocker,
17  SiDocusaurus,
18  SiDotenv,
19  SiEditorconfig,
20  SiEslint,
21  SiGatsby,
22  SiGitignoredotio,
23  SiGnubash,
24  SiGo,
25  SiGraphql,
26  SiGrunt,
27  SiGulp,
28  SiHandlebarsdotjs,
29  SiHtml5,
30  SiJavascript,
31  SiJest,
32  SiJson,
33  SiLess,
34  SiMarkdown,
35  SiMdx,
36  SiMintlify,
37  SiMocha,
38  SiMysql,
39  SiNextdotjs,
40  SiPerl,
41  SiPhp,
42  SiPostcss,
43  SiPrettier,
44  SiPrisma,
45  SiPug,
46  SiPython,
47  SiR,
48  SiReact,
49  SiReadme,
50  SiRedis,
51  SiRemix,
52  SiRive,
53  SiRollupdotjs,
54  SiRuby,
55  SiSanity,
56  SiSass,
57  SiScala,
58  SiSentry,
59  SiShadcnui,
60  SiStorybook,
61  SiStylelint,
62  SiSublimetext,
63  SiSvelte,
64  SiSvg,
65  SiSwift,
66  SiTailwindcss,
67  SiToml,
68  SiTypescript,
69  SiVercel,
70  SiVite,
71  SiVuedotjs,
72  SiWebassembly,
73} from '@icons-pack/react-simple-icons';
74import { useControllableState } from '@radix-ui/react-use-controllable-state';
75import {
76  transformerNotationDiff,
77  transformerNotationErrorLevel,
78  transformerNotationFocus,
79  transformerNotationHighlight,
80  transformerNotationWordHighlight,
81} from '@shikijs/transformers';
82import { CheckIcon, CopyIcon } from 'lucide-react';
83import type {
84  ComponentProps,
85  HTMLAttributes,
86  ReactElement,
87  ReactNode,
88} from 'react';
89import {
90  cloneElement,
91  createContext,
92  useContext,
93  useEffect,
94  useState,
95} from 'react';
96import {
97  type BundledLanguage,
98  type CodeOptionsMultipleThemes,
99  codeToHtml,
100} from 'shiki';
101import { Button } from '@/components/ui/button';
102import {
103  Select,
104  SelectContent,
105  SelectItem,
106  SelectTrigger,
107  SelectValue,
108} from '@/components/ui/select';
109import { cn } from '@repo/shadcn-ui/lib/utils';
110 
111export type { BundledLanguage } from 'shiki';
112 
113const filenameIconMap = {
114  '.env': SiDotenv,
115  '*.astro': SiAstro,
116  'biome.json': SiBiome,
117  '.bowerrc': SiBower,
118  'bun.lockb': SiBun,
119  '*.c': SiC,
120  '*.cpp': SiCplusplus,
121  '.circleci/config.yml': SiCircleci,
122  '*.coffee': SiCoffeescript,
123  '*.module.css': SiCssmodules,
124  '*.css': SiCss,
125  '*.dart': SiDart,
126  Dockerfile: SiDocker,
127  'docusaurus.config.js': SiDocusaurus,
128  '.editorconfig': SiEditorconfig,
129  '.eslintrc': SiEslint,
130  'eslint.config.*': SiEslint,
131  'gatsby-config.*': SiGatsby,
132  '.gitignore': SiGitignoredotio,
133  '*.go': SiGo,
134  '*.graphql': SiGraphql,
135  '*.sh': SiGnubash,
136  'Gruntfile.*': SiGrunt,
137  'gulpfile.*': SiGulp,
138  '*.hbs': SiHandlebarsdotjs,
139  '*.html': SiHtml5,
140// … truncated