56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/Alert'
|
|
import { useBackendState } from '@/stores/state'
|
|
import { useEffect, useState } from 'react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
// import Button from '@/components/ui/Button'
|
|
// import { controlButtonVariant } from '@/lib/constants'
|
|
|
|
import { AlertCircle } from 'lucide-react'
|
|
|
|
const MessageAlert = () => {
|
|
const health = useBackendState.use.health()
|
|
const message = useBackendState.use.message()
|
|
const messageTitle = useBackendState.use.messageTitle()
|
|
const [isMounted, setIsMounted] = useState(false)
|
|
|
|
useEffect(() => {
|
|
setTimeout(() => {
|
|
setIsMounted(true)
|
|
}, 50)
|
|
}, [])
|
|
|
|
return (
|
|
<Alert
|
|
// variant={health ? 'default' : 'destructive'}
|
|
className={cn(
|
|
'bg-background/90 absolute top-12 left-1/2 flex w-auto max-w-lg -translate-x-1/2 transform items-center gap-4 shadow-md backdrop-blur-lg transition-all duration-500 ease-in-out',
|
|
isMounted ? 'translate-y-0 opacity-100' : '-translate-y-20 opacity-0',
|
|
!health && 'bg-red-700 text-white'
|
|
)}
|
|
>
|
|
{!health && (
|
|
<div>
|
|
<AlertCircle className="size-4" />
|
|
</div>
|
|
)}
|
|
<div>
|
|
<AlertTitle className="font-bold">{messageTitle}</AlertTitle>
|
|
<AlertDescription>{message}</AlertDescription>
|
|
</div>
|
|
{/* <div className="flex">
|
|
<div className="flex-auto" />
|
|
<Button
|
|
size="sm"
|
|
variant={controlButtonVariant}
|
|
className="border-primary max-h-8 border !p-2 text-xs"
|
|
onClick={() => useBackendState.getState().clear()}
|
|
>
|
|
Close
|
|
</Button>
|
|
</div> */}
|
|
</Alert>
|
|
)
|
|
}
|
|
|
|
export default MessageAlert
|