60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import type { ComponentProps } from 'react';
|
|
|
|
import { cn } from '@gib/ui';
|
|
|
|
type Message = { success: string } | { error: string } | { message: string };
|
|
|
|
interface StatusMessageProps {
|
|
message: Message;
|
|
containerProps?: ComponentProps<'div'>;
|
|
textProps?: ComponentProps<'div'>;
|
|
}
|
|
|
|
export const StatusMessage = ({
|
|
message,
|
|
containerProps,
|
|
textProps,
|
|
}: StatusMessageProps) => {
|
|
return (
|
|
<div className='flex w-full flex-col items-center'>
|
|
{'success' in message && (
|
|
<div
|
|
{...containerProps}
|
|
className={cn(
|
|
'flex w-11/12 flex-col items-center rounded-md p-2',
|
|
'border-2 bg-green-700/20 dark:bg-green-500/20',
|
|
'border-green-700/50 dark:border-green-500/50',
|
|
containerProps?.className,
|
|
)}
|
|
>
|
|
<p {...textProps}>{message.success}</p>
|
|
</div>
|
|
)}
|
|
{'error' in message && (
|
|
<div
|
|
{...containerProps}
|
|
className={cn(
|
|
'flex w-11/12 flex-col items-center rounded-md p-2',
|
|
'bg-destructive/20 border-destructive/80 border-2',
|
|
containerProps?.className,
|
|
)}
|
|
>
|
|
<p {...textProps}>{message.error}</p>
|
|
</div>
|
|
)}
|
|
{'message' in message && (
|
|
<div
|
|
{...containerProps}
|
|
className={cn(
|
|
'flex w-11/12 flex-col items-center rounded-md p-2',
|
|
'bg-accent/20 border-primary/80 border-2',
|
|
containerProps?.className,
|
|
)}
|
|
>
|
|
<p {...textProps}>{message.message}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|