Skip to content

Commit 257aa40

Browse files
kentcdoddskentcdodds
committed
feat: add entry viewer route and component, enhance routing with entryId parameter, and update styles
1 parent e522052 commit 257aa40

File tree

9 files changed

+407
-60
lines changed

9 files changed

+407
-60
lines changed

‎exercises/99.final/99.solution/.react-router/types/+routes.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@ type Pages = {
1616
"/ui/journal-viewer": {
1717
params: {};
1818
};
19+
"/ui/entry-viewer/:entryId": {
20+
params: {
21+
"entryId": string;
22+
};
23+
};
1924
"/*": {
2025
params: {
2126
"*": string;
@@ -26,7 +31,7 @@ type Pages = {
2631
type RouteFiles = {
2732
"root.tsx": {
2833
id: "root";
29-
page: "/" | "/ui/journal-viewer" | "/*";
34+
page: "/" | "/ui/journal-viewer" | "/ui/entry-viewer/:entryId" | "/*";
3035
};
3136
"routes/index.tsx": {
3237
id: "routes/index";
@@ -36,6 +41,10 @@ type RouteFiles = {
3641
id: "routes/ui/journal-viewer";
3742
page: "/ui/journal-viewer";
3843
};
44+
"routes/ui/entry-viewer.tsx": {
45+
id: "routes/ui/entry-viewer";
46+
page: "/ui/entry-viewer/:entryId";
47+
};
3948
"routes/catch-all.tsx": {
4049
id: "routes/catch-all";
4150
page: "/*";

‎exercises/99.final/99.solution/.react-router/types/app/routes/ui/+types/entry-viewer.ts‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
// Generated by React Router
2+
3+
import type { GetInfo, GetAnnotations } from "react-router/internal";
4+
5+
type Module = typeof import("../entry-viewer.js")
6+
7+
type Info = GetInfo<{
8+
file: "routes/ui/entry-viewer.tsx",
9+
module: Module
10+
}>
11+
12+
type Matches = [{
13+
id: "root";
14+
module: typeof import("../../../root.js");
15+
}, {
16+
id: "routes/ui/entry-viewer";
17+
module: typeof import("../entry-viewer.js");
18+
}];
19+
20+
type Annotations = GetAnnotations<Info & { module: Module, matches: Matches }>;
21+
22+
export namespace Route {
23+
// links
24+
export type LinkDescriptors = Annotations["LinkDescriptors"];
25+
export type LinksFunction = Annotations["LinksFunction"];
26+
27+
// meta
28+
export type MetaArgs = Annotations["MetaArgs"];
29+
export type MetaDescriptors = Annotations["MetaDescriptors"];
30+
export type MetaFunction = Annotations["MetaFunction"];
31+
32+
// headers
33+
export type HeadersArgs = Annotations["HeadersArgs"];
34+
export type HeadersFunction = Annotations["HeadersFunction"];
35+
36+
// unstable_middleware
37+
export type unstable_MiddlewareFunction = Annotations["unstable_MiddlewareFunction"];
38+
39+
// unstable_clientMiddleware
40+
export type unstable_ClientMiddlewareFunction = Annotations["unstable_ClientMiddlewareFunction"];
41+
42+
// loader
43+
export type LoaderArgs = Annotations["LoaderArgs"];
44+
45+
// clientLoader
46+
export type ClientLoaderArgs = Annotations["ClientLoaderArgs"];
47+
48+
// action
49+
export type ActionArgs = Annotations["ActionArgs"];
50+
51+
// clientAction
52+
export type ClientActionArgs = Annotations["ClientActionArgs"];
53+
54+
// HydrateFallback
55+
export type HydrateFallbackProps = Annotations["HydrateFallbackProps"];
56+
57+
// Component
58+
export type ComponentProps = Annotations["ComponentProps"];
59+
60+
// ErrorBoundary
61+
export type ErrorBoundaryProps = Annotations["ErrorBoundaryProps"];
62+
}

‎exercises/99.final/99.solution/app/app.css‎

Lines changed: 42 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -16,72 +16,70 @@ body {
1616
:root {
1717
--radius: 0.5rem;
1818

19-
--background: oklch(98% 0.02 60);
20-
--foreground: oklch(25% 0.05 60);
19+
--background: oklch(98% 0.02 320);
20+
--foreground: oklch(20% 0.06 320);
2121

22-
--card: oklch(99% 0.015 60);
23-
--card-foreground: oklch(25% 0.05 60);
22+
--card: oklch(99% 0.015 320);
23+
--card-foreground: oklch(20% 0.06 320);
2424

25-
--popover: oklch(99% 0.015 60);
26-
--popover-foreground: oklch(25% 0.05 60);
25+
--popover: oklch(99% 0.015 320);
26+
--popover-foreground: oklch(20% 0.06 320);
2727

28-
--primary: oklch(55% 0.18 60);
29-
--primary-foreground: oklch(98% 0.02 60);
28+
--primary: oklch(65% 0.15 320);
29+
--primary-foreground: oklch(98% 0.02 320);
3030

31-
--secondary: oklch(85% 0.08 60);
32-
--secondary-foreground: oklch(25% 0.05 60);
31+
--secondary: oklch(85% 0.08 330);
32+
--secondary-foreground: oklch(20% 0.06 320);
3333

34-
--muted: oklch(92% 0.04 60);
35-
--muted-foreground: oklch(45% 0.06 60);
34+
--muted: oklch(92% 0.04 320);
35+
--muted-foreground: oklch(40% 0.07 320);
3636

37-
--accent: oklch(88% 0.06 60);
38-
--accent-foreground: oklch(25% 0.05 60);
37+
--accent: oklch(88% 0.06 340);
38+
--accent-foreground: oklch(20% 0.06 320);
3939

40-
--border: oklch(88% 0.05 60);
41-
--input: oklch(88% 0.05 60);
42-
--input-invalid: oklch(65% 0.25 25);
40+
--border: oklch(88% 0.05 320);
41+
--input: oklch(88% 0.05 320);
42+
--input-invalid: oklch(65% 0.2 0);
4343

44-
--destructive: oklch(60% 0.22 25);
45-
--destructive-foreground: oklch(98% 0.02 60);
46-
/* prefixed with foreground because it should look good on the background */
47-
--foreground-destructive: oklch(55% 0.2 20);
44+
--destructive: oklch(60% 0.18 0);
45+
--destructive-foreground: oklch(98% 0.02 320);
46+
--foreground-destructive: oklch(55% 0.18 0);
4847

49-
--ring: oklch(55% 0.18 60);
48+
--ring: oklch(65% 0.15 320);
5049
}
5150

5251
@media (prefers-color-scheme: dark) {
5352
:root {
54-
--background: oklch(15% 0.04 60);
55-
--foreground: oklch(95% 0.02 60);
53+
--background: oklch(15% 0.05 320);
54+
--foreground: oklch(95% 0.02 320);
5655

57-
--card: oklch(18% 0.04 60);
58-
--card-foreground: oklch(95% 0.02 60);
56+
--card: oklch(18% 0.05 320);
57+
--card-foreground: oklch(95% 0.02 320);
5958

60-
--popover: oklch(18% 0.04 60);
61-
--popover-foreground: oklch(95% 0.02 60);
59+
--popover: oklch(18% 0.05 320);
60+
--popover-foreground: oklch(95% 0.02 320);
6261

63-
--primary: oklch(65% 0.2 60);
64-
--primary-foreground: oklch(15% 0.04 60);
62+
--primary: oklch(70% 0.18 320);
63+
--primary-foreground: oklch(15% 0.05 320);
6564

66-
--secondary: oklch(30% 0.08 60);
67-
--secondary-foreground: oklch(95% 0.02 60);
65+
--secondary: oklch(30% 0.08 330);
66+
--secondary-foreground: oklch(95% 0.02 320);
6867

69-
--muted: oklch(25% 0.06 60);
70-
--muted-foreground: oklch(70% 0.04 60);
68+
--muted: oklch(25% 0.06 320);
69+
--muted-foreground: oklch(65% 0.05 320);
7170

72-
--accent: oklch(22% 0.05 60);
73-
--accent-foreground: oklch(95% 0.02 60);
71+
--accent: oklch(28% 0.06 340);
72+
--accent-foreground: oklch(95% 0.02 320);
7473

75-
--border: oklch(28% 0.06 60);
76-
--input: oklch(28% 0.06 60);
77-
--input-invalid: oklch(45% 0.18 25);
74+
--border: oklch(28% 0.06 320);
75+
--input: oklch(28% 0.06 320);
76+
--input-invalid: oklch(50% 0.18 0);
7877

79-
--destructive: oklch(50% 0.18 25);
80-
--destructive-foreground: oklch(95% 0.02 60);
81-
/* prefixed with foreground because it should look good on the background */
82-
--foreground-destructive: oklch(65% 0.22 20);
78+
--destructive: oklch(55% 0.18 0);
79+
--destructive-foreground: oklch(95% 0.02 320);
80+
--foreground-destructive: oklch(65% 0.2 0);
8381

84-
--ring: oklch(65% 0.2 60);
82+
--ring: oklch(70% 0.18 320);
8583
}
8684
}
8785

‎exercises/99.final/99.solution/app/routes.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,6 @@ import { type RouteConfig, index, route } from '@react-router/dev/routes'
33
export default [
44
index('routes/index.tsx'),
55
route('ui/journal-viewer', 'routes/ui/journal-viewer.tsx'),
6+
route('ui/entry-viewer/:entryId', 'routes/ui/entry-viewer.tsx'),
67
route('/*', 'routes/catch-all.tsx'),
78
] satisfies RouteConfig

0 commit comments

Comments
 (0)