Added reserve details page

src/app/reserves/[slug]/page.tsx

@@ -0,0 +1,43 @@
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { Container } from 'components';
+import { ReserveInfo } from 'components';
+import { reserves } from 'config/reserves';
+
+interface PageProps {
+  params: {
+    slug: string;
+  };
+}
+
+export async function generateMetadata(props: PageProps): Promise<Metadata> {
+  const reserve = reserves.find(reserve => reserve.slug === props.params.slug);
+
+  return {
+    title: `${reserve?.name} - TackleBox`,
+  };
+}
+
+export async function generateStaticParams() {
+  return reserves.map(reserve => ({ slug: reserve.slug }));
+}
+
+const ReserveDetailsPage = (props: PageProps) => {
+  const {
+    params: { slug },
+  } = props;
+
+  // Ensure the reserve exists before continuing
+  const reserve = reserves.find(r => r.slug === slug);
+  if (!reserve) {
+    return notFound();
+  }
+
+  return (
+    <Container>
+      <ReserveInfo reserve={reserve} />
+    </Container>
+  );
+};
+
+export default ReserveDetailsPage;

src/components/NavigationRail/NavigationRail.tsx

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { FaHome } from 'react-icons/fa';
-import { FaFishFins } from 'react-icons/fa6';
+import { FaFishFins, FaRegMap } from 'react-icons/fa6';
 import styles from './NavigationRail.module.css';
 
 export const NavigationRail = () => {
@@ -33,6 +33,16 @@ export const NavigationRail = () => {
             <div className={styles.NavigationRailMenuItemLabel}>Fishes</div>
           </Link>
         </li>
+        <li
+          className={clsx(styles.NavigationRailMenuItem, {
+            [styles.NavigationRailMenuItemActive]: pathname === '/reserves',
+          })}
+        >
+          <Link className={styles.NavigationRailMenuItemLink} href="/reserves">
+            <FaRegMap className={styles.NavigationRailMenuItemIcon} />
+            <div className={styles.NavigationRailMenuItemLabel}>Reserves</div>
+          </Link>
+        </li>
       </ul>
     </div>
   );