Parity with starting state of RRv7 Tutorial Address Book

2025-04-01 10:57:36 +02:00
parent cf2cd294ee
commit d2ec794846
10 changed files with 899 additions and 298 deletions
--- a/package.json
+++ b/package.json
@@ -9,17 +9,22 @@
    "lint": "next lint"
  },
  "dependencies": {
+    "match-sorter": "^8.0.0",
+    "next": "15.2.4",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
-    "next": "15.2.4"
+    "sort-by": "^1.2.0",
+    "tiny-invariant": "^1.3.3"
  },
  "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
+    "@next/eslint-plugin-next": "^15.2.4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.2.4",
-    "@eslint/eslintrc": "^3"
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "typescript": "^5"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:

  .:
    dependencies:
+      match-sorter:
+        specifier: ^8.0.0
+        version: 8.0.0
      next:
        specifier: 15.2.4
        version: 15.2.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -17,10 +20,19 @@ importers:
      react-dom:
        specifier: ^19.0.0
        version: 19.1.0(react@19.1.0)
+      sort-by:
+        specifier: ^1.2.0
+        version: 1.2.0
+      tiny-invariant:
+        specifier: ^1.3.3
+        version: 1.3.3
    devDependencies:
      '@eslint/eslintrc':
        specifier: ^3
        version: 3.3.1
+      '@next/eslint-plugin-next':
+        specifier: ^15.2.4
+        version: 15.2.4
      '@types/node':
        specifier: ^20
        version: 20.17.29
@@ -36,12 +48,19 @@ importers:
      eslint-config-next:
        specifier: 15.2.4
        version: 15.2.4(eslint@9.23.0)(typescript@5.8.2)
+      eslint-plugin-react-hooks:
+        specifier: ^5.2.0
+        version: 5.2.0(eslint@9.23.0)
      typescript:
        specifier: ^5
        version: 5.8.2

 packages:

+  '@babel/runtime@7.27.0':
+    resolution: {integrity: sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==}
+    engines: {node: '>=6.9.0'}
+
  '@emnapi/core@1.4.0':
    resolution: {integrity: sha512-H+N/FqT07NmLmt6OFFtDfwe8PNygprzBikrEMyQfgqSmT0vzE515Pz7R8izwB9q/zsH/MA64AKoul3sA6/CzVg==}

@@ -1099,6 +1118,9 @@ packages:
    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
    hasBin: true

+  match-sorter@8.0.0:
+    resolution: {integrity: sha512-bGJ6Zb+OhzXe+ptP5d80OLVx7AkqfRbtGEh30vNSfjNwllu+hHI+tcbMIT/fbkx/FKN1PmKuDb65+Oofg+XUxw==}
+
  math-intrinsics@1.1.0:
    resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
    engines: {node: '>= 0.4'}
@@ -1165,6 +1187,10 @@ packages:
    resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
    engines: {node: '>= 0.4'}

+  object-path@0.6.0:
+    resolution: {integrity: sha512-fxrwsCFi3/p+LeLOAwo/wyRMODZxdGBtUlWRzsEpsUVrisZbEfZ21arxLGfaWfcnqb8oHPNihIb4XPE8CQPN5A==}
+    engines: {node: '>=0.8.0'}
+
  object.assign@4.1.7:
    resolution: {integrity: sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==}
    engines: {node: '>= 0.4'}
@@ -1265,10 +1291,16 @@ packages:
    resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
    engines: {node: '>= 0.4'}

+  regenerator-runtime@0.14.1:
+    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
+
  regexp.prototype.flags@1.5.4:
    resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
    engines: {node: '>= 0.4'}

+  remove-accents@0.5.0:
+    resolution: {integrity: sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==}
+
  resolve-from@4.0.0:
    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
    engines: {node: '>=4'}
@@ -1359,6 +1391,9 @@ packages:
  simple-swizzle@0.2.2:
    resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}

+  sort-by@1.2.0:
+    resolution: {integrity: sha512-aRyW65r3xMnf4nxJRluCg0H/woJpksU1dQxRtXYzau30sNBOmf5HACpDd9MZDhKh7ALQ5FgSOfMPwZEtUmMqcg==}
+
  source-map-js@1.2.1:
    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
    engines: {node: '>=0.10.0'}
