Textarea

import { Textarea } from "@/components/xfork-ui/textarea"

<Textarea placeholder="Type your message here." />

import { Textarea } from "@/components/xfork-ui/textarea"
export default function TextareaDemo() {
return <Textarea placeholder="Type your message here." />
}

import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/xfork-ui/textarea"
export default function TextareaWithLabel() {
return (
  <div className="grid w-full gap-1.5">
    <Label htmlFor="message">Your message</Label>
    <Textarea placeholder="Type your message here." id="message" />
  </div>
)
}

import { Button } from "@/components/xfork-ui/button"
import { Textarea } from "@/components/xfork-ui/textarea"
export default function TextareaWithButton() {
return (
  <div className="grid w-full gap-2">
    <Textarea placeholder="Type your message here." />
    <Button>Send message</Button>
  </div>
)
}

import { Textarea } from "@/components/xfork-ui/textarea"
export default function TextareaDisabled() {
return <Textarea placeholder="Type your message here." disabled />
}

"use client"
import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"
import { z } from "zod"
import { toast } from "sonner"
import { Button } from "@/components/xfork-ui/button"
import {
Form,
FormControl,
FormDescription,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form"
import { Textarea } from "@/components/xfork-ui/textarea"
const FormSchema = z.object({
bio: z
  .string()
  .min(10, {
    message: "Bio must be at least 10 characters.",
  })
  .max(160, {
    message: "Bio must not be longer than 30 characters.",
  }),
})
export default function TextareaForm() {
const form = useForm<z.infer<typeof FormSchema>>({
  resolver: zodResolver(FormSchema),
})
function onSubmit(data: z.infer<typeof FormSchema>) {
  toast({
    title: "You submitted the following values:",
    description: (
      <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
        <code className="text-white">{JSON.stringify(data, null, 2)}</code>
      </pre>
    ),
  })
}
return (
  <Form {...form}>
    <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
      <FormField
        control={form.control}
        name="bio"
        render={({ field }) => (
          <FormItem>
            <FormLabel>Bio</FormLabel>
            <FormControl>
              <Textarea
                placeholder="Tell us a little bit about yourself"
                className="resize-none"
                {...field}
              />
            </FormControl>
            <FormDescription>
              You can <span>@mention</span> other users and organizations.
            </FormDescription>
            <FormMessage />
          </FormItem>
        )}
      />
      <Button type="submit">Submit</Button>
    </form>
  </Form>
)
}