36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import { X } from "lucide-react";
|
|
import React, { useState } from "react";
|
|
import { FaExclamationCircle } from "react-icons/fa";
|
|
import { Button } from "../ui/button";
|
|
|
|
|
|
interface NoticeProps {
|
|
message: string
|
|
hidden?: boolean
|
|
}
|
|
|
|
const WarningNotice = ({
|
|
message,
|
|
hidden = false
|
|
} : NoticeProps ) => {
|
|
const [open, setOpen] = useState(true)
|
|
|
|
return (
|
|
<div className={"flex flex-col bg-orange-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>
|
|
<FaExclamationCircle 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 WarningNotice; |