42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
import React from 'react'
|
|
|
|
type ToastVariant = 'success' | 'error'
|
|
|
|
interface ToastBubbleProps {
|
|
message: string
|
|
variant?: ToastVariant
|
|
topOffsetClass?: string // e.g. 'top-24'
|
|
zIndexClass?: string // allow override when需要更高层级
|
|
}
|
|
|
|
export default function ToastBubble({
|
|
message,
|
|
variant = 'success',
|
|
topOffsetClass = 'top-24',
|
|
zIndexClass = 'z-[200]',
|
|
}: ToastBubbleProps) {
|
|
return (
|
|
<div className={`fixed ${topOffsetClass} inset-x-0 ${zIndexClass} flex justify-center px-4 pointer-events-none`}>
|
|
<div
|
|
role={variant === 'error' ? 'alert' : 'status'}
|
|
className={`pointer-events-auto min-w-0 max-w-[40rem] px-4 py-2 rounded-2xl shadow-lg border text-sm font-medium flex items-center gap-2 ${
|
|
variant === 'success'
|
|
? 'bg-emerald-700 border-emerald-700 text-white'
|
|
: 'bg-rose-700 border-rose-700 text-white'
|
|
}`}
|
|
>
|
|
{variant === 'success' ? (
|
|
<svg aria-hidden="true" className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
) : (
|
|
<svg aria-hidden="true" className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
)}
|
|
<span className="min-w-0 break-words">{message}</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|