35 lines
1022 B
TypeScript
35 lines
1022 B
TypeScript
|
import { Info, X } from "lucide-react";
|
||
|
|
import React, { useState } from "react";
|
||
|
|
import { Button } from "../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;
|