42 lines
1.4 KiB
TypeScript
42 lines
1.4 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 pointer-events-none`}>
|
|
<div
|
|
className={`pointer-events-auto px-4 py-2 rounded-full shadow-lg border text-sm font-medium flex items-center gap-2 backdrop-blur-md ${
|
|
variant === 'success'
|
|
? 'bg-emerald-500/95 border-emerald-400 text-white'
|
|
: 'bg-rose-500/95 border-rose-400 text-white'
|
|
}`}
|
|
>
|
|
{variant === 'success' ? (
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
) : (
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
)}
|
|
<span>{message}</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|