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
+14 -3
View File
@@ -1,4 +1,10 @@
export function ComingSoon() {
interface ComingSoonProps {
showActions?: boolean;
}
export function ComingSoon(props: ComingSoonProps) {
const { showActions = false } = props;
return (
<div className="flex min-h-screen items-center justify-center bg-white px-4">
<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>
{/* 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 */}
<p className="mt-4 text-base text-gray-500">
@@ -14,11 +20,16 @@ export function ComingSoon() {
</p>
{/* Actions */}
{showActions && (
<div className="mt-8 flex justify-center gap-3">
<a href="/" className="rounded-md bg-gray-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-800">
<a
href="/"
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>
);
packages/ui/src/components/system-pages/forbidden.tsx
+20 -4
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 (
<div className="flex min-h-screen items-center justify-center bg-white px-4">
<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>
{/* 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 */}
<p className="mt-4 text-base text-gray-500">
@@ -15,18 +22,27 @@ export function Forbidden() {
</p>
{/* Actions */}
{(showActionsBack || showActionsHome) && (
<div className="mt-8 flex justify-center gap-3">
{showActionsBack && (
<button
onClick={() => window.history.back()}
className="rounded-md border border-gray-300 px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-100"
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"
>
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 && (
<a
href="/"
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>
);
packages/ui/src/components/system-pages/maintenance.tsx
+14 -3
View File
@@ -1,4 +1,10 @@
export function Maintenance() {
interface MaintenanceProps {
showActions?: boolean;
}
export function Maintenance(props: MaintenanceProps) {
const { showActions = false } = props;
return (
<div className="flex min-h-screen items-center justify-center bg-white px-4">
<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>
{/* 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 */}
<p className="mt-4 text-base text-gray-500">
@@ -15,11 +21,16 @@ export function Maintenance() {
</p>
{/* Optional Actions */}
{showActions && (
<div className="mt-8 flex justify-center gap-3">
<a href="/" className="rounded-md bg-gray-900 px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-800">
<a
href="/"
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>
);
packages/ui/src/components/system-pages/not-found.tsx
+20 -4
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 (
<div className="flex min-h-screen items-center justify-center bg-white px-4">
<div className="w-full max-w-md text-center">
<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">
Sorry, the page you’re looking for doesn’t exist or has been moved.
</p>
{(showActionsBack || showActionsHome) && (
<div className="mt-8 flex justify-center gap-3">
{showActionsBack && (
<button
onClick={() => window.history.back()}
className="rounded-md border border-gray-300 px-5 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-100"
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"
>
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 && (
<a
href="/"
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>
);