Code Editor

import { CodeEditor } from "@/components/ui/code-editor";

export default function Example() {
  return <CodeEditor />;
}

"use client";

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const CodeEditor = forwardRef(({ className, value, onValueChange, language = "javascript", ...props }, ref) => {
  return (
    <div ref={ref} className={cn("rounded-md border border-input shadow-sm bg-zinc-950", className)} {...props}>
      <div className="flex items-center justify-between border-b border-zinc-800 px-3 py-1.5">
        <span className="text-xs text-zinc-400 font-mono">{language}</span>
      </div>
      <textarea
        value={value || ""}
        onChange={(e) => onValueChange?.(e.target.value)}
        spellCheck={false}
        className="w-full min-h-[200px] resize-y bg-transparent p-3 text-sm font-mono text-zinc-100 outline-none placeholder:text-zinc-500"
        placeholder={`// Write your ${language} code here...`}
      />
    </div>
  );
});
CodeEditor.displayName = "CodeEditor";

export { CodeEditor };