create-swift-rust 0.7.0 → 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1030 -39
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/templates/default/src/app/about/page.tsx +6 -6
- package/templates/default/src/app/about/team/page.tsx +6 -6
- package/templates/default/src/app/blog/[slug]/page.tsx +24 -16
- package/templates/default/src/app/blog/page.tsx +36 -18
- package/templates/default/src/app/blog/tag/[tag]/page.tsx +8 -8
- package/templates/default/src/app/contact/page.tsx +8 -8
- package/templates/default/src/app/dashboard/analytics/page.tsx +12 -12
- package/templates/default/src/app/dashboard/loading.tsx +8 -8
- package/templates/default/src/app/dashboard/page.tsx +36 -27
- package/templates/default/src/app/dashboard/posts/[id]/not-found.tsx +2 -2
- package/templates/default/src/app/dashboard/posts/[id]/page.tsx +5 -5
- package/templates/default/src/app/dashboard/posts/new/page.tsx +15 -10
- package/templates/default/src/app/dashboard/posts/page.tsx +7 -7
- package/templates/default/src/app/dashboard/settings/page.tsx +39 -17
- package/templates/default/src/app/error.tsx +2 -2
- package/templates/default/src/app/fonts/page.tsx +39 -39
- package/templates/default/src/app/images/page.tsx +53 -15
- package/templates/default/src/app/layout.tsx +1 -1
- package/templates/default/src/app/loading.tsx +5 -5
- package/templates/default/src/app/not-found.tsx +2 -2
- package/templates/default/src/app/page.tsx +114 -72
- package/templates/default/src/app/videos/page.tsx +22 -22
- package/templates/default/src/components/font-studio.tsx +37 -37
- package/templates/default/src/components/footer.tsx +5 -5
- package/templates/default/src/components/logo.tsx +2 -2
- package/templates/default/src/components/nav.tsx +28 -10
- package/templates/default/src/components/sidebar.tsx +10 -10
- package/templates/default/tsconfig.json +0 -2
|
@@ -44,11 +44,13 @@ export default function DashboardOverviewPage() {
|
|
|
44
44
|
<div className="px-6 py-10 sm:px-10">
|
|
45
45
|
<div className="flex flex-wrap items-end justify-between gap-4">
|
|
46
46
|
<div>
|
|
47
|
-
<p className="text-[0.75rem] font-semibold uppercase tracking-wider text-
|
|
47
|
+
<p className="text-[0.75rem] font-semibold uppercase tracking-wider text-fg-subtle">
|
|
48
48
|
Overview
|
|
49
49
|
</p>
|
|
50
|
-
<h1 className="mt-1 text-3xl font-semibold tracking-tight">
|
|
51
|
-
|
|
50
|
+
<h1 className="mt-1 text-3xl font-semibold tracking-tight">
|
|
51
|
+
Welcome back, Alex
|
|
52
|
+
</h1>
|
|
53
|
+
<p className="mt-1 text-fg-muted">
|
|
52
54
|
Here's what happened across your projects in the last 30 days.
|
|
53
55
|
</p>
|
|
54
56
|
</div>
|
|
@@ -62,20 +64,22 @@ export default function DashboardOverviewPage() {
|
|
|
62
64
|
</div>
|
|
63
65
|
</div>
|
|
64
66
|
|
|
65
|
-
<div className="mt-10 grid gap-px overflow-hidden rounded-2xl border border-
|
|
67
|
+
<div className="mt-10 grid gap-px overflow-hidden rounded-2xl border border-border bg-border sm:grid-cols-2 lg:grid-cols-4">
|
|
66
68
|
{stats.map((s) => (
|
|
67
|
-
<div key={s.label} className="bg-
|
|
68
|
-
<p className="text-[0.8125rem] text-
|
|
69
|
-
<p className="mt-2 text-3xl font-semibold tracking-tight">
|
|
69
|
+
<div key={s.label} className="bg-surface p-6">
|
|
70
|
+
<p className="text-[0.8125rem] text-fg-muted">{s.label}</p>
|
|
71
|
+
<p className="mt-2 text-3xl font-semibold tracking-tight">
|
|
72
|
+
{s.value}
|
|
73
|
+
</p>
|
|
70
74
|
<div className="mt-3 flex items-center gap-2 text-[0.75rem]">
|
|
71
75
|
<span
|
|
72
76
|
className={`inline-flex items-center gap-0.5 font-medium ${
|
|
73
|
-
s.delta >= 0 ? "text-
|
|
77
|
+
s.delta >= 0 ? "text-success" : "text-danger"
|
|
74
78
|
}`}
|
|
75
79
|
>
|
|
76
80
|
{s.delta >= 0 ? "↑" : "↓"} {formatPercent(Math.abs(s.delta))}
|
|
77
81
|
</span>
|
|
78
|
-
<span className="text-
|
|
82
|
+
<span className="text-fg-subtle">{s.context}</span>
|
|
79
83
|
</div>
|
|
80
84
|
</div>
|
|
81
85
|
))}
|
|
@@ -86,7 +90,7 @@ export default function DashboardOverviewPage() {
|
|
|
86
90
|
<div className="flex items-center justify-between">
|
|
87
91
|
<div>
|
|
88
92
|
<h2 className="text-[0.95rem] font-semibold">Traffic</h2>
|
|
89
|
-
<p className="text-[0.8125rem] text-
|
|
93
|
+
<p className="text-[0.8125rem] text-fg-muted">Last 7 days</p>
|
|
90
94
|
</div>
|
|
91
95
|
<div className="flex items-center gap-1 text-[0.75rem]">
|
|
92
96
|
<span className="badge badge-dot badge-success">Healthy</span>
|
|
@@ -94,20 +98,23 @@ export default function DashboardOverviewPage() {
|
|
|
94
98
|
</div>
|
|
95
99
|
<div className="mt-6 flex h-48 items-end gap-2">
|
|
96
100
|
{trafficSeries.map((d) => (
|
|
97
|
-
<div
|
|
101
|
+
<div
|
|
102
|
+
key={d.day}
|
|
103
|
+
className="flex flex-1 flex-col items-center gap-2"
|
|
104
|
+
>
|
|
98
105
|
<div
|
|
99
|
-
className="w-full rounded-t-md bg-
|
|
106
|
+
className="w-full rounded-t-md bg-accent/80 transition-colors hover:bg-accent"
|
|
100
107
|
style={{ height: `${(d.requests / trafficMax) * 100}%` }}
|
|
101
108
|
title={`${d.requests.toLocaleString()} requests`}
|
|
102
109
|
/>
|
|
103
|
-
<span className="text-[0.7rem] font-medium text-
|
|
110
|
+
<span className="text-[0.7rem] font-medium text-fg-subtle">
|
|
104
111
|
{d.day}
|
|
105
112
|
</span>
|
|
106
113
|
</div>
|
|
107
114
|
))}
|
|
108
115
|
</div>
|
|
109
|
-
<div className="mt-4 flex items-center justify-between border-t border-
|
|
110
|
-
<span className="text-
|
|
116
|
+
<div className="mt-4 flex items-center justify-between border-t border-border pt-4 text-[0.8125rem]">
|
|
117
|
+
<span className="text-fg-muted">Total</span>
|
|
111
118
|
<span className="font-mono font-medium">
|
|
112
119
|
{formatNumber(trafficSeries.reduce((s, d) => s + d.requests, 0))}
|
|
113
120
|
</span>
|
|
@@ -116,17 +123,17 @@ export default function DashboardOverviewPage() {
|
|
|
116
123
|
|
|
117
124
|
<div className="card p-6">
|
|
118
125
|
<h2 className="text-[0.95rem] font-semibold">Recent activity</h2>
|
|
119
|
-
<ul className="mt-4 -mx-2 divide-y divide-
|
|
126
|
+
<ul className="mt-4 -mx-2 divide-y divide-border">
|
|
120
127
|
{ACTIVITY.map((a, i) => (
|
|
121
128
|
<li key={i} className="flex items-start gap-3 px-2 py-3">
|
|
122
|
-
<div className="mt-0.5 h-2 w-2 shrink-0 rounded-full bg-
|
|
129
|
+
<div className="mt-0.5 h-2 w-2 shrink-0 rounded-full bg-accent" />
|
|
123
130
|
<div className="min-w-0 flex-1">
|
|
124
|
-
<p className="text-[0.875rem] leading-snug text-
|
|
131
|
+
<p className="text-[0.875rem] leading-snug text-fg">
|
|
125
132
|
<span className="font-medium">{a.who}</span>{" "}
|
|
126
|
-
<span className="text-
|
|
133
|
+
<span className="text-fg-muted">{a.what}</span>{" "}
|
|
127
134
|
<span className="font-medium">{a.target}</span>
|
|
128
135
|
</p>
|
|
129
|
-
<p className="mt-0.5 text-[0.75rem] text-
|
|
136
|
+
<p className="mt-0.5 text-[0.75rem] text-fg-subtle">
|
|
130
137
|
{relativeTime(a.when)}
|
|
131
138
|
</p>
|
|
132
139
|
</div>
|
|
@@ -141,14 +148,14 @@ export default function DashboardOverviewPage() {
|
|
|
141
148
|
<h2 className="text-[0.95rem] font-semibold">Latest posts</h2>
|
|
142
149
|
<Link
|
|
143
150
|
href="/dashboard/posts"
|
|
144
|
-
className="text-[0.8125rem] font-medium text-
|
|
151
|
+
className="text-[0.8125rem] font-medium text-accent hover:text-accent-hover"
|
|
145
152
|
>
|
|
146
153
|
View all
|
|
147
154
|
</Link>
|
|
148
155
|
</div>
|
|
149
156
|
<table className="mt-4 w-full text-left text-[0.875rem]">
|
|
150
157
|
<thead>
|
|
151
|
-
<tr className="border-b border-
|
|
158
|
+
<tr className="border-b border-border text-[0.7rem] font-semibold uppercase tracking-wider text-fg-subtle">
|
|
152
159
|
<th className="pb-2 font-semibold">Title</th>
|
|
153
160
|
<th className="pb-2 font-semibold">Author</th>
|
|
154
161
|
<th className="pb-2 font-semibold">Status</th>
|
|
@@ -157,20 +164,22 @@ export default function DashboardOverviewPage() {
|
|
|
157
164
|
</thead>
|
|
158
165
|
<tbody>
|
|
159
166
|
{posts.slice(0, 4).map((p) => (
|
|
160
|
-
<tr key={p.slug} className="border-b border-
|
|
167
|
+
<tr key={p.slug} className="border-b border-border last:border-0">
|
|
161
168
|
<td className="py-3 pr-4">
|
|
162
169
|
<Link
|
|
163
170
|
href={`/blog/${p.slug}`}
|
|
164
|
-
className="font-medium text-
|
|
171
|
+
className="font-medium text-fg hover:text-accent"
|
|
165
172
|
>
|
|
166
173
|
{p.title}
|
|
167
174
|
</Link>
|
|
168
175
|
</td>
|
|
169
|
-
<td className="py-3 pr-4 text-
|
|
176
|
+
<td className="py-3 pr-4 text-fg-muted">{p.author.name}</td>
|
|
170
177
|
<td className="py-3 pr-4">
|
|
171
|
-
<span className="badge badge-success badge-dot">
|
|
178
|
+
<span className="badge badge-success badge-dot">
|
|
179
|
+
Published
|
|
180
|
+
</span>
|
|
172
181
|
</td>
|
|
173
|
-
<td className="py-3 text-right text-
|
|
182
|
+
<td className="py-3 text-right text-fg-subtle">{p.date}</td>
|
|
174
183
|
</tr>
|
|
175
184
|
))}
|
|
176
185
|
</tbody>
|
|
@@ -3,11 +3,11 @@ import { Link } from "swift-rust";
|
|
|
3
3
|
export default function PostNotFound() {
|
|
4
4
|
return (
|
|
5
5
|
<div className="mx-auto max-w-md px-6 py-20 text-center sm:px-10">
|
|
6
|
-
<p className="text-[0.75rem] font-semibold uppercase tracking-wider text-
|
|
6
|
+
<p className="text-[0.75rem] font-semibold uppercase tracking-wider text-fg-subtle">
|
|
7
7
|
404
|
|
8
8
|
</p>
|
|
9
9
|
<h1 className="mt-2 text-3xl font-semibold tracking-tight">Post not found</h1>
|
|
10
|
-
<p className="mt-3 text-
|
|
10
|
+
<p className="mt-3 text-fg-muted">
|
|
11
11
|
That post doesn't exist, was unpublished, or you don't have access.
|
|
12
12
|
</p>
|
|
13
13
|
<div className="mt-6 flex justify-center gap-2">
|
|
@@ -22,7 +22,7 @@ export default function DashboardPostPage({ params }: { params: { id: string } }
|
|
|
22
22
|
<div className="mx-auto max-w-3xl px-6 py-10 sm:px-10">
|
|
23
23
|
<Link
|
|
24
24
|
href="/dashboard/posts"
|
|
25
|
-
className="inline-flex items-center gap-1.5 text-[0.875rem] text-
|
|
25
|
+
className="inline-flex items-center gap-1.5 text-[0.875rem] text-fg-muted hover:text-fg"
|
|
26
26
|
>
|
|
27
27
|
<svg
|
|
28
28
|
viewBox="0 0 24 24"
|
|
@@ -38,11 +38,11 @@ export default function DashboardPostPage({ params }: { params: { id: string } }
|
|
|
38
38
|
|
|
39
39
|
<div className="mt-8 flex items-start justify-between gap-4">
|
|
40
40
|
<div>
|
|
41
|
-
<p className="text-[0.75rem] font-semibold uppercase tracking-wider text-
|
|
41
|
+
<p className="text-[0.75rem] font-semibold uppercase tracking-wider text-fg-subtle">
|
|
42
42
|
Post
|
|
43
43
|
</p>
|
|
44
44
|
<h1 className="mt-1 text-3xl font-semibold tracking-tight">{post.title}</h1>
|
|
45
|
-
<p className="mt-2 text-[0.875rem] text-
|
|
45
|
+
<p className="mt-2 text-[0.875rem] text-fg-muted">
|
|
46
46
|
By {post.author.name} · {formatDate(post.date)} · {post.readingTime}
|
|
47
47
|
</p>
|
|
48
48
|
</div>
|
|
@@ -56,7 +56,7 @@ export default function DashboardPostPage({ params }: { params: { id: string } }
|
|
|
56
56
|
|
|
57
57
|
<div className="mt-8 card p-6">
|
|
58
58
|
<h2 className="text-[0.95rem] font-semibold">Excerpt</h2>
|
|
59
|
-
<p className="mt-2 text-[0.9375rem] leading-relaxed text-
|
|
59
|
+
<p className="mt-2 text-[0.9375rem] leading-relaxed text-fg-muted">
|
|
60
60
|
{post.excerpt}
|
|
61
61
|
</p>
|
|
62
62
|
</div>
|
|
@@ -74,7 +74,7 @@ export default function DashboardPostPage({ params }: { params: { id: string } }
|
|
|
74
74
|
|
|
75
75
|
<div className="mt-6 card p-6">
|
|
76
76
|
<h2 className="text-[0.95rem] font-semibold">Body preview</h2>
|
|
77
|
-
<div className="mt-3 max-h-72 overflow-y-auto text-[0.875rem] leading-relaxed text-
|
|
77
|
+
<div className="mt-3 max-h-72 overflow-y-auto text-[0.875rem] leading-relaxed text-fg-muted">
|
|
78
78
|
{post.body.split("\n\n").map((p, i) => (
|
|
79
79
|
<p key={i} className="mb-3">
|
|
80
80
|
{p}
|
|
@@ -8,7 +8,7 @@ export default function NewPostPage() {
|
|
|
8
8
|
<div className="mx-auto max-w-2xl px-6 py-10 sm:px-10">
|
|
9
9
|
<Link
|
|
10
10
|
href="/dashboard/posts"
|
|
11
|
-
className="inline-flex items-center gap-1.5 text-[0.875rem] text-
|
|
11
|
+
className="inline-flex items-center gap-1.5 text-[0.875rem] text-fg-muted hover:text-fg"
|
|
12
12
|
>
|
|
13
13
|
<svg
|
|
14
14
|
viewBox="0 0 24 24"
|
|
@@ -17,21 +17,26 @@ export default function NewPostPage() {
|
|
|
17
17
|
stroke="currentColor"
|
|
18
18
|
strokeWidth="2"
|
|
19
19
|
>
|
|
20
|
-
<path
|
|
20
|
+
<path
|
|
21
|
+
d="M19 12H5M11 18l-6-6 6-6"
|
|
22
|
+
strokeLinecap="round"
|
|
23
|
+
strokeLinejoin="round"
|
|
24
|
+
/>
|
|
21
25
|
</svg>
|
|
22
26
|
All posts
|
|
23
27
|
</Link>
|
|
24
28
|
|
|
25
29
|
<h1 className="mt-6 text-3xl font-semibold tracking-tight">New post</h1>
|
|
26
|
-
<p className="mt-1 text-
|
|
27
|
-
Compose a draft. Save without publishing, or hit publish when
|
|
30
|
+
<p className="mt-1 text-fg-muted">
|
|
31
|
+
Compose a draft. Save without publishing, or hit publish when
|
|
32
|
+
you're ready.
|
|
28
33
|
</p>
|
|
29
34
|
|
|
30
35
|
<form className="mt-8 space-y-6">
|
|
31
36
|
<div>
|
|
32
37
|
<label
|
|
33
38
|
htmlFor="title"
|
|
34
|
-
className="block text-[0.8125rem] font-medium text-
|
|
39
|
+
className="block text-[0.8125rem] font-medium text-fg"
|
|
35
40
|
>
|
|
36
41
|
Title
|
|
37
42
|
</label>
|
|
@@ -46,7 +51,7 @@ export default function NewPostPage() {
|
|
|
46
51
|
<div>
|
|
47
52
|
<label
|
|
48
53
|
htmlFor="slug"
|
|
49
|
-
className="block text-[0.8125rem] font-medium text-
|
|
54
|
+
className="block text-[0.8125rem] font-medium text-fg"
|
|
50
55
|
>
|
|
51
56
|
Slug
|
|
52
57
|
</label>
|
|
@@ -61,7 +66,7 @@ export default function NewPostPage() {
|
|
|
61
66
|
<div>
|
|
62
67
|
<label
|
|
63
68
|
htmlFor="excerpt"
|
|
64
|
-
className="block text-[0.8125rem] font-medium text-
|
|
69
|
+
className="block text-[0.8125rem] font-medium text-fg"
|
|
65
70
|
>
|
|
66
71
|
Excerpt
|
|
67
72
|
</label>
|
|
@@ -75,7 +80,7 @@ export default function NewPostPage() {
|
|
|
75
80
|
<div>
|
|
76
81
|
<label
|
|
77
82
|
htmlFor="body"
|
|
78
|
-
className="block text-[0.8125rem] font-medium text-
|
|
83
|
+
className="block text-[0.8125rem] font-medium text-fg"
|
|
79
84
|
>
|
|
80
85
|
Body
|
|
81
86
|
</label>
|
|
@@ -83,10 +88,10 @@ export default function NewPostPage() {
|
|
|
83
88
|
id="body"
|
|
84
89
|
name="body"
|
|
85
90
|
placeholder="Write your post here. Markdown is supported."
|
|
86
|
-
className="textarea mt-2 min-h-
|
|
91
|
+
className="textarea mt-2 min-h-64 font-mono"
|
|
87
92
|
/>
|
|
88
93
|
</div>
|
|
89
|
-
<div className="flex items-center justify-end gap-2 border-t border-
|
|
94
|
+
<div className="flex items-center justify-end gap-2 border-t border-border pt-6">
|
|
90
95
|
<Link href="/dashboard/posts" className="btn btn-outline">
|
|
91
96
|
Cancel
|
|
92
97
|
</Link>
|
|
@@ -10,11 +10,11 @@ export default function PostsPage() {
|
|
|
10
10
|
<div className="px-6 py-10 sm:px-10">
|
|
11
11
|
<div className="flex flex-wrap items-end justify-between gap-4">
|
|
12
12
|
<div>
|
|
13
|
-
<p className="text-[0.75rem] font-semibold uppercase tracking-wider text-
|
|
13
|
+
<p className="text-[0.75rem] font-semibold uppercase tracking-wider text-fg-subtle">
|
|
14
14
|
Dashboard
|
|
15
15
|
</p>
|
|
16
16
|
<h1 className="mt-1 text-3xl font-semibold tracking-tight">Posts</h1>
|
|
17
|
-
<p className="mt-1 text-
|
|
17
|
+
<p className="mt-1 text-fg-muted">{posts.length} total</p>
|
|
18
18
|
</div>
|
|
19
19
|
<Link href="/dashboard/posts/new" className="btn btn-primary btn-sm">
|
|
20
20
|
<svg
|
|
@@ -33,7 +33,7 @@ export default function PostsPage() {
|
|
|
33
33
|
<div className="mt-8 card overflow-hidden">
|
|
34
34
|
<table className="w-full text-left text-[0.875rem]">
|
|
35
35
|
<thead>
|
|
36
|
-
<tr className="border-b border-
|
|
36
|
+
<tr className="border-b border-border bg-surface-2 text-[0.7rem] font-semibold uppercase tracking-wider text-fg-subtle">
|
|
37
37
|
<th className="px-5 py-3 font-semibold">Title</th>
|
|
38
38
|
<th className="px-5 py-3 font-semibold">Author</th>
|
|
39
39
|
<th className="px-5 py-3 font-semibold">Status</th>
|
|
@@ -45,17 +45,17 @@ export default function PostsPage() {
|
|
|
45
45
|
{posts.map((p) => (
|
|
46
46
|
<tr
|
|
47
47
|
key={p.slug}
|
|
48
|
-
className="border-b border-
|
|
48
|
+
className="border-b border-border last:border-0 hover:bg-surface-2"
|
|
49
49
|
>
|
|
50
50
|
<td className="px-5 py-3.5">
|
|
51
51
|
<Link
|
|
52
52
|
href={`/dashboard/posts/${p.slug}`}
|
|
53
|
-
className="font-medium text-
|
|
53
|
+
className="font-medium text-fg hover:text-accent"
|
|
54
54
|
>
|
|
55
55
|
{p.title}
|
|
56
56
|
</Link>
|
|
57
57
|
</td>
|
|
58
|
-
<td className="px-5 py-3.5 text-
|
|
58
|
+
<td className="px-5 py-3.5 text-fg-muted">{p.author.name}</td>
|
|
59
59
|
<td className="px-5 py-3.5">
|
|
60
60
|
<span className="badge badge-success badge-dot">Published</span>
|
|
61
61
|
</td>
|
|
@@ -68,7 +68,7 @@ export default function PostsPage() {
|
|
|
68
68
|
))}
|
|
69
69
|
</div>
|
|
70
70
|
</td>
|
|
71
|
-
<td className="px-5 py-3.5 text-right text-
|
|
71
|
+
<td className="px-5 py-3.5 text-right text-fg-subtle">
|
|
72
72
|
<time dateTime={p.date}>{formatDate(p.date)}</time>
|
|
73
73
|
</td>
|
|
74
74
|
</tr>
|
|
@@ -5,27 +5,38 @@ export const metadata: Metadata = { title: "Settings" };
|
|
|
5
5
|
export default function SettingsPage() {
|
|
6
6
|
return (
|
|
7
7
|
<div className="mx-auto max-w-2xl px-6 py-10 sm:px-10">
|
|
8
|
-
<p className="text-[0.75rem] font-semibold uppercase tracking-wider text-
|
|
8
|
+
<p className="text-[0.75rem] font-semibold uppercase tracking-wider text-fg-subtle">
|
|
9
9
|
Dashboard
|
|
10
10
|
</p>
|
|
11
11
|
<h1 className="mt-1 text-3xl font-semibold tracking-tight">Settings</h1>
|
|
12
|
-
<p className="mt-1 text-
|
|
12
|
+
<p className="mt-1 text-fg-muted">Manage your project preferences.</p>
|
|
13
13
|
|
|
14
14
|
<div className="mt-10 space-y-10">
|
|
15
15
|
<section>
|
|
16
16
|
<h2 className="text-[0.95rem] font-semibold">Profile</h2>
|
|
17
|
-
<p className="mt-1 text-[0.875rem] text-
|
|
17
|
+
<p className="mt-1 text-[0.875rem] text-fg-muted">
|
|
18
18
|
Information that shows up on posts you author.
|
|
19
19
|
</p>
|
|
20
20
|
<div className="mt-5 space-y-4">
|
|
21
21
|
<div>
|
|
22
|
-
<label
|
|
22
|
+
<label
|
|
23
|
+
htmlFor="name"
|
|
24
|
+
className="block text-[0.8125rem] font-medium"
|
|
25
|
+
>
|
|
23
26
|
Name
|
|
24
27
|
</label>
|
|
25
|
-
<input
|
|
28
|
+
<input
|
|
29
|
+
id="name"
|
|
30
|
+
type="text"
|
|
31
|
+
defaultValue="Alex Chen"
|
|
32
|
+
className="input mt-1.5"
|
|
33
|
+
/>
|
|
26
34
|
</div>
|
|
27
35
|
<div>
|
|
28
|
-
<label
|
|
36
|
+
<label
|
|
37
|
+
htmlFor="email"
|
|
38
|
+
className="block text-[0.8125rem] font-medium"
|
|
39
|
+
>
|
|
29
40
|
Email
|
|
30
41
|
</label>
|
|
31
42
|
<input
|
|
@@ -36,7 +47,10 @@ export default function SettingsPage() {
|
|
|
36
47
|
/>
|
|
37
48
|
</div>
|
|
38
49
|
<div>
|
|
39
|
-
<label
|
|
50
|
+
<label
|
|
51
|
+
htmlFor="bio"
|
|
52
|
+
className="block text-[0.8125rem] font-medium"
|
|
53
|
+
>
|
|
40
54
|
Bio
|
|
41
55
|
</label>
|
|
42
56
|
<textarea
|
|
@@ -48,9 +62,9 @@ export default function SettingsPage() {
|
|
|
48
62
|
</div>
|
|
49
63
|
</section>
|
|
50
64
|
|
|
51
|
-
<section className="border-t border-
|
|
65
|
+
<section className="border-t border-border pt-8">
|
|
52
66
|
<h2 className="text-[0.95rem] font-semibold">Rendering</h2>
|
|
53
|
-
<p className="mt-1 text-[0.875rem] text-
|
|
67
|
+
<p className="mt-1 text-[0.875rem] text-fg-muted">
|
|
54
68
|
How the framework renders pages for this project.
|
|
55
69
|
</p>
|
|
56
70
|
<div className="mt-5 grid gap-2">
|
|
@@ -61,31 +75,39 @@ export default function SettingsPage() {
|
|
|
61
75
|
hint: "Default. Server-rendered HTML, WASM-hydrated.",
|
|
62
76
|
},
|
|
63
77
|
{ id: "ssr", label: "SSR only", hint: "No client JavaScript." },
|
|
64
|
-
{
|
|
65
|
-
|
|
78
|
+
{
|
|
79
|
+
id: "ssr-htmx",
|
|
80
|
+
label: "SSR + HTMX",
|
|
81
|
+
hint: "Progressive enhancement.",
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
id: "wasm",
|
|
85
|
+
label: "Full WASM SPA",
|
|
86
|
+
hint: "Single-page app in WebAssembly.",
|
|
87
|
+
},
|
|
66
88
|
].map((opt, i) => (
|
|
67
89
|
<label
|
|
68
90
|
key={opt.id}
|
|
69
|
-
className="flex cursor-pointer items-start gap-3 rounded-lg border border-
|
|
91
|
+
className="flex cursor-pointer items-start gap-3 rounded-lg border border-border p-4 transition-colors hover:bg-surface-2 has-checked:border-accent has-checked:bg-accent-soft"
|
|
70
92
|
>
|
|
71
93
|
<input
|
|
72
94
|
type="radio"
|
|
73
95
|
name="renderer"
|
|
74
96
|
defaultChecked={i === 0}
|
|
75
|
-
className="mt-1 h-4 w-4 cursor-pointer accent-
|
|
97
|
+
className="mt-1 h-4 w-4 cursor-pointer accent-accent"
|
|
76
98
|
/>
|
|
77
99
|
<div>
|
|
78
100
|
<p className="font-medium">{opt.label}</p>
|
|
79
|
-
<p className="text-[0.8125rem] text-
|
|
101
|
+
<p className="text-[0.8125rem] text-fg-muted">{opt.hint}</p>
|
|
80
102
|
</div>
|
|
81
103
|
</label>
|
|
82
104
|
))}
|
|
83
105
|
</div>
|
|
84
106
|
</section>
|
|
85
107
|
|
|
86
|
-
<section className="border-t border-
|
|
108
|
+
<section className="border-t border-border pt-8">
|
|
87
109
|
<h2 className="text-[0.95rem] font-semibold">Danger zone</h2>
|
|
88
|
-
<p className="mt-1 text-[0.875rem] text-
|
|
110
|
+
<p className="mt-1 text-[0.875rem] text-fg-muted">
|
|
89
111
|
Irreversible actions. Be sure before proceeding.
|
|
90
112
|
</p>
|
|
91
113
|
<div className="mt-5 flex items-center justify-between rounded-lg border border-[#fecaca] bg-[#fef2f2] p-4">
|
|
@@ -105,7 +127,7 @@ export default function SettingsPage() {
|
|
|
105
127
|
</div>
|
|
106
128
|
</section>
|
|
107
129
|
|
|
108
|
-
<div className="flex justify-end gap-2 border-t border-
|
|
130
|
+
<div className="flex justify-end gap-2 border-t border-border pt-8">
|
|
109
131
|
<button type="button" className="btn btn-outline">
|
|
110
132
|
Cancel
|
|
111
133
|
</button>
|
|
@@ -20,11 +20,11 @@ export default function GlobalError({
|
|
|
20
20
|
Runtime error
|
|
21
21
|
</span>
|
|
22
22
|
<h1 className="mt-5 text-4xl font-semibold tracking-tight">Something went wrong.</h1>
|
|
23
|
-
<p className="mt-4 text-
|
|
23
|
+
<p className="mt-4 text-fg-muted">
|
|
24
24
|
We logged the error. You can try again, or head back to the homepage.
|
|
25
25
|
</p>
|
|
26
26
|
{error.digest ? (
|
|
27
|
-
<p className="mt-2 font-mono text-[0.75rem] text-
|
|
27
|
+
<p className="mt-2 font-mono text-[0.75rem] text-fg-subtle">
|
|
28
28
|
digest: {error.digest}
|
|
29
29
|
</p>
|
|
30
30
|
) : null}
|