mirror of
https://github.com/sussy-code/smov.git
synced 2024-12-25 15:27:40 +01:00
28 lines
670 B
TypeScript
28 lines
670 B
TypeScript
|
import { Icon, Icons } from "@/components/Icon";
|
||
|
|
import { useBanner } from "@/hooks/useBanner";
|
||
|
|
|
||
|
|
export function Banner(props: { children: React.ReactNode; type: "error" }) {
|
||
|
|
const [ref] = useBanner<HTMLDivElement>("internet");
|
||
|
|
const styles = {
|
||
|
|
error: "bg-[#C93957] text-white",
|
||
|
|
};
|
||
|
|
const icons = {
|
||
|
|
error: Icons.CIRCLE_EXCLAMATION,
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
ref={ref}
|
||
|
|
className={[
|
||
|
|
styles[props.type],
|
||
|
|
"flex items-center justify-center p-1",
|
||
|
|
].join(" ")}
|
||
|
|
>
|
||
|
|
<div className="flex items-center space-x-3">
|
||
|
|
<Icon icon={icons[props.type]} />
|
||
|
|
<div>{props.children}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|