@@ -1422,6 +1457,9 @@ packages:
    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
    engines: {node: '>= 0.4'}

+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
  tinyglobby@0.2.12:
    resolution: {integrity: sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==}
    engines: {node: '>=12.0.0'}
@@ -1511,6 +1549,10 @@ packages:

 snapshots:

+  '@babel/runtime@7.27.0':
+    dependencies:
+      regenerator-runtime: 0.14.1
+
  '@emnapi/core@1.4.0':
    dependencies:
      '@emnapi/wasi-threads': 1.0.1
@@ -2716,6 +2758,11 @@ snapshots:
    dependencies:
      js-tokens: 4.0.0

+  match-sorter@8.0.0:
+    dependencies:
+      '@babel/runtime': 7.27.0
+      remove-accents: 0.5.0
+
  math-intrinsics@1.1.0: {}

  merge2@1.4.1: {}
@@ -2772,6 +2819,8 @@ snapshots:

  object-keys@1.1.1: {}

+  object-path@0.6.0: {}
+
  object.assign@4.1.7:
    dependencies:
      call-bind: 1.0.8
@@ -2887,6 +2936,8 @@ snapshots:
      get-proto: 1.0.1
      which-builtin-type: 1.2.1

+  regenerator-runtime@0.14.1: {}
+
  regexp.prototype.flags@1.5.4:
    dependencies:
      call-bind: 1.0.8
@@ -2896,6 +2947,8 @@ snapshots:
      gopd: 1.2.0
      set-function-name: 2.0.2

+  remove-accents@0.5.0: {}
+
  resolve-from@4.0.0: {}

  resolve-pkg-maps@1.0.0: {}
@@ -3031,6 +3084,10 @@ snapshots:
      is-arrayish: 0.3.2
    optional: true

+  sort-by@1.2.0:
+    dependencies:
+      object-path: 0.6.0
+
  source-map-js@1.2.1: {}

  stable-hash@0.0.5: {}
@@ -3102,6 +3159,8 @@ snapshots:

  supports-preserve-symlinks-flag@1.0.0: {}

