rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: redesign error page and add reload button

Browse source
This commit is contained in:
swve 2024-03-04 19:58:49 +01:00
parent 8c47e5ff4e
commit 0893c83461
1 changed files with 24 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

36
apps/web/components/StyledElements/Error/Error.tsx
View file

@ -1,18 +1,30 @@
import { XCircle } from 'lucide-react'
'use client'
import { AlertTriangle, RefreshCcw } from 'lucide-react'
import { useRouter } from 'next/navigation'
import React from 'react'
function ErrorUI() {
const router = useRouter()
function reloadPage() {
router.refresh()
window.location.reload()
}
return (
<div className="flex items-center justify-center h-screen">
<div className="mx-auto bg-red-100 w-[800px] p-3 rounded-xl m-5 ">
<div className="flex flex-row">
<div className="p-3 pr-4 items-center">
<XCircle size={40} className="text-red-600" />
</div>
<div className="p-3 ">
<h1 className="text-2xl font-bold text-red-600">Error</h1>
<p className="pt-0 text-md text-red-600">Something went wrong</p>
</div>
</div>
<div className="flex flex-col py-10 mx-auto antialiased items-center space-y-6 bg-gradient-to-b from-rose-100 to-rose-100/5 ">
<div className="flex flex-row items-center space-x-5 rounded-xl ">
<AlertTriangle className="text-rose-700" size={45} />
<p className="text-3xl font-bold text-rose-700">Something went wrong</p>
</div>
<div>
<button
onClick={() => reloadPage()}
className="flex space-x-2 items-center rounded-full px-4 py-1 text-rose-200 bg-rose-700 hover:bg-rose-800 transition-all ease-linear shadow-lg "
>
<RefreshCcw className="text-rose-200" size={17} />
<span className="text-md font-bold">Retry</span>
</button>
</div>
</div>
)