My personal website
renderg.host
1import { cn } from '@/lib/utils';
2import React from 'react';
3import { codeStyles } from './Code.styles';
4import { CodeProps } from './Code.types';
5
6export const Code = React.forwardRef<HTMLElement, CodeProps>(
7 ({ children, variant = 'inline', language, className = '', ...props }, ref) => {
8 const codeElement = (
9 <code
10 ref={ref}
11 className={cn(codeStyles.base, codeStyles.variants[variant], className)}
12 data-language={language}
13 {...props}
14 >
15 {children}
16 </code>
17 );
18
19 // For block variant, wrap in <pre> tag
20 if (variant === 'block') {
21 return <pre className="not-prose">{codeElement}</pre>;
22 }
23
24 return codeElement;
25 },
26);
27
28Code.displayName = 'Code';