+  tiny-invariant@1.3.3: {}
+
  tinyglobby@0.2.12:
    dependencies:
      fdir: 6.4.3(picomatch@4.0.2)
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,2 @@
+onlyBuiltDependencies:
+  - sharp
--- a/src/app/data.ts
+++ b/src/app/data.ts
@@ -0,0 +1,320 @@
+////////////////////////////////////////////////////////////////////////////////
+// 🛑 Nothing in here has anything to do with React Router, it's just a fake database
+////////////////////////////////////////////////////////////////////////////////
+// noinspection UnnecessaryLocalVariableJS,JSUnusedGlobalSymbols
+
+import { matchSorter } from "match-sorter";
+// @ts-expect-error - no types, but it's a tiny function
+import sortBy from "sort-by";
+import invariant from "tiny-invariant";
+
+type ContactMutation = {
+  id?: string;
+  first?: string;
+  last?: string;
+  avatar?: string;
+  twitter?: string;
+  notes?: string;
+  favorite?: boolean;
+};
+
+export type ContactRecord = ContactMutation & {
+  id: string;
+  createdAt: string;
+};
+
+////////////////////////////////////////////////////////////////////////////////
+// This is just a fake DB table. In a real app you'd be talking to a real db or
+// fetching from an existing API.
+const fakeContacts = {
+  records: {} as Record<string, ContactRecord>,
+
+  async getAll(): Promise<ContactRecord[]> {
+    return Object.keys(fakeContacts.records)
+      .map((key) => fakeContacts.records[key])
+      .sort(sortBy("-createdAt", "last"));
+  },
+
+  async get(id: string): Promise<ContactRecord | null> {
+    return fakeContacts.records[id] || null;
+  },
+
+  async create(values: ContactMutation): Promise<ContactRecord> {
+    const id = values.id || Math.random().toString(36).substring(2, 9);
+    const createdAt = new Date().toISOString();
+    const newContact = { id, createdAt, ...values };
+    fakeContacts.records[id] = newContact;
+    return newContact;
+  },
+
+  async set(id: string, values: ContactMutation): Promise<ContactRecord> {
+    const contact = await fakeContacts.get(id);
+    invariant(contact, `No contact found for ${id}`);
+    const updatedContact = { ...contact, ...values };
+    fakeContacts.records[id] = updatedContact;
+    return updatedContact;
+  },
+
+  destroy(id: string): null {
+    delete fakeContacts.records[id];
+    return null;
+  },
+};
+
+////////////////////////////////////////////////////////////////////////////////
+// Handful of helper functions to be called from route loaders and actions
+export async function getContacts(query?: string | null) {
+  await new Promise((resolve) => setTimeout(resolve, 500));
+  let contacts = await fakeContacts.getAll();
+  if (query) {
+    contacts = matchSorter(contacts, query, {
+      keys: ["first", "last"],
+    });
+  }
+  return contacts.sort(sortBy("last", "createdAt"));
+}
+
+export async function createEmptyContact() {
+  const contact = await fakeContacts.create({});
+  return contact;
+}
+
+export async function getContact(id: string) {
+  return fakeContacts.get(id);
+}
+
+export async function updateContact(id: string, updates: ContactMutation) {
+  const contact = await fakeContacts.get(id);
+  if (!contact) {
+    throw new Error(`No contact found for ${id}`);
+  }
+  await fakeContacts.set(id, { ...contact, ...updates });
+  return contact;
+}
+
+export async function deleteContact(id: string) {
+  fakeContacts.destroy(id);
+}
+
+[
+  {
+    avatar:
+      "https://sessionize.com/image/124e-400o400o2-wHVdAuNaxi8KJrgtN3ZKci.jpg",
+    first: "Shruti",
+    last: "Kapoor",
+    twitter: "@shrutikapoor08",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/1940-400o400o2-Enh9dnYmrLYhJSTTPSw3MH.jpg",
+    first: "Glenn",
+    last: "Reyes",
+    twitter: "@glnnrys",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/9273-400o400o2-3tyrUE3HjsCHJLU5aUJCja.jpg",
+    first: "Ryan",
+    last: "Florence",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/d14d-400o400o2-pyB229HyFPCnUcZhHf3kWS.png",
+    first: "Oscar",
+    last: "Newman",
+    twitter: "@__oscarnewman",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/fd45-400o400o2-fw91uCdGU9hFP334dnyVCr.jpg",
+    first: "Michael",
+    last: "Jackson",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/b07e-400o400o2-KgNRF3S9sD5ZR4UsG7hG4g.jpg",
+    first: "Christopher",
+    last: "Chedeau",
+    twitter: "@Vjeux",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/262f-400o400o2-UBPQueK3fayaCmsyUc1Ljf.jpg",
+    first: "Cameron",
+    last: "Matheson",
+    twitter: "@cmatheson",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/820b-400o400o2-Ja1KDrBAu5NzYTPLSC3GW8.jpg",
+    first: "Brooks",
+    last: "Lybrand",
+    twitter: "@BrooksLybrand",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/df38-400o400o2-JwbChVUj6V7DwZMc9vJEHc.jpg",
+    first: "Alex",
+    last: "Anderson",
+    twitter: "@ralex1993",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/5578-400o400o2-BMT43t5kd2U1XstaNnM6Ax.jpg",
+    first: "Kent C.",
+    last: "Dodds",
+    twitter: "@kentcdodds",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/c9d5-400o400o2-Sri5qnQmscaJXVB8m3VBgf.jpg",
+    first: "Nevi",
+    last: "Shah",
+    twitter: "@nevikashah",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/2694-400o400o2-MYYTsnszbLKTzyqJV17w2q.png",
+    first: "Andrew",
+    last: "Petersen",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/907a-400o400o2-9TM2CCmvrw6ttmJiTw4Lz8.jpg",
+    first: "Scott",
+    last: "Smerchek",
+    twitter: "@smerchek",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/08be-400o400o2-WtYGFFR1ZUJHL9tKyVBNPV.jpg",
+    first: "Giovanni",
+    last: "Benussi",
+    twitter: "@giovannibenussi",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/f814-400o400o2-n2ua5nM9qwZA2hiGdr1T7N.jpg",
+    first: "Igor",
+    last: "Minar",
+    twitter: "@IgorMinar",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/fb82-400o400o2-LbvwhTVMrYLDdN3z4iEFMp.jpeg",
+    first: "Brandon",
+    last: "Kish",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/fcda-400o400o2-XiYRtKK5Dvng5AeyC8PiUA.png",
+    first: "Arisa",
+    last: "Fukuzaki",
+    twitter: "@arisa_dev",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/c8c3-400o400o2-PR5UsgApAVEADZRixV4H8e.jpeg",
+    first: "Alexandra",
+    last: "Spalato",
+    twitter: "@alexadark",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/7594-400o400o2-hWtdCjbdFdLgE2vEXBJtyo.jpg",
+    first: "Cat",
+    last: "Johnson",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/5636-400o400o2-TWgi8vELMFoB3hB9uPw62d.jpg",
+    first: "Ashley",
+    last: "Narcisse",
+    twitter: "@_darkfadr",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/6aeb-400o400o2-Q5tAiuzKGgzSje9ZsK3Yu5.JPG",
+    first: "Edmund",
+    last: "Hung",
+    twitter: "@_edmundhung",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/30f1-400o400o2-wJBdJ6sFayjKmJycYKoHSe.jpg",
+    first: "Clifford",
+    last: "Fajardo",
+    twitter: "@cliffordfajard0",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/6faa-400o400o2-amseBRDkdg7wSK5tjsFDiG.jpg",
+    first: "Erick",
+    last: "Tamayo",
+    twitter: "@ericktamayo",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/feba-400o400o2-R4GE7eqegJNFf3cQ567obs.jpg",
+    first: "Paul",
+    last: "Bratslavsky",
+    twitter: "@codingthirty",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/c315-400o400o2-spjM5A6VVfVNnQsuwvX3DY.jpg",
+    first: "Pedro",
+    last: "Cattori",
+    twitter: "@pcattori",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/eec1-400o400o2-HkvWKLFqecmFxLwqR9KMRw.jpg",
+    first: "Andre",
+    last: "Landgraf",
+    twitter: "@AndreLandgraf94",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/c73a-400o400o2-4MTaTq6ftC15hqwtqUJmTC.jpg",
+    first: "Monica",
+    last: "Powell",
+    twitter: "@indigitalcolor",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/cef7-400o400o2-KBZUydbjfkfGACQmjbHEvX.jpeg",
+    first: "Brian",
+    last: "Lee",
+    twitter: "@brian_dlee",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/f83b-400o400o2-Pyw3chmeHMxGsNoj3nQmWU.jpg",
+    first: "Sean",
+    last: "McQuaid",
+    twitter: "@SeanMcQuaidCode",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/a9fc-400o400o2-JHBnWZRoxp7QX74Hdac7AZ.jpg",
+    first: "Shane",
+    last: "Walker",
+    twitter: "@swalker326",
+  },
+  {
+    avatar:
+      "https://sessionize.com/image/6644-400o400o2-aHnGHb5Pdu3D32MbfrnQbj.jpg",
+    first: "Jon",
+    last: "Jensen",
+    twitter: "@jenseng",
+  },
+].forEach((contact) => {
+  fakeContacts.create({
+    ...contact,
+    id: `${contact.first
+      .toLowerCase()
+      .split(" ")
+      .join("_")}-${contact.last.toLocaleLowerCase()}`,
+  });
+});
--- a/src/app/error.tsx
+++ b/src/app/error.tsx
@@ -0,0 +1,26 @@
+'use client'; // Error boundaries must be Client Components
+
+import { useEffect } from 'react';
+
+export default function Error({
+  error,
+}: {
+  error: Error & { digest?: string }
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+
+  return (
+    <main id="error-page">
+      <h1>Error!</h1>
+      <p>{error.message}</p>
+      {error.stack && (
+        <pre>
+          <code>{error.stack}</code>
+        </pre>
+      )}
+    </main>
+  );
+}
--- a/src/app/globals.css
+++ b/src/app/globals.css
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,20 +1,11 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import React from "react";
+
 import "./globals.css";

-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
-
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Next.js Address Book",
+  description: "From the RRv7 tutorial",
 };

 export default function RootLayout({
@@ -24,7 +15,7 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+      <body>
        {children}
      </body>
    </html>
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -0,0 +1,8 @@
+export default function NotFound() {
+  return (
+    <main id="error-page">
+      <h1>404</h1>
+      <p>The requested page could not be found.</p>
+    </main>
+  );
+}
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -1,168 +0,0 @@
-.page {
-  --gray-rgb: 0, 0, 0;
-  --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
-  --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
-
-  --button-primary-hover: #383838;
-  --button-secondary-hover: #f2f2f2;
-
-  display: grid;
-  grid-template-rows: 20px 1fr 20px;
-  align-items: center;
-  justify-items: center;
-  min-height: 100svh;
-  padding: 80px;
-  gap: 64px;
-  font-family: var(--font-geist-sans);
-}
-
-@media (prefers-color-scheme: dark) {
-  .page {
-    --gray-rgb: 255, 255, 255;
-    --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
-    --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
-
-    --button-primary-hover: #ccc;
-    --button-secondary-hover: #1a1a1a;
-  }
-}
-
-.main {
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-  grid-row-start: 2;
-}
-
-.main ol {
-  font-family: var(--font-geist-mono);
-  padding-left: 0;
-  margin: 0;
-  font-size: 14px;
-  line-height: 24px;
-  letter-spacing: -0.01em;
-  list-style-position: inside;
-}
-
-.main li:not(:last-of-type) {
-  margin-bottom: 8px;
-}
-
-.main code {
-  font-family: inherit;
-  background: var(--gray-alpha-100);
-  padding: 2px 4px;
-  border-radius: 4px;
-  font-weight: 600;
-}
-
-.ctas {
-  display: flex;
-  gap: 16px;
-}
-
-.ctas a {
-  appearance: none;
-  border-radius: 128px;
-  height: 48px;
-  padding: 0 20px;
-  border: none;
-  border: 1px solid transparent;
-  transition:
-    background 0.2s,
-    color 0.2s,
-    border-color 0.2s;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px;
-  line-height: 20px;
-  font-weight: 500;
-}
-
-a.primary {
-  background: var(--foreground);
-  color: var(--background);
-  gap: 8px;
-}
-
-a.secondary {
-  border-color: var(--gray-alpha-200);
-  min-width: 158px;
-}
-
-.footer {
-  grid-row-start: 3;
-  display: flex;
-  gap: 24px;
-}
-
-.footer a {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.footer img {
-  flex-shrink: 0;
-}
-
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  a.primary:hover {
-    background: var(--button-primary-hover);
-    border-color: transparent;
-  }
-
-  a.secondary:hover {
-    background: var(--button-secondary-hover);
-    border-color: transparent;
-  }
-
-  .footer a:hover {
-    text-decoration: underline;
-    text-underline-offset: 4px;
-  }
-}
-
-@media (max-width: 600px) {
-  .page {
-    padding: 32px;
-    padding-bottom: 80px;
-  }
-
-  .main {
-    align-items: center;
-  }
-
-  .main ol {
-    text-align: center;
-  }
-
-  .ctas {
-    flex-direction: column;
-  }
-
-  .ctas a {
-    font-size: 14px;
-    height: 40px;
-    padding: 0 16px;
-  }
-
-  a.secondary {
-    min-width: auto;
-  }
-
-  .footer {
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .logo {
-    filter: invert();
-  }
-}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,95 +1,41 @@
-import Image from "next/image";
-import styles from "./page.module.css";
+import Form from "next/form";
+import React from "react";

 export default function Home() {
  return (
-    <div className={styles.page}>
-      <main className={styles.main}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol>
-          <li>
-            Get started by editing <code>src/app/page.tsx</code>.
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
-
-        <div className={styles.ctas}>
-          <a
-            className={styles.primary}
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className={styles.logo}
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
+    <>
+      <div id="sidebar">
+        <h1>React Router Contacts</h1>
+        <div>
+          <Form id="search-form" role="search" action='.' formMethod='get'>
+            <input
+              aria-label="Search contacts"
+              id="q"
+              name="q"
+              placeholder="Search"
+              type="search"
            />
-            Deploy now
-          </a>
-          <a
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-            className={styles.secondary}
-          >
-            Read our docs
-          </a>
+            <div
+              aria-hidden
+              hidden={true}
+              id="search-spinner"
+            />
+          </Form>
+          <Form action='.' formMethod="post">
+            <button type="submit">New</button>
+          </Form>
        </div>
-      </main>
-      <footer className={styles.footer}>
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
+        <nav>
+          <ul>
+            <li>
+              <a href={`/contacts/1`}>Your Name</a>
+            </li>
+            <li>
+              <a href={`/contacts/2`}>Your Friend</a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </>
  );
 }