eigen/trackgo-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

feat: add optional action props to system pages for enhanced user navigation

Browse Source
This commit is contained in:
Firman Ramdhani
2026-01-21 10:10:52 +07:00
parent 6003d3cea2
commit 9fc1ef029c
4 changed files with 94 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/system-pages/coming-soon.tsx
+18 -7
View File
@@ -1,4 +1,10 @@
export function ComingSoon() { interface ComingSoonProps {
showActions?: boolean;
}
export function ComingSoon(props: ComingSoonProps) {
const { showActions = false } = props;
return ( return (
<div className="flex min-h-screen items-center justify-center bg-white px-4"> <div className="flex min-h-screen items-center justify-center bg-white px-4">
<div className="w-full max-w-md text-center"> <div className="w-full max-w-md text-center">
@@ -6,7 +12,7 @@ export function ComingSoon() {
<p className="text-sm font-medium uppercase tracking-widest text-gray-400">Coming Soon</p> <p className="text-sm font-medium uppercase tracking-widest text-gray-400">Coming Soon</p>
{/* Title */} {/* Title */}
<h1 className="mt-3 text-6xl font-extrabold text-gray-900">Feature in Progress</h1> <h1 className="mt-3 text-6xl font-extrabold text-brand-900">Feature in Progress</h1>
{/* Description */} {/* Description */}
<p className="mt-4 text-base text-gray-500"> <p className="mt-4 text-base text-gray-500">
@@ -14,11 +20,16 @@ export function ComingSoon() {
</p> </p>
{/* Actions */} {/* Actions */}
<div className="mt-8 flex justify-center gap-3"> {showActions && (
<a href="/" className="rounded-md bg-gray-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-800"> <div className="mt-8 flex justify-center gap-3">
Back to Home <a
</a> href="/"
</div> className="rounded-md bg-brand-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-800"
>
Back to Home
</a>
</div>
)}
</div> </div>
</div> </div>
); );
packages/ui/src/components/system-pages/forbidden.tsx
+29 -13
View File
@@ -1,4 +1,11 @@
export function Forbidden() { interface ForbiddenProps {
showActionsBack?: boolean;
showActionsHome?: boolean;
}
export function Forbidden(props: ForbiddenProps) {
const { showActionsBack = true, showActionsHome = true } = props;
return ( return (
<div className="flex min-h-screen items-center justify-center bg-white px-4"> <div className="flex min-h-screen items-center justify-center bg-white px-4">
<div className="w-full max-w-md text-center"> <div className="w-full max-w-md text-center">
@@ -6,7 +13,7 @@ export function Forbidden() {
<p className="text-sm font-medium uppercase tracking-widest text-gray-400">403 Error</p> <p className="text-sm font-medium uppercase tracking-widest text-gray-400">403 Error</p>
{/* Title */} {/* Title */}
<h1 className="mt-3 text-6xl font-extrabold text-gray-900">Access Denied</h1> <h1 className="mt-3 text-6xl font-extrabold text-brand-900">Access Denied</h1>
{/* Description */} {/* Description */}
<p className="mt-4 text-base text-gray-500"> <p className="mt-4 text-base text-gray-500">
@@ -15,18 +22,27 @@ export function Forbidden() {
</p> </p>
{/* Actions */} {/* Actions */}
<div className="mt-8 flex justify-center gap-3"> {(showActionsBack || showActionsHome) && (
<button <div className="mt-8 flex justify-center gap-3">
onClick={() => window.history.back()} {showActionsBack && (
className="rounded-md border border-gray-300 px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-100" <button
> onClick={() => window.history.back()}
Go Back className="rounded-md border border-gray-300 px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-100 cursor-pointer"
</button> >
Go Back
</button>
)}
<a href="/" className="rounded-md bg-gray-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-800"> {showActionsHome && (
Back to Home <a
</a> href="/"
</div> className="rounded-md bg-brand-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-800"
>
Back to Home
</a>
)}
</div>
)}
</div> </div>
</div> </div>
); );
packages/ui/src/components/system-pages/maintenance.tsx
+18 -7
View File
@@ -1,4 +1,10 @@
export function Maintenance() { interface MaintenanceProps {
showActions?: boolean;
}
export function Maintenance(props: MaintenanceProps) {
const { showActions = false } = props;
return ( return (
<div className="flex min-h-screen items-center justify-center bg-white px-4"> <div className="flex min-h-screen items-center justify-center bg-white px-4">
<div className="w-full max-w-md text-center"> <div className="w-full max-w-md text-center">
@@ -6,7 +12,7 @@ export function Maintenance() {
<p className="text-sm font-medium uppercase tracking-widest text-gray-400">Maintenance</p> <p className="text-sm font-medium uppercase tracking-widest text-gray-400">Maintenance</p>
{/* Title */} {/* Title */}
<h1 className="mt-3 text-6xl font-extrabold text-gray-900">We'll Be Back Soon</h1> <h1 className="mt-3 text-6xl font-extrabold text-brand-900">We'll Be Back Soon</h1>
{/* Description */} {/* Description */}
<p className="mt-4 text-base text-gray-500"> <p className="mt-4 text-base text-gray-500">
@@ -15,11 +21,16 @@ export function Maintenance() {
</p> </p>
{/* Optional Actions */} {/* Optional Actions */}
<div className="mt-8 flex justify-center gap-3"> {showActions && (
<a href="/" className="rounded-md bg-gray-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-800"> <div className="mt-8 flex justify-center gap-3">
Back to Home <a
</a> href="/"
</div> className="rounded-md bg-brand-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-800"
>
Back to Home
</a>
</div>
)}
</div> </div>
</div> </div>
); );
packages/ui/src/components/system-pages/not-found.tsx
+29 -13
View File
@@ -1,27 +1,43 @@
export function NotFound() { interface NotFoundProps {
showActionsBack?: boolean;
showActionsHome?: boolean;
}
export function NotFound(props: NotFoundProps) {
const { showActionsBack = true, showActionsHome = true } = props;
return ( return (
<div className="flex min-h-screen items-center justify-center bg-white px-4"> <div className="flex min-h-screen items-center justify-center bg-white px-4">
<div className="w-full max-w-md text-center"> <div className="w-full max-w-md text-center">
<p className="text-sm font-medium uppercase tracking-widest text-gray-400">404 Error</p> <p className="text-sm font-medium uppercase tracking-widest text-gray-400">404 Error</p>
<h1 className="mt-3 text-6xl font-extrabold text-gray-900">Page Not Found</h1> <h1 className="mt-3 text-6xl font-extrabold text-brand-900">Page Not Found</h1>
<p className="mt-4 text-base text-gray-500"> <p className="mt-4 text-base text-gray-500">
Sorry, the page you’re looking for doesn’t exist or has been moved. Sorry, the page you’re looking for doesn’t exist or has been moved.
</p> </p>
<div className="mt-8 flex justify-center gap-3"> {(showActionsBack || showActionsHome) && (
<button <div className="mt-8 flex justify-center gap-3">
onClick={() => window.history.back()} {showActionsBack && (
className="rounded-md border border-gray-300 px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-100" <button
> onClick={() => window.history.back()}
Go Back className="rounded-md border border-gray-300 px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-100 cursor-pointer"
</button> >
Go Back
</button>
)}
<a href="/" className="rounded-md bg-gray-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-800"> {showActionsHome && (
Back to Home <a
</a> href="/"
</div> className="rounded-md bg-brand-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-brand-800"
>
Back to Home
</a>
)}
</div>
)}
</div> </div>
</div> </div>
); );