Code Tabs

1'use client';
2 
3import * as React from 'react';
4import { useTheme } from 'next-themes';
5 
6import { cn } from '@/lib/utils';
7import {
8  Tabs,
9  TabsContent,
10  TabsList,
11  TabsTrigger,
12  TabsContents,
13  TabsHighlight,
14  TabsHighlightItem,
15  type TabsProps,
16} from '@/components/animate-ui/primitives/animate/tabs';
17import { CopyButton } from '@/components/animate-ui/components/buttons/copy';
18 
19type CodeTabsProps = {
20  codes: Record<string, string>;
21  lang?: string;
22  themes?: { light: string; dark: string };
23  copyButton?: boolean;
24  onCopiedChange?: (copied: boolean, content?: string) => void;
25} & Omit<TabsProps, 'children'>;
26 
27function CodeTabs({
28  codes,
29  lang = 'bash',
30  themes = {
31    light: 'github-light',
32    dark: 'github-dark',
33  },
34  className,
35  defaultValue,
36  value,
37  onValueChange,
38  copyButton = true,
39  onCopiedChange,
40  ...props
41}: CodeTabsProps) {
42  const { resolvedTheme } = useTheme();
43 
44  const [highlightedCodes, setHighlightedCodes] = React.useState<Record<
45    string,
46    string
47  > | null>(null);
48  const [selectedCode, setSelectedCode] = React.useState<string>(
49    value ?? defaultValue ?? Object.keys(codes)[0] ?? '',
50  );
51 
52  React.useEffect(() => {
53    async function loadHighlightedCode() {
54      try {
55        const { codeToHtml } = await import('shiki');
56        const newHighlightedCodes: Record<string, string> = {};
57 
58        for (const [command, val] of Object.entries(codes)) {
59          const highlighted = await codeToHtml(val, {
60            lang,
61            themes: {
62              light: themes.light,
63              dark: themes.dark,
64            },
65            defaultColor: resolvedTheme === 'dark' ? 'dark' : 'light',
66          });
67 
68          newHighlightedCodes[command] = highlighted;
69        }
70 
71        setHighlightedCodes(newHighlightedCodes);
72      } catch (error) {
73        console.error('Error highlighting codes', error);
74        setHighlightedCodes(codes);
75      }
76    }
77    loadHighlightedCode();
78  }, [resolvedTheme, lang, themes.light, themes.dark, codes]);
79 
80  return (
81    <Tabs
82      data-slot="install-tabs"
83      className={cn(
84        'w-full gap-0 bg-muted/50 rounded-xl border overflow-hidden',
85        className,
86      )}
87      {...props}
88      value={selectedCode}
89      onValueChange={(val) => {
90        setSelectedCode(val);
91        onValueChange?.(val);
92      }}
93    >
94// … truncated