Skip to content

Commit 5e04e18

Browse files
kentcdoddskentcdodds
committed
add signup route
1 parent 73493ad commit 5e04e18

File tree

10 files changed

+151
-40
lines changed

10 files changed

+151
-40
lines changed

‎exercises/99.final/01.solution.final/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
"private": true,
44
"version": "0.0.0",
55
"type": "module",
6+
"imports": {
7+
"#src/*": "./src/*"
8+
},
69
"scripts": {
710
"dev": "vite",
811
"build": "tsc -b && vite build",

‎exercises/99.final/01.solution.final/src/routes.tsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
11
import { Routes, Route } from 'react-router'
2-
import { Layout } from './routes/layout.tsx'
2+
import { AppLayout } from './routes/app/layout.tsx'
3+
import { RecipientRoute } from './routes/app/recipient.tsx'
4+
import { RecipientsRoute } from './routes/app/recipients.tsx'
35
import { AboutRoute } from './routes/marketing/about.tsx'
46
import { HomepageRoute } from './routes/marketing/homepage.tsx'
57
import { MarketingLayout } from './routes/marketing/layout.tsx'
6-
import { RecipientRoute } from './routes/recipient.tsx'
7-
import { RecipientsRoute } from './routes/recipients.tsx'
8+
import { SignupRoute } from './routes/signup.tsx'
89

910
export function AppRoutes() {
1011
return (
1112
<Routes>
12-
<Route element={<Layout />}>
13+
<Route element={<AppLayout />}>
1314
<Route path="/" element={<MarketingLayout />}>
1415
<Route index element={<HomepageRoute />} />
1516
<Route path="about" element={<AboutRoute />} />
1617
</Route>
17-
<Route path="/recipients" element={<RecipientsRoute />} />
18-
<Route path="/recipients/:id" element={<RecipientRoute />} />
18+
<Route path="recipients" element={<RecipientsRoute />} />
19+
<Route path="recipients/:id" element={<RecipientRoute />} />
1920
</Route>
21+
<Route path="/signup" element={<SignupRoute />} />
2022
</Routes>
2123
)
2224
}

‎exercises/99.final/01.solution.final/src/routes/layout.tsx renamed to ‎exercises/99.final/01.solution.final/src/routes/app/layout.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Link, Outlet } from 'react-router'
2-
import { LinkButton } from '../components/button.tsx'
2+
import { LinkButton } from '#src/components/button.tsx'
33

