Code

1'use client';
2 
3import * as React from 'react';
4import { useTheme } from 'next-themes';
5 
6import {
7  CodeBlock as CodeBlockPrimitive,
8  type CodeBlockProps as CodeBlockPropsPrimitive,
9} from '@/components/animate-ui/primitives/animate/code-block';
10import { cn } from '@/lib/utils';
11import { CopyButton } from '@/components/animate-ui/components/buttons/copy';
12import { getStrictContext } from '@/lib/get-strict-context';
13 
14type CodeContextType = {
15  code: string;
16};
17 
18const [CodeProvider, useCode] =
19  getStrictContext<CodeContextType>('CodeContext');
20 
21type CodeProps = React.ComponentProps<'div'> & {
22  code: string;
23};
24 
25function Code({ className, code, ...props }: CodeProps) {
26  return (
27    <CodeProvider value={{ code }}>
28      <div
29        className={cn(
30          'relative flex flex-col overflow-hidden border bg-accent/50 rounded-lg',
31          className,
32        )}
33        {...props}
34      />
35    </CodeProvider>
36  );
37}
38 
39type CodeHeaderProps = React.ComponentProps<'div'> & {
40  icon?: React.ElementType;
41  copyButton?: boolean;
42};
43 
44function CodeHeader({
45  className,
46  children,
47  icon: Icon,
48  copyButton = false,
49  ...props
50}: CodeHeaderProps) {
51  const { code } = useCode();
52 
53  return (
54    <div
55      className={cn(
56        'bg-accent shrink-0 gap-x-2 border-b border-border/75 dark:border-border/50 text-sm flex text-muted-foreground items-center px-4 w-full h-10',
57        className,
58      )}
59      {...props}
60    >
61      {Icon && <Icon className="size-4" />}
62      {children}
63      {copyButton && (
64        <CopyButton
65          content={code}
66          size="xs"
67          variant="ghost"
68          className="ml-auto w-auto h-auto p-2 -mr-2"
69        />
70      )}
71    </div>
72  );
73}
74 
75type CodeBlockProps = Omit<CodeBlockPropsPrimitive, 'code'> & {
76  cursor?: boolean;
77};
78 
79function CodeBlock({ cursor, className, ...props }: CodeBlockProps) {
80  const { resolvedTheme } = useTheme();
81  const { code } = useCode();
82  const scrollRef = React.useRef<HTMLDivElement>(null);
83 
84  return (
85    <CodeBlockPrimitive
86      ref={scrollRef}
87      theme={resolvedTheme === 'dark' ? 'dark' : 'light'}
88      scrollContainerRef={scrollRef}
89      className={cn(
90        'relative text-sm p-4 overflow-auto',
91        '[&>pre,_&_code]:!bg-transparent [&>pre,_&_code]:[background:transparent_!important] [&>pre,_&_code]:border-none [&_code]:!text-[13px] [&_code_.line]:!px-0',
92        cursor &&
93// … truncated