update designs a lot

Author: kentcdodds

exercises/02.linking/README.mdx

@@ -0,0 +1,33 @@
+{
+  "name": "exercises_03.nested-routes_02.problem.nested-path",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "imports": {
+    "#src/*": "./src/*"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "test": "playwright test --config=./tests/playwright.config.ts"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.0.9",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router": "^7.2.0",
+    "tailwindcss": "^4.0.9"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.50.1",
+    "@types/node": "^22.13.5",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^5.7.3",
+    "vite": "^6.2.0"
+  }
+}

exercises/03.nested-routes/02.problem.nested-layout/.gitignore renamed to exercises/03.nested-routes/02.problem.nested-path/.gitignore

@@ -0,0 +1,21 @@
+import {
+	createBrowserRouter,
+	createRoutesFromElements,
+	Route,
+} from 'react-router'
+import { AboutRoute } from './routes/app/marketing/about.tsx'
+import { HomepageRoute } from './routes/app/marketing/homepage.tsx'
+import { MarketingLayout } from './routes/app/marketing/layout.tsx'
+
+export const router = createBrowserRouter(
+	createRoutesFromElements(
+		// 🐨 set the path for the MarketingLayout to "/"
+		// 💯 play around with setting the path to "/app" and see how that affects things
+		<Route element={<MarketingLayout />}>
+			{/* 🐨 remove the path from the HomepageRoute and add the index prop */}
+			<Route path="/" element={<HomepageRoute />} />
+			{/* 🐨 remove the "/" from about to make it relative to the parent route */}
+			<Route path="/about" element={<AboutRoute />} />
+		</Route>,
+	),
+)

exercises/03.nested-routes/02.problem.nested-path/README.mdx

@@ -0,0 +1,54 @@
+import { Link, Outlet } from 'react-router'
+import { ButtonLink } from '#src/components/button.tsx'
+
+export function MarketingLayout() {
+	return (
+		<div className="bg-background flex h-screen flex-col">
+			<header className="bg-background-alt px-4 py-3">
+				<div className="container mx-auto flex max-w-6xl items-center justify-between">
+					<Link
+						to="/"
+						className="text-foreground text-2xl font-bold hover:no-underline focus:no-underline"
+					>
+						gratitext
+					</Link>
+					<nav>
+						<ButtonLink to="/recipients">Recipients</ButtonLink>
+					</nav>
+				</div>
+			</header>
+
+			<div className="flex min-h-0 flex-1 flex-grow flex-col">
+				<div className="flex h-full flex-grow flex-col">
+					<main className="container mx-auto max-w-6xl flex-1 px-4 py-8">
+						<Outlet />
+					</main>
+
+					<footer className="bg-background-alt px-4 py-8">
+						<div className="container mx-auto max-w-6xl">
+							<div className="mb-8 flex items-center justify-between">
+								<Link
+									to="/"
+									className="text-foreground-alt text-xl font-bold hover:no-underline focus:no-underline"
+								>
+									gratitext
+								</Link>
+								<nav className="flex gap-8">
+									<Link to="/contact">Contact</Link>
+									<Link to="/about">About</Link>
+								</nav>
+							</div>
+							<div className="border-border flex items-center justify-between border-t pt-8 text-sm">
+								<div>All Rights Reserved</div>
+								<div className="flex gap-6">
+									<Link to="/terms">Terms and Conditions</Link>
+									<Link to="/privacy">Privacy Policy</Link>
+								</div>
+							</div>
+						</div>
+					</footer>
+				</div>
+			</div>
+		</div>
+	)
+}

exercises/03.nested-routes/02.problem.nested-layout/index.html renamed to exercises/03.nested-routes/02.problem.nested-path/index.html

@@ -0,0 +1,33 @@
+{
+  "name": "exercises_03.nested-routes_02.solution.nested-path",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "imports": {
+    "#src/*": "./src/*"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "test": "playwright test --config=./tests/playwright.config.ts"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.0.9",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router": "^7.2.0",
+    "tailwindcss": "^4.0.9"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.50.1",
+    "@types/node": "^22.13.5",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^5.7.3",
+    "vite": "^6.2.0"
+  }
+}

exercises/03.nested-routes/02.problem.nested-path/package.json

@@ -0,0 +1,17 @@
+import {
+	createBrowserRouter,
+	createRoutesFromElements,
+	Route,
+} from 'react-router'
+import { AboutRoute } from './routes/app/marketing/about.tsx'
+import { HomepageRoute } from './routes/app/marketing/homepage.tsx'
+import { MarketingLayout } from './routes/app/marketing/layout.tsx'
+
+export const router = createBrowserRouter(
+	createRoutesFromElements(
+		<Route path="/" element={<MarketingLayout />}>
+			<Route index element={<HomepageRoute />} />
+			<Route path="about" element={<AboutRoute />} />
+		</Route>,
+	),
+)

exercises/03.nested-routes/02.problem.nested-layout/public/favicon.ico renamed to exercises/03.nested-routes/02.problem.nested-path/public/favicon.ico

@@ -0,0 +1,54 @@
+import { Link, Outlet } from 'react-router'
+import { ButtonLink } from '#src/components/button.tsx'
+
+export function MarketingLayout() {
+	return (
+		<div className="bg-background flex h-screen flex-col">
+			<header className="bg-background-alt px-4 py-3">
+				<div className="container mx-auto flex max-w-6xl items-center justify-between">
+					<Link
+						to="/"
+						className="text-foreground text-2xl font-bold hover:no-underline focus:no-underline"
+					>
+						gratitext
+					</Link>
+					<nav>
+						<ButtonLink to="/recipients">Recipients</ButtonLink>
+					</nav>
+				</div>
+			</header>
+
+			<div className="flex min-h-0 flex-1 flex-grow flex-col">
+				<div className="flex h-full flex-grow flex-col">
+					<main className="container mx-auto max-w-6xl flex-1 px-4 py-8">
+						<Outlet />
+					</main>
+
+					<footer className="bg-background-alt px-4 py-8">
+						<div className="container mx-auto max-w-6xl">
+							<div className="mb-8 flex items-center justify-between">
+								<Link
+									to="/"
+									className="text-foreground-alt text-xl font-bold hover:no-underline focus:no-underline"
+								>
+									gratitext
+								</Link>
+								<nav className="flex gap-8">
+									<Link to="/contact">Contact</Link>
+									<Link to="/about">About</Link>
+								</nav>
+							</div>
+							<div className="border-border flex items-center justify-between border-t pt-8 text-sm">
+								<div>All Rights Reserved</div>
+								<div className="flex gap-6">
+									<Link to="/terms">Terms and Conditions</Link>
+									<Link to="/privacy">Privacy Policy</Link>
+								</div>
+							</div>
+						</div>
+					</footer>
+				</div>
+			</div>
+		</div>
+	)
+}

exercises/03.nested-routes/02.problem.nested-layout/public/favicon.svg renamed to exercises/03.nested-routes/02.problem.nested-path/public/favicon.svg

@@ -1,5 +1,5 @@
 {
-  "name": "exercises_03.nested-routes_02.problem.nested-layout",
+  "name": "exercises_03.nested-routes_03.problem.nested-layout",
   "private": true,
   "version": "0.0.0",
   "type": "module",