57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
|
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>
|
||
|
|
);
|
||
|
|
}
|