67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
import { Transition } from '@headlessui/react'
|
|
import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
|
|
import { isRouteErrorResponse, useRouteError } from '@remix-run/react'
|
|
import clsx from 'clsx'
|
|
import { Fragment, useEffect, useState } from 'react'
|
|
|
|
import Code from './Code'
|
|
|
|
type Properties = {
|
|
readonly type?: 'full' | 'embedded';
|
|
}
|
|
|
|
export function ErrorPopup({ type = 'full' }: Properties) {
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
const error = useRouteError()
|
|
const routing = isRouteErrorResponse(error)
|
|
const message = (error instanceof Error ? error.message : 'An unexpected error occurred')
|
|
console.error(error)
|
|
|
|
// Debounce the error modal so it doesn't show up for a split second
|
|
// when the user navigates to a new page.
|
|
useEffect(() => {
|
|
setTimeout(() => {
|
|
setIsOpen(true)
|
|
}, 150)
|
|
}, [])
|
|
|
|
return (
|
|
<Transition as={Fragment} show={isOpen}>
|
|
<Transition.Child
|
|
as={Fragment}
|
|
enter='ease-out duration-150'
|
|
enterFrom='opacity-0 scale-95'
|
|
enterTo='opacity-100 scale-100'
|
|
>
|
|
|
|
<div className={clsx(
|
|
'flex items-center justify-center overflow-clip',
|
|
type === 'full' ? 'min-h-screen' : 'mt-24'
|
|
)}
|
|
>
|
|
<div className={clsx(
|
|
'flex flex-col items-center justify-center space-y-2 w-full sm:w-1/2 xl:w-1/3',
|
|
'bg-white dark:bg-zinc-800 rounded-lg py-8 px-4 md:px-16',
|
|
'border border-gray-200 dark:border-zinc-700 text-center'
|
|
)}
|
|
>
|
|
<ExclamationTriangleIcon className='w-12 h-12 text-red-500'/>
|
|
<h1 className='text-2xl font-semibold text-gray-800 dark:text-gray-100'>
|
|
{routing ? error.status : 'Error'}
|
|
</h1>
|
|
{routing ? (
|
|
<p className='text-gray-500 dark:text-gray-400'>
|
|
{error.statusText}
|
|
</p>
|
|
) : (
|
|
<Code className='text-sm'>
|
|
{message}
|
|
</Code>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Transition.Child>
|
|
</Transition>
|
|
)
|
|
}
|