Skip to content

Commit 640d7f2

Browse files
kentcdoddskentcdodds
committed
fix segments
1 parent ffdc0f1 commit 640d7f2

File tree

4 files changed

+56
-107
lines changed

4 files changed

+56
-107
lines changed

‎exercises/04.route-paths/01.problem.dynamic-segments/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"name": "exercises_04.route-paths_01.solution.dynamic-segments",
2+
"name": "exercises_04.route-paths_01.problem.dynamic-segments",
33
"private": true,
44
"version": "0.0.0",
55
"type": "module",

‎exercises/04.route-paths/01.problem.dynamic-segments/src/routes/app/recipients/layout.tsx

+26-47
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import clsx from 'clsx'
2-
import { Link, NavLink, Outlet } from 'react-router'
1+
import { Link, Outlet } from 'react-router'
32
import { ButtonLink } from '#src/components/button.tsx'
43
import { Icon } from '#src/components/icon.tsx'
54
import { recipients } from '#src/data.ts'
@@ -24,53 +23,33 @@ export function RecipientsLayout() {
2423
</ButtonLink>
2524
</div>
2625

27-
<div className="bg-background-alt flex min-h-0 flex-1 flex-col">
28-
<div className="flex flex-col gap-4 overflow-visible border-b-2 py-4 pr-4 pl-1">
29-
<div className="bg-background-alt absolute top-full left-0 z-10 mt-1 max-w-full min-w-64 border p-2 shadow-lg">
30-
{recipients.slice(0, 3).map((recipient) => (
31-
<NavLink
32-
key={recipient.id}
33-
to={recipient.id}
34-
className={({ isActive }) =>
35-
clsx(
36-
'hover:bg-background flex items-center gap-2 overflow-x-auto text-xl',
37-
isActive ? 'underline' : '',
38-
)
39-
}
40-
onClick={(e) => {
41-
e.currentTarget.closest('details')?.removeAttribute('open')
42-
}}
43-
>
44-
{({ isActive }) => (
45-
<div className="flex items-center gap-1">
46-
<Icon
47-
name="ArrowRight"
48-
size="sm"
49-
className={clsx(
50-
isActive ? 'opacity-100' : 'opacity-0',
51-
'transition-opacity',
52-
)}
53-
/>
54-
{recipient.name}
55-
{recipient.messages.some(
56-
(m) => m.status === 'scheduled',
57-
) ? null : (
58-
<Icon
59-
name="ExclamationCircle"
60-
className="text-danger-foreground"
61-
title="no messages scheduled"
62-
/>
63-
)}
64-
</div>
26+
<div className="bg-background-alt flex min-h-0 flex-1 flex-col md:flex-row md:pr-4">
27+
<div className="flex flex-col border-b-2 p-4 md:border-r-2 md:border-b-0">
28+
{recipients.slice(0, 3).map((recipient) => (
29+
<Link
30+
key={recipient.id}
31+
to={recipient.id}
32+
className="hover:bg-background flex items-center gap-2 overflow-x-auto text-xl md:px-2"
33+
>
34+
<div className="flex items-center gap-1">
35+
{recipient.name}
36+
{recipient.messages.some(
37+
(m) => m.status === 'scheduled',
38+
) ? null : (
39+
<Icon
40+
name="ExclamationCircle"
41+
className="text-danger-foreground"
42+
title="no messages scheduled"
43+
/>
6544
)}
66-
</NavLink>
67-
))}
68-
{recipients.length === 0 && (
69-
<div className="bg-warning-background text-warning-foreground px-4 py-2 text-sm">
70-
No recipients found. Add one to get started.
7145
</div>
72-
)}
73-
</div>
46+
</Link>
47+
))}
48+
{recipients.length === 0 && (
49+
<div className="bg-warning-background text-warning-foreground px-4 py-2 text-sm">
50+
No recipients found. Add one to get started.
51+
</div>
52+
)}
7453
</div>
7554
<div className="flex flex-1 overflow-auto">
7655
<Outlet />

‎exercises/04.route-paths/01.solution.dynamic-segments/src/routes/app/recipients/layout.tsx

+26-47
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import clsx from 'clsx'
2-
import { Link, NavLink, Outlet } from 'react-router'
1+
import { Link, Outlet } from 'react-router'
32
import { ButtonLink } from '#src/components/button.tsx'
43
import { Icon } from '#src/components/icon.tsx'
54
import { recipients } from '#src/data.ts'
@@ -24,53 +23,33 @@ export function RecipientsLayout() {
2423
</ButtonLink>
2524
</div>
2625

27-
<div className="bg-background-alt flex min-h-0 flex-1 flex-col">
28-
<div className="flex flex-col gap-4 overflow-visible border-b-2 py-4 pr-4 pl-1">
29-
<div className="bg-background-alt absolute top-full left-0 z-10 mt-1 max-w-full min-w-64 border p-2 shadow-lg">
30-
{recipients.slice(0, 3).map((recipient) => (
31-
<NavLink
32-
key={recipient.id}
33-
to={recipient.id}
34-
className={({ isActive }) =>
35-
clsx(
36-
'hover:bg-background flex items-center gap-2 overflow-x-auto text-xl',
37-
isActive ? 'underline' : '',
38-
)
39-
}
40-
onClick={(e) => {
41-
e.currentTarget.closest('details')?.removeAttribute('open')
42-
}}
43-
>
44-
{({ isActive }) => (
45-
<div className="flex items-center gap-1">
46-
<Icon
47-
name="ArrowRight"
48-
size="sm"
49-
className={clsx(
50-
isActive ? 'opacity-100' : 'opacity-0',
51-
'transition-opacity',
52-
)}
53-
/>
54-
{recipient.name}
55-
{recipient.messages.some(
56-
(m) => m.status === 'scheduled',
57-
) ? null : (
58-
<Icon
59-
name="ExclamationCircle"
60-
className="text-danger-foreground"
61-
title="no messages scheduled"
62-
/>
63-
)}
64-
</div>
26+
<div className="bg-background-alt flex min-h-0 flex-1 flex-col md:flex-row md:pr-4">
27+
<div className="flex flex-col border-b-2 p-4 md:border-r-2 md:border-b-0">
28+
{recipients.slice(0, 3).map((recipient) => (
29+
<Link
30+
key={recipient.id}
31+
to={recipient.id}
32+
className="hover:bg-background flex items-center gap-2 overflow-x-auto text-xl md:px-2"
33+
>
34+
<div className="flex items-center gap-1">
35+
{recipient.name}
36+
{recipient.messages.some(
37+
(m) => m.status === 'scheduled',
38+
) ? null : (
39+
<Icon
40+
name="ExclamationCircle"
41+
className="text-danger-foreground"
42+
title="no messages scheduled"
43+
/>
6544
)}
66-
</NavLink>
67-
))}
68-
{recipients.length === 0 && (
69-
<div className="bg-warning-background text-warning-foreground px-4 py-2 text-sm">
70-
No recipients found. Add one to get started.
7145
</div>
72-
)}
73-
</div>
46+
</Link>
47+
))}
48+
{recipients.length === 0 && (
49+
<div className="bg-warning-background text-warning-foreground px-4 py-2 text-sm">
50+
No recipients found. Add one to get started.
51+
</div>
52+
)}
7453
</div>
7554
<div className="flex flex-1 overflow-auto">
7655
<Outlet />

‎tsconfig.json

+3-12
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,6 @@
1616
{
1717
"path": "exercises/01.create-router/02.solution.router-elements"
1818
},
19-
{
20-
"path": "exercises/01.create-router/03.problem.route-components"
21-
},
22-
{
23-
"path": "exercises/01.create-router/03.solution.route-components"
24-
},
25-
{
26-
"path": "exercises/01.create-router/04.problem.sibling-routes"
27-
},
28-
{
29-
"path": "exercises/01.create-router/04.solution.sibling-routes"
30-
},
3119
{
3220
"path": "exercises/02.linking/01.problem.achors"
3321
},
@@ -70,6 +58,9 @@
7058
{
7159
"path": "exercises/03.nested-routes/04.solution.unnested-route"
7260
},
61+
{
62+
"path": "exercises/04.route-paths/01.problem.dynamic-segments"
63+
},
7364
{
7465
"path": "exercises/04.route-paths/01.solution.dynamic-segments"
7566
},

0 commit comments

Comments
 (0)