Fights Counter

Fight Club Fights Count: {count}

); }; \`; return (

); } `,__rawStringJsx__:`"use client"; import React from "react"; import { CodeBlock } from "@/components/ui/code-block"; export function CodeBlockDemo() { const code = \`const DummyComponent = () => { const [count, setCount] = React.useState(0); const handleClick = () => { setCount(prev => prev + 1); }; return (

Fights Counter

Fight Club Fights Count: {count}

); }; \`; return (

); } `,__src__:"/src/registry/default/example/code-block-demo.tsx",children:(0,e.jsxs)(i.code,{"data-language":"tsx","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"use client"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" React"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "react"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" CodeBlock"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "@/components/ui/code-block"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" function"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" CodeBlockDemo"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"()"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" code"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" `const DummyComponent = () => {"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" const [count, setCount] = React.useState(0);"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" const handleClick = () => {"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" setCount(prev => prev + 1);"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" };"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" return ("})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'

'})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'

Fights Counter

'})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'

Fight Club Fights Count: {count}

'})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" "})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"

"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"};"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"`"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div "}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"max-w-3xl mx-auto w-full"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"CodeBlock"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" language"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"jsx"'})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" filename"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"DummyComponent.jsx"'})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" highlightLines"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={["}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"9"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 13"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 14"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 18"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"]}"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" code"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"code"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})})]})})})}),` `,(0,e.jsxs)(i.h2,{id:"installation",children:[(0,e.jsx)(i.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(i.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsxs)(t,{defaultValue:"manual",children:[(0,e.jsxs)(b,{children:[(0,e.jsx)(o,{value:"cli",children:"CLI"}),(0,e.jsx)(o,{value:"manual",children:"Manual"})]}),(0,e.jsx)(c,{value:"cli",children:(0,e.jsxs)(h,{children:[(0,e.jsx)(r,{children:"Run the following command"}),(0,e.jsx)(i.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(i.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"bash","data-theme":"BeardedTheme Arc",__rawString__:`npx shadcn@latest add https://ui.aceternity.com/registry/code-block.json `,__npmCommand__:`npx shadcn@latest add https://ui.aceternity.com/registry/code-block.json `,__yarnCommand__:`npx shadcn@latest add https://ui.aceternity.com/registry/code-block.json `,__pnpmCommand__:`pnpm dlx shadcn@latest add https://ui.aceternity.com/registry/code-block.json `,__bunCommand__:`bun x --bun shadcn@latest add https://ui.aceternity.com/registry/code-block.json `,children:(0,e.jsx)(i.code,{"data-language":"bash","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"npx"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" shadcn@latest"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" add"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" https://ui.aceternity.com/registry/code-block.json"})]})})})})]})}),(0,e.jsx)(c,{value:"manual",children:(0,e.jsxs)(h,{children:[(0,e.jsx)(r,{children:"Install dependencies"}),(0,e.jsx)(i.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(i.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"bash","data-theme":"BeardedTheme Arc",__rawString__:`npm i motion clsx tailwind-merge `,children:(0,e.jsx)(i.code,{"data-language":"bash","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"npm"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" i"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" motion"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" clsx"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" tailwind-merge"})]})})})}),(0,e.jsx)(r,{children:"Install code editor dependencies"}),(0,e.jsx)(i.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(i.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"bash","data-theme":"BeardedTheme Arc",__rawString__:`npm i react-syntax-highlighter @types/react-syntax-highlighter @tabler/icons-react `,children:(0,e.jsx)(i.code,{"data-language":"bash","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"npm"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" i"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" react-syntax-highlighter"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" @types/react-syntax-highlighter"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" @tabler/icons-react"})]})})})}),(0,e.jsx)(r,{children:"For React 19 / Next.js 15 users, follow the following packages"}),(0,e.jsxs)(i.p,{children:["For React 19 / Next.js 15 users, either use the ",(0,e.jsx)(i.code,{children:"--legacy-peer-deps"})," flag or add the following overrides in your ",(0,e.jsx)(i.code,{children:"package.json"})," file:"]}),(0,e.jsx)(i.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(i.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"json","data-theme":"BeardedTheme Arc",__rawString__:`"overrides": { "react-syntax-highlighter": "15.0.0" } `,children:(0,e.jsxs)(i.code,{"data-language":"json","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"overrides"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:": "}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"{"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:' "react-syntax-highlighter"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "15.0.0"'})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})})]})})}),(0,e.jsx)(r,{children:"Add util file"}),(0,e.jsxs)(i.figure,{"data-rehype-pretty-code-figure":"",children:[(0,e.jsx)(i.figcaption,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"BeardedTheme Arc",children:"lib/utils.ts"}),(0,e.jsx)(i.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"tsx","data-theme":"BeardedTheme Arc",__rawString__:`import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } `,__rawStringJsx__:`import { clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs) { return twMerge(clsx(inputs)); } `,children:(0,e.jsxs)(i.code,{"data-language":"tsx","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" ClassValue"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" clsx"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "clsx"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" twMerge"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "tailwind-merge"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" function"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" cn"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"(..."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:"inputs"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" ClassValue"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"[])"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" twMerge"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"clsx"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"inputs"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"));"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})})]})})]}),(0,e.jsx)(r,{children:"Copy the source code"}),(0,e.jsx)(i.p,{children:(0,e.jsx)(i.code,{children:"components/ui/code-block.tsx"})}),(0,e.jsx)(n,{name:"code-block",children:(0,e.jsx)(i.figure,{__src__:"/src/registry/default/ui/code-block.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(i.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"tsx","data-theme":"BeardedTheme Arc",__rawString__:`"use client"; import React from "react"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { atomDark } from "react-syntax-highlighter/dist/cjs/styles/prism"; import { IconCheck, IconCopy } from "@tabler/icons-react"; type CodeBlockProps = { language: string; filename: string; highlightLines?: number[]; } & ( | { code: string; tabs?: never; } | { code?: never; tabs: Array<{ name: string; code: string; language?: string; highlightLines?: number[]; }>; } ); export const CodeBlock = ({ language, filename, code, highlightLines = [], tabs = [], }: CodeBlockProps) => { const [copied, setCopied] = React.useState(false); const [activeTab, setActiveTab] = React.useState(0); const tabsExist = tabs.length > 0; const copyToClipboard = async () => { const textToCopy = tabsExist ? tabs[activeTab].code : code; if (textToCopy) { await navigator.clipboard.writeText(textToCopy); setCopied(true); setTimeout(() => setCopied(false), 2000); } }; const activeCode = tabsExist ? tabs[activeTab].code : code; const activeLanguage = tabsExist ? tabs[activeTab].language || language : language; const activeHighlightLines = tabsExist ? tabs[activeTab].highlightLines || [] : highlightLines; return (

{tabsExist && (

{tabs.map((tab, index) => ( ))}

)} {!tabsExist && filename && (

{filename}

)}

({ style: { backgroundColor: activeHighlightLines.includes(lineNumber) ? "rgba(255,255,255,0.1)" : "transparent", display: "block", width: "100%", }, })} PreTag="div" > {String(activeCode)}

); }; `,__rawStringJsx__:`"use client";; import React from "react"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { atomDark } from "react-syntax-highlighter/dist/cjs/styles/prism"; import { IconCheck, IconCopy } from "@tabler/icons-react"; export const CodeBlock = ({ language, filename, code, highlightLines = [], tabs = [] }) => { const [copied, setCopied] = React.useState(false); const [activeTab, setActiveTab] = React.useState(0); const tabsExist = tabs.length > 0; const copyToClipboard = async () => { const textToCopy = tabsExist ? tabs[activeTab].code : code; if (textToCopy) { await navigator.clipboard.writeText(textToCopy); setCopied(true); setTimeout(() => setCopied(false), 2000); } }; const activeCode = tabsExist ? tabs[activeTab].code : code; const activeLanguage = tabsExist ? tabs[activeTab].language || language : language; const activeHighlightLines = tabsExist ? tabs[activeTab].highlightLines || [] : highlightLines; return (

{tabsExist && (

{tabs.map((tab, index) => ( ))}

)} {!tabsExist && filename && (

{filename}

)}

({ style: { backgroundColor: activeHighlightLines.includes(lineNumber) ? "rgba(255,255,255,0.1)" : "transparent", display: "block", width: "100%", }, })} PreTag="div"> {String(activeCode)}

); }; `,__src__:"/src/registry/default/ui/code-block.tsx",__style__:"default",children:(0,e.jsxs)(i.code,{"data-language":"tsx","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"use client"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" React"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "react"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" Prism"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" as"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" SyntaxHighlighter"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "react-syntax-highlighter"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" atomDark"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "react-syntax-highlighter/dist/cjs/styles/prism"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" IconCheck"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" IconCopy"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "@tabler/icons-react"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:"type"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" CodeBlockProps"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" language"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" filename"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" highlightLines"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" number"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"[];"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" &"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" |"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" code"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" tabs"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" never"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" |"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" code"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" never"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" tabs"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" Array"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"<{"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" name"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" code"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" language"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" highlightLines"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" number"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"[];"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }>;"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" CodeBlock"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ({"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" language"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" filename"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" code"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" highlightLines"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" [],"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" tabs"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" [],"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}:"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" CodeBlockProps"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"copied"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" setCopied"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"]"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" React"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"useState"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"false"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"activeTab"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" setActiveTab"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"]"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" React"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"useState"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" tabsExist"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" tabs"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:"length "}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:">"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" copyToClipboard"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" async"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ()"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" textToCopy"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" tabsExist"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ?"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" tabs"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"["}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"activeTab"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"]."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"code"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" :"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" code"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" if"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"textToCopy"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" await"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" navigator"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"clipboard"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"writeText"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"textToCopy"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" setCopied"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"true"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" setTimeout"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"(()"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" setCopied"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"false"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"),"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 2000"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" };"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" activeCode"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" tabsExist"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ?"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" tabs"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"["}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"activeTab"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"]."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"code"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" :"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" code"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" activeLanguage"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" tabsExist"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ?"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" tabs"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"["}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"activeTab"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"]."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"language"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" ||"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" language"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" :"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" language"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" activeHighlightLines"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" tabsExist"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ?"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" tabs"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"["}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"activeTab"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"]."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"highlightLines"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" ||"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" []"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" :"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" highlightLines"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"relative w-full rounded-lg bg-slate-900 p-4 font-mono text-sm"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"flex flex-col gap-2"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"tabsExist"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" &&"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"flex overflow-x-auto"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"tabs"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"map"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"(("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:"tab"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:" index"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"button"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" key"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"index"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" onClick"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={()"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" setActiveTab"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"index"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")}"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"`px-3 !py-2 text-xs transition-colors font-sans "}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"${"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" activeTab"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" ==="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" index"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ?"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "text-white"'})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" :"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "text-zinc-400 hover:text-zinc-200"'})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"`"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"tab"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"name"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ))}"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" )}"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"!"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"tabsExist"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" &&"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" filename"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" &&"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"flex justify-between items-center py-2"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"text-xs text-zinc-400"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"{"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"filename"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:""})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"button"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" onClick"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"copyToClipboard"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"flex items-center gap-1 text-xs text-zinc-400 hover:text-zinc-200 transition-colors font-sans"'})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"copied"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ?"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"IconCheck"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" size"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"14"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" :"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"IconCopy"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" size"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"14"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" )}"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"SyntaxHighlighter"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" language"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"activeLanguage"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" style"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"atomDark"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" customStyle"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" margin"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" padding"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" background"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "transparent"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" fontSize"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "0.875rem"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#54617B","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:" // text-sm equivalent"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" wrapLines"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"true"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" showLineNumbers"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"true"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" lineProps"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:"lineNumber"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ({"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" style"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" backgroundColor"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" activeHighlightLines"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"includes"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"lineNumber"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ?"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "rgba(255,255,255,0.1)"'})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" :"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "transparent"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" display"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "block"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" width"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "100%"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" })}"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" PreTag"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"div"'})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"String"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"activeCode"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")}"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})})]})})})})]})})]}),` `,(0,e.jsxs)(i.h2,{id:"props",children:[(0,e.jsx)(i.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,e.jsx)(i.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,e.jsxs)(i.table,{children:[(0,e.jsx)(i.thead,{children:(0,e.jsxs)(i.tr,{children:[(0,e.jsx)(i.th,{children:"Prop"}),(0,e.jsx)(i.th,{children:"Type"}),(0,e.jsx)(i.th,{children:"Required"}),(0,e.jsx)(i.th,{children:"Description"})]})}),(0,e.jsxs)(i.tbody,{children:[(0,e.jsxs)(i.tr,{children:[(0,e.jsx)(i.td,{children:(0,e.jsx)(i.code,{children:"language"})}),(0,e.jsx)(i.td,{children:(0,e.jsx)(i.code,{children:"string"})}),(0,e.jsx)(i.td,{children:"Yes"}),(0,e.jsx)(i.td,{children:"The programming language for syntax highlighting"})]}),(0,e.jsxs)(i.tr,{children:[(0,e.jsx)(i.td,{children:(0,e.jsx)(i.code,{children:"filename"})}),(0,e.jsx)(i.td,{children:(0,e.jsx)(i.code,{children:"string"})}),(0,e.jsx)(i.td,{children:"Yes"}),(0,e.jsx)(i.td,{children:"The name of the file to display"})]}),(0,e.jsxs)(i.tr,{children:[(0,e.jsx)(i.td,{children:(0,e.jsx)(i.code,{children:"highlightLines"})}),(0,e.jsx)(i.td,{children:(0,e.jsx)(i.code,{children:"number[]"})}),(0,e.jsx)(i.td,{children:"No"}),(0,e.jsx)(i.td,{children:"Array of line numbers to highlight. Defaults to []"})]}),(0,e.jsxs)(i.tr,{children:[(0,e.jsx)(i.td,{children:(0,e.jsx)(i.code,{children:"code"})}),(0,e.jsx)(i.td,{children:(0,e.jsx)(i.code,{children:"string"})}),(0,e.jsx)(i.td,{children:"Conditional"}),(0,e.jsx)(i.td,{children:"The code content to display"})]}),(0,e.jsxs)(i.tr,{children:[(0,e.jsx)(i.td,{children:(0,e.jsx)(i.code,{children:"tabs"})}),(0,e.jsx)(i.td,{children:(0,e.jsx)(i.code,{children:"Array"})}),(0,e.jsx)(i.td,{children:"Conditional"}),(0,e.jsx)(i.td,{children:"Array of tab configurations"})]})]})]}),` `,(0,e.jsx)(i.p,{children:"Note: Either code OR tabs must be provided, but not both."}),` `,(0,e.jsxs)(i.h2,{id:"tabconfig-object-structure",children:[(0,e.jsx)(i.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#tabconfig-object-structure",children:(0,e.jsx)(i.span,{className:"icon icon-link"})}),"TabConfig Object Structure"]}),` `,(0,e.jsxs)(i.table,{children:[(0,e.jsx)(i.thead,{children:(0,e.jsxs)(i.tr,{children:[(0,e.jsx)(i.th,{children:"Property"}),(0,e.jsx)(i.th,{children:"Type"}),(0,e.jsx)(i.th,{children:"Required"}),(0,e.jsx)(i.th,{children:"Description"})]})}),(0,e.jsxs)(i.tbody,{children:[(0,e.jsxs)(i.tr,{children:[(0,e.jsx)(i.td,{children:(0,e.jsx)(i.code,{children:"name"})}),(0,e.jsx)(i.td,{children:(0,e.jsx)(i.code,{children:"string"})}),(0,e.jsx)(i.td,{children:"Yes"}),(0,e.jsx)(i.td,{children:"The name of the tab"})]}),(0,e.jsxs)(i.tr,{children:[(0,e.jsx)(i.td,{children:(0,e.jsx)(i.code,{children:"code"})}),(0,e.jsx)(i.td,{children:(0,e.jsx)(i.code,{children:"string"})}),(0,e.jsx)(i.td,{children:"Yes"}),(0,e.jsx)(i.td,{children:"The code content for this tab"})]}),(0,e.jsxs)(i.tr,{children:[(0,e.jsx)(i.td,{children:(0,e.jsx)(i.code,{children:"language"})}),(0,e.jsx)(i.td,{children:(0,e.jsx)(i.code,{children:"string"})}),(0,e.jsx)(i.td,{children:"No"}),(0,e.jsx)(i.td,{children:"Override the default language for this tab"})]}),(0,e.jsxs)(i.tr,{children:[(0,e.jsx)(i.td,{children:(0,e.jsx)(i.code,{children:"highlightLines"})}),(0,e.jsx)(i.td,{children:(0,e.jsx)(i.code,{children:"number[]"})}),(0,e.jsx)(i.td,{children:"No"}),(0,e.jsx)(i.td,{children:"Override the default highlighted lines for this tab"})]})]})]}),` `,(0,e.jsxs)(i.h2,{id:"code-preview-with-multiple-tabs",children:[(0,e.jsx)(i.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#code-preview-with-multiple-tabs",children:(0,e.jsx)(i.span,{className:"icon icon-link"})}),"Code Preview With Multiple Tabs"]}),` `,(0,e.jsx)(a,{name:"code-block-demo-2",className:"[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%] overflow-hidden relative",children:(0,e.jsx)(i.figure,{__src__:"/src/registry/default/example/code-block-demo-2.tsx","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(i.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"tsx","data-theme":"BeardedTheme Arc",__rawString__:`"use client"; import React from "react"; import { CodeBlock } from "@/components/ui/code-block"; export function CodeBlockDemoSecond() { const code = \`const DummyComponent = () => { const [count, setCount] = React.useState(0); const handleClick = () => { setCount(prev => prev + 1); }; return (

Fights Counter

Fight Club Fights Count: {count}

); }; \`; const HTMLLanguage = \`

Fights Counter

Fight Club Fights Count: {count}

\`; const CSSLanguage = \`.button { background-color: blue; color: white; padding: 10px 20px; border-radius: 5px; cursor: pointer; } \`; return (

); } `,__rawStringJsx__:`"use client"; import React from "react"; import { CodeBlock } from "@/components/ui/code-block"; export function CodeBlockDemoSecond() { const code = \`const DummyComponent = () => { const [count, setCount] = React.useState(0); const handleClick = () => { setCount(prev => prev + 1); }; return (

Fights Counter

Fight Club Fights Count: {count}

); }; \`; const HTMLLanguage = \`

Fights Counter

Fight Club Fights Count: {count}

\`; const CSSLanguage = \`.button { background-color: blue; color: white; padding: 10px 20px; border-radius: 5px; cursor: pointer; } \`; return (

); } `,__src__:"/src/registry/default/example/code-block-demo-2.tsx",children:(0,e.jsxs)(i.code,{"data-language":"tsx","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"use client"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" React"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "react"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" CodeBlock"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "@/components/ui/code-block"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" function"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" CodeBlockDemoSecond"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"()"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" code"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" `const DummyComponent = () => {"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" const [count, setCount] = React.useState(0);"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" const handleClick = () => {"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" setCount(prev => prev + 1);"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" };"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" return ("})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'

'})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'

Fights Counter

'})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'

Fight Club Fights Count: {count}

'})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'

Fights Counter

'})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'

Fight Club Fights Count: {count}

"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"`"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" CSSLanguage"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" `.button {"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" background-color: blue;"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" color: white;"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" padding: 10px 20px;"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" border-radius: 5px;"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" cursor: pointer;"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"}"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:"`"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div "}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"className"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"max-w-3xl mx-auto w-full"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"CodeBlock"})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" language"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"jsx"'})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" filename"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"DummyComponent.jsx"'})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" tabs"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={["})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" name"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "DummyComponent.html"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" code"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" HTMLLanguage"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" language"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "html"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" name"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "DummyComponent.css"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" code"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" CSSLanguage"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" language"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "css"'}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" highlightLines"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ["}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"1"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 2"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 3"}),(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"],"})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ]}"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})}),` `,(0,e.jsxs)(i.span,{"data-line":"",children:[(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,e.jsx)(i.span,{"data-line":"",children:(0,e.jsx)(i.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})})]})})})})]})}function D(d={}){let{wrapper:i}=d.components||{};return i?(0,e.jsx)(i,{...d,children:(0,e.jsx)(v,{...d})}):v(d)}function s(d,i){throw new Error("Expected "+(i?"component":"object")+" `"+d+"` to be defined: you likely forgot to import, pass, or provide it.")}return f(_);})(); ;return Component;

Best Free Code Components for your Tailwind CSS and React project

Aceternity UI