pronounsfu/frontend/components/Notice.tsx

57 lines
1.4 KiB
TypeScript
Raw Normal View History

2022-11-18 06:27:25 -08:00
import { ReactNode } from "react";
import { ButtonStyle } from "./Button";
export type NoticeStyle = ButtonStyle;
export interface Props {
header?: string;
style?: NoticeStyle;
children?: ReactNode;
}
export default function Notice(props: Props) {
if (props.style === undefined) {
return PrimaryNotice(props);
}
switch (props.style) {
case ButtonStyle.primary:
return PrimaryNotice(props);
case ButtonStyle.success:
return SuccessNotice(props);
case ButtonStyle.danger:
return DangerNotice(props);
}
}
function PrimaryNotice(props: Props) {
return (
<div className="bg-blue-500 p-4 rounded-md border-blue-600 text-white">
{props.children}
</div>
);
}
function SuccessNotice(props: Props) {
return (
<div className="bg-green-600 dark:bg-green-700 p-4 rounded-md text-white border-green-700 dark:border-green-800">
{props.children}
</div>
);
}
function DangerNotice(props: Props) {
return (
<div className="bg-red-600 dark:bg-red-700 rounded-md text-red-50 border-red-700 dark:border-red-800 max-w-lg">
{props.header && (
<h3 className="uppercase text-sm font-bold border-b border-red-700 dark:border-red-800 px-4 py-3">
{props.header}
</h3>
)}
<div className={props.header ? "px-4 pt-3 pb-4" : "p-4"}>
{props.children}
</div>
</div>
);
}