'use client'; import * as React from 'react'; import { useTheme } from 'next-themes'; import { AnimatePresence, motion } from 'motion/react'; import { CheckIcon, CopyIcon } from 'lucide-react'; import { Tabs, TabsContent, TabsList, TabsTrigger, TabsContents, type TabsProps, } from '@/components/animate-ui/tabs'; import { cn } from '@/lib/utils'; type InstallTabsProps = { commands: Record; lang?: string; themes?: { light: string; dark: string; }; } & Omit; const InstallTabs = React.forwardRef( ( { commands, lang = 'bash', themes = { light: 'github-light', dark: 'github-dark', }, className, defaultValue, value, onValueChange, ...props }, ref, ) => { const { resolvedTheme } = useTheme(); const [highlightedCommands, setHighlightedCommands] = React.useState< Record >({}); const [selectedCommand, setSelectedCommand] = React.useState( value ?? defaultValue ?? Object.keys(commands)[0], ); const [isCopied, setIsCopied] = React.useState(false); React.useEffect(() => { async function loadHighlightedCode() { try { const { codeToHtml } = await import('shiki'); const newHighlightedCommands: Record = {}; for (const [command, val] of Object.entries(commands)) { const highlighted = await codeToHtml(val, { lang, themes: { light: themes.light, dark: themes.dark, }, defaultColor: resolvedTheme === 'dark' ? 'dark' : 'light', }); newHighlightedCommands[command] = highlighted; } setHighlightedCommands(newHighlightedCommands); } catch (error) { console.error('Error highlighting commands', error); setHighlightedCommands(commands); } } loadHighlightedCode(); }, [commands, resolvedTheme, lang, themes.light, themes.dark]); return ( )} value={selectedCommand} onValueChange={(val) => { setSelectedCommand(val); onValueChange?.(val); }} >

{Object.keys(highlightedCommands).map((command) => ( {command} ))}

{ if (isCopied) return; navigator.clipboard .writeText(commands[selectedCommand]) .then(() => { setIsCopied(true); setTimeout(() => { setIsCopied(false); }, 3000); }) .catch((error) => { console.error('Error copying command', error); }); }} > {isCopied ? ( ) : ( )} {Object.entries(highlightedCommands).map(([command, val]) => (

))} ); }, ); InstallTabs.displayName = 'InstallTabs'; export { InstallTabs, type InstallTabsProps };

Prop	Type	Default
`commands`	`Record<string, string>`	-
`lang?`	`string`	`bash`
`themes?`	`Record<string, string>`	`{ light: 'github-light', dark: 'github-dark' }`

Install Tabs

Installation

Props

On this page