Jason Woltje
d0c720e6da
All checks were successful
ci/woodpecker/push/web Pipeline was successful
Co-authored-by: Jason Woltje <jason@diversecanvas.com> Co-committed-by: Jason Woltje <jason@diversecanvas.com>
161 lines
4.3 KiB
TypeScript
161 lines
4.3 KiB
TypeScript
import type { ReactElement } from "react";
|
|
import Link from "next/link";
|
|
|
|
export default function AuthenticatedNotFound(): ReactElement {
|
|
return (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
minHeight: "60vh",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
gap: "24px",
|
|
padding: "48px 40px",
|
|
background: "var(--surface)",
|
|
border: "1px solid var(--border)",
|
|
borderRadius: "var(--r-xl)",
|
|
boxShadow: "var(--shadow-md)",
|
|
textAlign: "center",
|
|
maxWidth: "420px",
|
|
width: "100%",
|
|
}}
|
|
>
|
|
{/* Compass icon in blue-tinted icon well */}
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
width: 56,
|
|
height: 56,
|
|
borderRadius: "var(--r-lg)",
|
|
background: "rgba(47, 128, 255, 0.1)",
|
|
color: "var(--ms-blue-400)",
|
|
}}
|
|
>
|
|
<svg
|
|
width="28"
|
|
height="28"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="1.5"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
aria-hidden="true"
|
|
>
|
|
<circle cx="12" cy="12" r="10" />
|
|
<polygon
|
|
points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"
|
|
fill="currentColor"
|
|
stroke="none"
|
|
opacity="0.3"
|
|
/>
|
|
<polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" />
|
|
</svg>
|
|
</div>
|
|
|
|
{/* 404 badge pill */}
|
|
<span
|
|
style={{
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
padding: "4px 12px",
|
|
borderRadius: "9999px",
|
|
fontSize: "0.75rem",
|
|
fontWeight: 600,
|
|
fontFamily: "var(--mono)",
|
|
background: "rgba(47, 128, 255, 0.15)",
|
|
color: "var(--ms-blue-400)",
|
|
}}
|
|
>
|
|
404
|
|
</span>
|
|
|
|
{/* Heading + description */}
|
|
<div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
|
|
<h2
|
|
style={{
|
|
fontSize: "1.25rem",
|
|
fontWeight: 600,
|
|
color: "var(--text)",
|
|
margin: 0,
|
|
letterSpacing: "-0.01em",
|
|
}}
|
|
>
|
|
Page not found
|
|
</h2>
|
|
<p
|
|
style={{
|
|
fontSize: "0.875rem",
|
|
color: "var(--muted)",
|
|
margin: 0,
|
|
lineHeight: 1.6,
|
|
}}
|
|
>
|
|
This page doesn't exist or you may not have permission to view it.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Action buttons */}
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "12px",
|
|
marginTop: "8px",
|
|
}}
|
|
>
|
|
{/* Primary: Dashboard */}
|
|
<Link
|
|
href="/"
|
|
style={{
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
padding: "9px 20px",
|
|
background: "var(--ms-blue-500)",
|
|
color: "#ffffff",
|
|
borderRadius: "var(--r)",
|
|
fontSize: "0.875rem",
|
|
fontWeight: 500,
|
|
textDecoration: "none",
|
|
transition: "opacity 0.15s ease",
|
|
}}
|
|
>
|
|
Dashboard
|
|
</Link>
|
|
|
|
{/* Ghost: Settings */}
|
|
<Link
|
|
href="/settings"
|
|
style={{
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
padding: "9px 20px",
|
|
background: "transparent",
|
|
color: "var(--text-2)",
|
|
border: "1px solid var(--border)",
|
|
borderRadius: "var(--r)",
|
|
fontSize: "0.875rem",
|
|
fontWeight: 500,
|
|
textDecoration: "none",
|
|
transition: "all 0.15s ease",
|
|
}}
|
|
>
|
|
Settings
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|