crema-app-aifirst-template/app/components/ui/code-block.tsx

import { Check, Copy } from "lucide-react"
import { useState, type ComponentProps } from "react"

import { cn } from "~/lib/utils"

function CodeBlock({
  className,
  children,
  ...props
}: ComponentProps<"div">) {
  return (
    <div
      data-slot="code-block"
      className={cn(
        "overflow-hidden rounded-lg border bg-muted/30 font-mono text-sm",
        className
      )}
      {...props}
    >
      {children}
    </div>
  )
}

function CodeBlockHeader({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="code-block-header"
      className={cn(
        "flex items-center justify-between border-b bg-muted/50 px-3 py-1.5",
        className
      )}
      {...props}
    />
  )
}

function CodeBlockLang({ className, ...props }: ComponentProps<"span">) {
  return (
    <span
      data-slot="code-block-lang"
      className={cn(
        "text-xs font-medium tracking-wide text-muted-foreground uppercase",
        className
      )}
      {...props}
    />
  )
}

function CodeBlockCopyButton({
  className,
  value,
  ...props
}: Omit<ComponentProps<"button">, "onClick" | "children"> & { value: string }) {
  const [copied, setCopied] = useState(false)

  function handleCopy() {
    navigator.clipboard.writeText(value).then(() => {
      setCopied(true)
      setTimeout(() => setCopied(false), 1500)
    })
  }

  return (
    <button
      data-slot="code-block-copy"
      type="button"
      onClick={handleCopy}
      className={cn(
        "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50",
        "[&_svg]:size-3",
        className
      )}
      {...props}
    >
      {copied ? <Check /> : <Copy />}
      {copied ? "Copied" : "Copy"}
    </button>
  )
}

function CodeBlockContent({ className, ...props }: ComponentProps<"pre">) {
  return (
    <pre
      data-slot="code-block-content"
      className={cn("overflow-x-auto p-4 text-sm leading-relaxed", className)}
      {...props}
    />
  )
}

function CodeBlockKeyword({ className, ...props }: ComponentProps<"span">) {
  return (
    <span
      data-slot="code-block-keyword"
      className={cn("text-syntax-keyword", className)}
      {...props}
    />
  )
}

function CodeBlockString({ className, ...props }: ComponentProps<"span">) {
  return (
    <span
      data-slot="code-block-string"
      className={cn("text-syntax-string", className)}
      {...props}
    />
  )
}

function CodeBlockNumber({ className, ...props }: ComponentProps<"span">) {
  return (
    <span
      data-slot="code-block-number"
      className={cn("text-syntax-number", className)}
      {...props}
    />
  )
}

function CodeBlockComment({ className, ...props }: ComponentProps<"span">) {
  return (
    <span
      data-slot="code-block-comment"
      className={cn("text-syntax-comment italic", className)}
      {...props}
    />
  )
}

function CodeBlockFunction({ className, ...props }: ComponentProps<"span">) {
  return (
    <span
      data-slot="code-block-function"
      className={cn("text-syntax-function", className)}
      {...props}
    />
  )
}

function CodeBlockType({ className, ...props }: ComponentProps<"span">) {
  return (
    <span
      data-slot="code-block-type"
      className={cn("text-syntax-type", className)}
      {...props}
    />
  )
}

export {
  CodeBlock,
  CodeBlockHeader,
  CodeBlockLang,
  CodeBlockCopyButton,
  CodeBlockContent,
  CodeBlockKeyword,
  CodeBlockString,
  CodeBlockNumber,
  CodeBlockComment,
  CodeBlockFunction,
  CodeBlockType,
}