Code Block

1'use client'
2 
3import { Copy } from 'lucide-react'
4import { AnimatePresence, motion, useReducedMotion } from 'motion/react'
5import { Highlight, type PrismTheme } from 'prism-react-renderer'
6import React, { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from 'react'
7 
8import { cn } from '@/lib/utils'
9 
10const TAP_SPRING = { type: 'spring', stiffness: 500, damping: 30 } as const
11const SWAP_SPRING = { type: 'spring', duration: 0.3, bounce: 0 } as const
12const CHECK_SPRING = { type: 'spring', duration: 0.4, bounce: 0.35 } as const
13const COPY_RESET_MS = 1800
14 
15export type CodeBlockProps = Omit<React.ComponentProps<'div'>, 'children'> & {
16    /** The source code to render. */
17    code: string
18    /** Prism language id, e.g. "tsx", "css", "json", "bash". */
19    language?: string
20    /** Any hex color. The whole theme is built from shades of it. */
21    accent?: string
22    /** "auto" follows the page theme; pass "dark" or "light" to pin it. */
23    mode?: 'auto' | 'dark' | 'light'
24    /** Filename or path shown in the header. Falls back to the language id when omitted. */
25    filename?: string
26    /** Show the outer frame — background, border, rounded corners, and header. Turn off to render just the code. */
27    showFrame?: boolean
28    /** Show the header bar. Ignored when the frame is off. */
29    showHeader?: boolean
30    /** Show the line-number gutter. */
31    showLineNumbers?: boolean
32    /** Show the copy-to-clipboard button. */
33    showCopyButton?: boolean
34    /** Optional 1-based line numbers to highlight with an accent wash. Off when omitted. */
35    highlightLines?: number[]
36}
37function resolvePageMode(): 'dark' | 'light' {
38    const root = document.documentElement
39    if (root.classList.contains('dark')) return 'dark'
40    if (root.classList.contains('light')) return 'light'
41    const attr = root.getAttribute('data-theme')
42    if (attr === 'dark') return 'dark'
43    if (attr === 'light') return 'light'
44    // jsdom has no matchMedia
45    if (typeof window.matchMedia !== 'function') return 'dark'
46    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
47}
48 
49function subscribeToPageMode(onChange: () => void) {
50    const observer = new MutationObserver(onChange)
51    observer.observe(document.documentElement, {
52        attributes: true,
53        attributeFilter: ['class', 'data-theme'],
54    })
55    const media =
56        typeof window.matchMedia === 'function'
57// … truncated