46 lines
1.0 KiB
TypeScript
46 lines
1.0 KiB
TypeScript
import {
|
|
CircleAlert,
|
|
CircleSlash2,
|
|
LucideProps,
|
|
TriangleAlert,
|
|
} from 'lucide-react';
|
|
import React from 'react';
|
|
import Card from '~/components/Card';
|
|
|
|
export interface NoticeProps {
|
|
children: React.ReactNode;
|
|
title?: string;
|
|
variant?: 'default' | 'error' | 'warning';
|
|
icon?: React.ReactElement<LucideProps>;
|
|
}
|
|
|
|
export default function Notice({
|
|
children,
|
|
title,
|
|
variant,
|
|
icon,
|
|
}: NoticeProps) {
|
|
return (
|
|
<Card variant="flat" className="max-w-2xl my-6">
|
|
<div className="flex items-center justify-between">
|
|
{title ? (
|
|
<Card.Title className="text-xl mb-0">{title}</Card.Title>
|
|
) : undefined}
|
|
{!variant && icon ? icon : iconForVariant(variant)}
|
|
</div>
|
|
<Card.Text className="mt-4">{children}</Card.Text>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
function iconForVariant(variant?: 'default' | 'error' | 'warning') {
|
|
switch (variant) {
|
|
case 'error':
|
|
return <TriangleAlert className="text-red-500" />;
|
|
case 'warning':
|
|
return <CircleAlert className="text-yellow-500" />;
|
|
default:
|
|
return <CircleSlash2 />;
|
|
}
|
|
}
|