Files
next-template/src/components/default/forms/status-message.tsx

58 lines
1.2 KiB
TypeScript

import { type ComponentProps } from 'react';
import { cn } from '@/lib/utils';
type Message =
| { success: string}
| { error: string}
| { message: string}
type StatusMessageProps = {
message: Message;
containerProps?: ComponentProps<'div'>;
textProps?: ComponentProps<'div'>;
};
export const StatusMessage = ({
message,
containerProps,
textProps,
}: StatusMessageProps) => {
return (
<div
{...containerProps}
className={cn(
'flex flex-col gap-2 w-full\
text-sm bg-accent rounded-md p-2 px-4',
containerProps?.className,
)}
>
{'success' in message && (
<div
{...textProps}
className={cn(
'dark:text-green-500 text-green-700',
textProps?.className
)}
>
{message.success}
</div>
)}
{'error' in message && (
<div
{...textProps}
className={cn('text-destructive', textProps?.className)}
>
{message.error}
</div>
)}
{'message' in message && (
<div
{...textProps}
>
{message.message}
</div>
)}
</div>
);
};