root
45 lines
2.1 KiB
TypeScript
45 lines
2.1 KiB
TypeScript
/**
|
|
* ANNOTATED COPY — every line explained
|
|
* Source: src/app/not-found.tsx
|
|
* NOT used by the app — read this to learn how the real file works
|
|
*/
|
|
// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
|
|
'use client';
|
|
// (blank line — separates logical blocks for readability)
|
|
// Next.js Link — fast client-side navigation without full page reload
|
|
import Link from 'next/link';
|
|
// Import project module (@/ alias = src/ folder in tsconfig)
|
|
import Button from '@/components/ui/Button';
|
|
// Import project module (@/ alias = src/ folder in tsconfig)
|
|
import { useTranslation } from '@/hooks/useTranslation';
|
|
// (blank line — separates logical blocks for readability)
|
|
// Default export — main component/page Next.js or other files import
|
|
export default function NotFound() {
|
|
// Custom hook — returns t() translator and current locale
|
|
const { t } = useTranslation();
|
|
// (blank line — separates logical blocks for readability)
|
|
// Return JSX — describes UI tree React renders to the DOM
|
|
return (
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<div className="flex min-h-[60vh] flex-col items-center justify-center px-4 text-center">
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<h1 className="mb-2 font-display text-6xl font-bold text-brand-900">
|
|
// Line 13: {t('notFound.title')}
|
|
{t('notFound.title')}
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</h1>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<p className="mb-6 text-lg text-gray-500">{t('notFound.message')}</p>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<Link href="/">
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
<Button>{t('notFound.goHome')}</Button>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</Link>
|
|
// JSX element — HTML-like tag becomes React component in browser
|
|
</div>
|
|
// Line 20: );
|
|
);
|
|
// Closing brace — end of block (function, if, object, JSX)
|
|
}
|