Skip to content

Commit e31a05b

Browse files
kentcdoddskentcdodds
committed
fix edit x button
1 parent ea71966 commit e31a05b

File tree

50 files changed

+241
-337
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+241
-337
lines changed

‎exercises/03.nested-routes/04.problem.unnested-route/src/routes/app/recipients/new.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { RecipientEditor } from './recipient-editor.tsx'
22

33
export function NewRecipientRoute() {
44
return (
5-
<div className="w-full overflow-y-auto p-6">
5+
<div className="w-full overflow-y-auto p-4">
66
<div className="container mx-auto max-w-2xl">
77
<h1 className="mb-2 text-center text-4xl font-bold">
88
Add New Recipient

‎exercises/03.nested-routes/04.solution.unnested-route/src/routes/app/recipients/new.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { RecipientEditor } from './recipient-editor.tsx'
22

33
export function NewRecipientRoute() {
44
return (
5-
<div className="w-full overflow-y-auto p-6">
5+
<div className="w-full overflow-y-auto p-4">
66
<div className="container mx-auto max-w-2xl">
77
<h1 className="mb-2 text-center text-4xl font-bold">
88
Add New Recipient

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

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -22,25 +22,20 @@ export function RecipientEditRoute() {
2222
}
2323

2424
return (
25-
<div className="w-full overflow-y-auto p-6">
25+
<div className="w-full overflow-y-auto p-4">
26+
<div className="relative">
27+
<ButtonLink
28+
to={`/recipients/${id}`}
29+
icon
30+
variant="borderless"
31+
className="absolute top-0 right-0"
32+
>
33+
<Icon name="X" title="Close editor" />
34+
</ButtonLink>
35+
<h1 className="mb-2 text-center text-4xl font-bold">Edit Recipient</h1>
36+
<p className="mb-8 text-center">Edit the details of your recipient.</p>
37+
</div>
2638
<div className="container mx-auto max-w-2xl">
27-
<div className="relative">
28-
<ButtonLink
29-
to={`/recipients/${id}`}
30-
icon
31-
variant="borderless"
32-
className="absolute top-0 right-0"
33-
>
34-
<Icon name="X" title="Close editor" />
35-
</ButtonLink>
36-
<h1 className="mb-2 text-center text-4xl font-bold">
37-
Edit Recipient
38-
</h1>
39-
<p className="mb-8 text-center">
40-
Edit the details of your recipient.
41-
</p>
42-
</div>
43-
4439
<RecipientEditor recipient={recipient} />
4540
</div>
4641
</div>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ export function RecipientRoute() {
3232

3333
return (
3434
<div className="flex min-h-0 flex-grow flex-col">
35-
{/* Left sidebar (header on mobile) */}
3635
<div className="border-border flex-shrink-0 border-b p-4">
3736
<div className="flex items-center justify-between md:mb-3">
3837
<h2 className="text-2xl font-bold md:text-3xl">{recipient.name}</h2>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { RecipientEditor } from './recipient-editor.tsx'
22

33
export function NewRecipientRoute() {
44
return (
5-
<div className="w-full overflow-y-auto p-6">
5+
<div className="w-full overflow-y-auto p-4">
66
<div className="container mx-auto max-w-2xl">
77
<h1 className="mb-2 text-center text-4xl font-bold">
88
Add New Recipient

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

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -21,25 +21,20 @@ export function RecipientEditRoute() {
2121
}
2222

2323
return (
24-
<div className="w-full overflow-y-auto p-6">
24+
<div className="w-full overflow-y-auto p-4">
25+
<div className="relative">
26+
<ButtonLink
27+
to={`/recipients/${id}`}
28+
icon
29+
variant="borderless"
30+
className="absolute top-0 right-0"
31+
>
32+
<Icon name="X" title="Close editor" />
33+
</ButtonLink>
34+
<h1 className="mb-2 text-center text-4xl font-bold">Edit Recipient</h1>
35+
<p className="mb-8 text-center">Edit the details of your recipient.</p>
36+
</div>
2537
<div className="container mx-auto max-w-2xl">
26-
<div className="relative">
27-
<ButtonLink
28-
to={`/recipients/${id}`}
29-
icon
30-
variant="borderless"
31-
className="absolute top-0 right-0"
32-
>
33-
<Icon name="X" title="Close editor" />
34-
</ButtonLink>
35-
<h1 className="mb-2 text-center text-4xl font-bold">
36-
Edit Recipient
37-
</h1>
38-
<p className="mb-8 text-center">
39-
Edit the details of your recipient.
40-
</p>
41-
</div>
42-
4338
<RecipientEditor recipient={recipient} />
4439
</div>
4540
</div>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ export function RecipientRoute() {
3131

3232
return (
3333
<div className="flex min-h-0 flex-grow flex-col">
34-
{/* Left sidebar (header on mobile) */}
3534
<div className="border-border flex-shrink-0 border-b p-4">
3635
<div className="flex items-center justify-between md:mb-3">
3736
<h2 className="text-2xl font-bold md:text-3xl">{recipient.name}</h2>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { RecipientEditor } from './recipient-editor.tsx'
22

33
export function NewRecipientRoute() {
44
return (
5-
<div className="w-full overflow-y-auto p-6">
5+
<div className="w-full overflow-y-auto p-4">
66
<div className="container mx-auto max-w-2xl">
77
<h1 className="mb-2 text-center text-4xl font-bold">
88
Add New Recipient

‎exercises/05.advanced-links/01.problem.relative-links/src/routes/app/recipients/$id.edit.tsx‎

Lines changed: 15 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -21,27 +21,22 @@ export function RecipientEditRoute() {
2121
}
2222

2323
return (
24-
<div className="w-full overflow-y-auto p-6">
24+
<div className="w-full overflow-y-auto p-4">
25+
<div className="relative">
26+
<ButtonLink
27+
// 🐨 set this to ".."
28+
// 🐨 do you need to set the relative prop? Why?
29+
to={`/recipients/${id}`}
30+
icon
31+
variant="borderless"
32+
className="absolute top-0 right-0"
33+
>
34+
<Icon name="X" title="Close editor" />
35+
</ButtonLink>
36+
<h1 className="mb-2 text-center text-4xl font-bold">Edit Recipient</h1>
37+
<p className="mb-8 text-center">Edit the details of your recipient.</p>
38+
</div>
2539
<div className="container mx-auto max-w-2xl">
26-
<div className="relative">
27-
<ButtonLink
28-
// 🐨 set this to ".."
29-
// 🐨 do you need to set the relative prop? Why?
30-
to={`/recipients/${id}`}
31-
icon
32-
variant="borderless"
33-
className="absolute top-0 right-0"
34-
>
35-
<Icon name="X" title="Close editor" />
36-
</ButtonLink>
37-
<h1 className="mb-2 text-center text-4xl font-bold">
38-
Edit Recipient
39-
</h1>
40-
<p className="mb-8 text-center">
41-
Edit the details of your recipient.
42-
</p>
43-
</div>
44-
4540
<RecipientEditor recipient={recipient} />
4641
</div>
4742
</div>

‎exercises/05.advanced-links/01.problem.relative-links/src/routes/app/recipients/$id.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ export function RecipientRoute() {
3131

3232
return (
3333
<div className="flex min-h-0 flex-grow flex-col">
34-
{/* Left sidebar (header on mobile) */}
3534
<div className="border-border flex-shrink-0 border-b p-4">
3635
<div className="flex items-center justify-between md:mb-3">
3736
<h2 className="text-2xl font-bold md:text-3xl">{recipient.name}</h2>

0 commit comments

Comments
 (0)