web-humas-fe/components/main/detail/comment.tsx

import { Button } from "@nextui-org/button";
import { Textarea } from "@nextui-org/input";
import React from "react";

export default function Comment() {
  return (
    <div className="p-3 lg:p-10 space-y-2 md:spacey-3 lg:space-y-5">
      <div>
        <b>Berikan Komentar</b>
      </div>
      <Textarea
        variant="bordered"
        placeholder="Masukkan Komentar Anda di sini.."
        className="text-black"
        classNames={{
          input: ["w-full", "bg-transparent", "!text-black"],
          mainWrapper: ["w-full", "bg-transparent"],
          innerWrapper: ["bg-transparent"],
          inputWrapper: [
            "bg-transparent",
            "dark:bg-transparent",
            "!border-1 border-gray-300",
            "hover:bg-transparent",
            "dark:hover:bg-transparent",
            "group-data-[focused=true]:bg-transparent",
            "dark:group-data-[focused=true]:bg-transaparent",
            "group-data-[focused=false]:bg-transparent",
            "focus-within:!bg-transparent",
            "border-1",
          ],
        }}
      />
      <Button className="bg-[#DD8306] text-white" radius="none">
        Kirim
      </Button>
    </div>
  );
}