hermes-web/components/elements/info-notice.tsx

import { Info, X } from "lucide-react";
import React, { useState } from "react";
import { Button } from "@/components/ui/button";


interface NoticeProps {
  message: string
  hidden?: boolean
}

const InfoNotice = ({
  message,
  hidden = false
} : NoticeProps ) => {
  const [open, setOpen] = useState(true)

  return (
    <div className={"flex flex-col bg-blue-400 rounded-lg px-4 py-2 mx-6" + (hidden || !open ? " hidden" : "")}>
      <div className="ml-[10px] items-center align-middle text-start w-full flex flex-row justify-between">
        <div>
          <Info className="w-3 h-3 inline-block" />
          <div className="ml-2 inline-block text-md align-middle font-bold">Info</div>
        </div>
        <Button variant="ghost" onClick={() => setOpen(false)} className="hover:bg-red-800 rounded-lg">
          <X className="align-top items-end" />
        </Button>
      </div>
      <div>
        <p className="text-sm flex flex-grow w-full">{message}</p>
      </div>
    </div>
  );
}
 
export default InfoNotice;