4-
export function Layout() {
4+
export function AppLayout() {
55
return (
66
<div className="bg-background flex min-h-screen flex-col">
77
<header className="bg-background-alt px-4 py-3">
@@ -12,9 +12,8 @@ export function Layout() {
1212
>
1313
gratitext
1414
</Link>
15-
<nav className="flex items-center space-x-6">
16-
<Link to="/login">Log in</Link>
17-
<LinkButton to="/signup">Start 14-day trial</LinkButton>
15+
<nav>
16+
<LinkButton to="/recipients">Recipients</LinkButton>
1817
</nav>
1918
</div>
2019
</header>

‎exercises/99.final/01.solution.final/src/routes/recipient.tsx renamed to ‎exercises/99.final/01.solution.final/src/routes/app/recipient.tsx

File renamed without changes.

‎exercises/99.final/01.solution.final/src/routes/recipients.tsx renamed to ‎exercises/99.final/01.solution.final/src/routes/app/recipients.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export function RecipientsRoute() {
1010
return (
1111
<div className="recipients">
1212
<h1 className="mb-4 text-3xl font-bold">Recipients</h1>
13-
<ul className="space-y-2">
13+
<ul className="flex flex-col gap-2">
1414
{recipients.map((recipient) => (
1515
<li key={recipient.id}>
1616
<Link to={`/recipients/${recipient.id}`}>{recipient.name}</Link>

‎exercises/99.final/01.solution.final/src/routes/marketing/homepage.tsx

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,29 @@
1+
import { LinkButton } from '../../components/button.tsx'
2+
13
export function HomepageRoute() {
24
return (
3-
<div>
4-
<h1>Homepage</h1>
5+
<div className="flex flex-col gap-8 md:flex-row md:gap-16">
6+
<div className="order-2 flex flex-col justify-center gap-8 md:order-1">
7+
<h1 className="font-serif text-6xl font-bold text-balance">
8+
Thoughtful Connections Made Simple
9+
</h1>
10+
<p className="text-xl">
11+
Strengthen your relationships with regular personalized messages of
12+
love and gratitude.
13+
</p>
14+
<div>
15+
<LinkButton to="/signup" variant="secondary">
16+
Get Started
17+
</LinkButton>
18+
</div>
19+
</div>
20+
<div className="order-1 mx-16 flex justify-center md:order-2 md:mx-0">
21+
<img
22+
src="/images/woman-smiling-at-text.jpg"
23+
alt="Woman smiling"
24+
className="aspect-[8/5] max-h-[300px] w-full rounded-lg object-cover md:aspect-[4/5] md:max-h-[800px]"
25+
/>
26+
</div>
527
</div>
628
)
729
}

‎exercises/99.final/01.solution.final/src/routes/marketing/layout.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export function MarketingLayout() {
1616
>
1717
gratitext
1818
</Link>
19-
<nav className="flex space-x-8">
19+
<nav className="flex gap-8">
2020
<Link to="/contact" className="text-link hover:text-link-hover">
2121
Contact
2222
</Link>
@@ -27,7 +27,7 @@ export function MarketingLayout() {
2727
</div>
2828
<div className="border-border flex items-center justify-between border-t pt-8 text-sm">
2929
<div>All Rights Reserved</div>
30-
<div className="flex space-x-6">
30+
<div className="flex gap-6">
3131
<Link to="/terms" className="text-link hover:text-link-hover">
3232
Terms and Conditions
3333
</Link>

‎exercises/99.final/01.solution.final/src/routes/signup.tsx

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import { Link } from 'react-router'
2+
import { Button } from '#src/components/button.tsx'
3+
4+
export function SignupRoute() {
5+
return (
6+
<div className="flex min-h-screen flex-col gap-8">
7+
<div className="mx-auto mt-20 max-w-md flex-1">
8+
<div className="text-center">
9+
<h1 className="mb-4 font-serif text-4xl font-bold">
10+
Create and Nurture Lasting Bonds
11+
</h1>
12+
<p className="mb-8">
13+
Please enter your phone number along with your country code
14+
</p>
15+
</div>
16+
17+
<div className="rounded-lg bg-gray-50 p-8 dark:bg-gray-800">
18+
<form onSubmit={(e) => e.preventDefault()}>
19+
<div className="flex flex-col gap-4">
20+
<div>
21+
<label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
22+
Country Code
23+
</label>
24+
<select
25+
className="w-full rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
26+
defaultValue=""
27+
>
28+
<option value="" disabled>
29+
Select Country
30+
</option>
31+
<option value="+1">United States (+1)</option>
32+
<option value="+44">United Kingdom (+44)</option>
33+
<option value="+91">India (+91)</option>
34+
</select>
35+
</div>
36+
37+
<div>
38+
<label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
39+
Phone Number
40+
</label>
41+
<input
42+
type="tel"
43+
placeholder="123 456 7890"
44+
className="w-full rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
45+
/>
46+
</div>
47+
48+
<Button
49+
type="submit"
50+
className="flex w-full items-center justify-center gap-2"
51+
>
52+
<span>Continue</span>
53+
<svg
54+
className="h-5 w-5"
55+
fill="none"
56+
viewBox="0 0 24 24"
57+
stroke="currentColor"
58+
>
59+
<path
60+
strokeLinecap="round"
61+
strokeLinejoin="round"
62+
strokeWidth={2}
63+
d="M9 5l7 7-7 7"
64+
/>
65+
</svg>
66+
</Button>
67+
</div>
68+
</form>
69+
</div>
70+
</div>
71+
<div className="py-8 text-center">
72+
<Link
73+
to="/"
74+
className="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
75+
>
76+
gratitext
77+
</Link>
78+
</div>
79+
</div>
80+
)
81+
}

‎exercises/99.final/01.solution.final/src/styles/theme.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,8 @@
6161
--color-info-foreground: oklch(90% 0.1 230);
6262

6363
/* Link colors */
64-
--color-link: oklch(65% 0.146 41.03);
65-
--color-link-hover: oklch(65% 0.146 41.03);
64+
--color-link: oklch(79% 0.16 41.03);
65+
--color-link-hover: oklch(85% 0.14 41.03);
6666
--color-link-active: oklch(75% 0.146 41.03);
6767
}
6868
}

‎exercises/99.final/01.solution.final/tsconfig.app.json

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,30 @@
11
{
2-
"compilerOptions": {
3-
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
4-
"target": "ES2020",
5-
"useDefineForClassFields": true,
6-
"lib": ["ES2020", "DOM", "DOM.Iterable"],
7-
"module": "ESNext",
8-
"skipLibCheck": true,
2+
"compilerOptions": {
3+
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
4+
"target": "ES2020",
5+
"useDefineForClassFields": true,
6+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
7+
"module": "ESNext",
8+
"skipLibCheck": true,
99

10-
/* Bundler mode */
11-
"moduleResolution": "bundler",
12-
"allowImportingTsExtensions": true,
13-
"isolatedModules": true,
14-
"moduleDetection": "force",
15-
"noEmit": true,
16-
"jsx": "react-jsx",
10+
/* Bundler mode */
11+
"moduleResolution": "bundler",
12+
"allowImportingTsExtensions": true,
13+
"isolatedModules": true,
14+
"moduleDetection": "force",
15+
"noEmit": true,
16+
"jsx": "react-jsx",
1717

18-
/* Linting */
19-
"strict": true,
20-
"noUnusedLocals": true,
21-
"noUnusedParameters": true,
22-
"noFallthroughCasesInSwitch": true,
23-
"noUncheckedSideEffectImports": true
24-
},
25-
"include": ["src"]
18+
/* Linting */
19+
"strict": true,
20+
"noUnusedLocals": true,
21+
"noUnusedParameters": true,
22+
"noFallthroughCasesInSwitch": true,
23+
"noUncheckedSideEffectImports": true,
24+
25+
"paths": {
26+
"#src/*": ["./src/*"]
27+
}
28+
},
29+
"include": ["src"]
2630
}

0 commit comments

Comments
 (0)