Textarea

"use client";
import { useState } from "react";
import { Stack } from "@/ui/stack";
import { Textarea } from "@/ui/textarea";
import { Typography } from "@/ui/typography";

export function TextareaValidateJsonDemo() {
  const [error, setError] = useState<Error | null>(null);

  return (
    <Stack className="mx-auto w-full max-w-xl">
      <Typography prose="label" htmlFor="textarea-validatejson-demo">Textarea with validate JSON</Typography>
      <Textarea
        validateJson
        formatOnBlur
        id="textarea-validatejson-demo"
        validationError="Invalid JSON"
        onValidationError={error => setError(error)}
        className="max-w-xl"
        placeholder="Enter JSON here, e.g. [{}]"
      />
      <Typography el="label" htmlFor="textarea-validatejson-demo" hidden={!error} className="-my-2 text-sm text-destructive">{error?.message}</Typography>
      <Typography prose="muted">Enter inline text in JSON format and blur from Textarea component to format the text.</Typography>
    </Stack>
  );
}