Skip to content

Commit def2a39

Browse files
danmarshalldanmarshall
committed
Enhance Sidebar component with external link to Google Fonts and improve layout
1 parent 8ee2717 commit def2a39

File tree

1 file changed

+85
-74
lines changed

1 file changed

+85
-74
lines changed

‎src/components/Sidebar.tsx‎

Lines changed: 85 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
22
// @ts-ignore
33
import makerjs from 'makerjs';
44
import * as opentype from 'opentype.js';
5+
import { ExternalLink } from 'lucide-react';
56

67
interface SidebarProps {
78
state: any;
@@ -65,22 +66,31 @@ export default function Sidebar({ state, setState }: SidebarProps) {
6566
<details open>
6667
<summary>Font Settings</summary>
6768
<div>
68-
<label>
69-
Google font:
70-
<select
71-
id="font-select"
72-
value={fontFamily}
73-
onChange={(e) => setState(prev => ({ ...prev, fontFamily: e.target.value }))}
74-
disabled={!!customFont}
69+
<div className="label-with-link">
70+
<label>
71+
Google font:
72+
</label>
73+
<a
74+
href="https://fonts.google.com/"
75+
target="_blank"
76+
rel="noopener noreferrer"
7577
>
76-
{fontOptions}
77-
</select>
78-
</label>
78+
Browse fonts <ExternalLink size={14} />
79+
</a>
80+
</div>
81+
<select
82+
id="font-select"
83+
value={fontFamily}
84+
onChange={(e) => setState(prev => ({ ...prev, fontFamily: e.target.value }))}
85+
disabled={!!customFont}
86+
>
87+
{fontOptions}
88+
</select>
7989

8090
<label>
81-
variant:
82-
<select
83-
id="font-variant"
91+
variant:
92+
<select
93+
id="font-variant"
8494
value={fontVariant}
8595
onChange={(e) => setState(prev => ({ ...prev, fontVariant: e.target.value }))}
8696
disabled={!!customFont}
@@ -94,10 +104,10 @@ export default function Sidebar({ state, setState }: SidebarProps) {
94104
</label>
95105

96106
<label>
97-
(optional) upload font:
98-
<input
99-
id="font-upload"
100-
type="file"
107+
(optional) upload font:
108+
<input
109+
id="font-upload"
110+
type="file"
101111
onChange={handleFileUpload}
102112
accept=".ttf,.otf,.woff,.woff2"
103113
/>
@@ -111,41 +121,42 @@ export default function Sidebar({ state, setState }: SidebarProps) {
111121
<summary>Text Settings</summary>
112122
<div>
113123
<label>
114-
text:
115-
<textarea
116-
id="input-text"
124+
text:
125+
<textarea
126+
id="input-text"
117127
rows={3}
118128
value={text}
119129
onChange={(e) => setState(prev => ({ ...prev, text: e.target.value }))}
120130
/>
121131
</label>
122132

123133
<label>
124-
size:
125-
<input
126-
type="number"
127-
id="input-size"
134+
size:
135+
<input
136+
type="number"
137+
id="input-size"
128138
value={size}
129139
onChange={(e) => setState(prev => ({ ...prev, size: Number(e.target.value) }))}
130140
/>
131141
</label>
132142

133143
<label>
134-
line height:
135-
<input
136-
type="number"
137-
id="input-line-height"
144+
line height:
145+
<span title="when you have multiline text">ℹ️</span>:
146+
<input
147+
type="number"
148+
id="input-line-height"
138149
value={lineHeight}
139150
onChange={(e) => setState(prev => ({ ...prev, lineHeight: Number(e.target.value) }))}
140-
step="0.1"
141-
min="0.1"
151+
step="0.1"
152+
min="0.1"
142153
/>
143154
</label>
144155

145156
<label>
146-
kerning:
147-
<input
148-
type="checkbox"
157+
kerning:
158+
<input
159+
type="checkbox"
149160
id="input-kerning"
150161
checked={kerning}
151162
onChange={(e) => setState(prev => ({ ...prev, kerning: e.target.checked }))}
@@ -159,15 +170,15 @@ export default function Sidebar({ state, setState }: SidebarProps) {
159170
<summary>Stroke</summary>
160171
<div>
161172
<label>
162-
Stroke color:
163-
<input
164-
type="color"
165-
id="input-stroke"
173+
Stroke color:
174+
<input
175+
type="color"
176+
id="input-stroke"
166177
value={stroke}
167178
onChange={(e) => setState(prev => ({ ...prev, stroke: e.target.value }))}
168179
/>
169-
<input
170-
type="text"
180+
<input
181+
type="text"
171182
value={stroke}
172183
onChange={(e) => setState(prev => ({ ...prev, stroke: e.target.value }))}
173184
placeholder="#000000"
@@ -176,19 +187,19 @@ export default function Sidebar({ state, setState }: SidebarProps) {
176187
</label>
177188

178189
<label>
179-
Stroke Width:
180-
<input
181-
type="text"
182-
id="input-stroke-width"
190+
Stroke Width:
191+
<input
192+
type="text"
193+
id="input-stroke-width"
183194
value={strokeWidth}
184195
onChange={(e) => setState(prev => ({ ...prev, strokeWidth: e.target.value }))}
185196
/>
186197
</label>
187198

188199
<label>
189-
Non-scaling stroke:
190-
<input
191-
type="checkbox"
200+
Non-scaling stroke:
201+
<input
202+
type="checkbox"
192203
id="input-stroke-non-scaling"
193204
checked={strokeNonScaling}
194205
onChange={(e) => setState(prev => ({ ...prev, strokeNonScaling: e.target.checked }))}
@@ -201,25 +212,25 @@ export default function Sidebar({ state, setState }: SidebarProps) {
201212
<summary>Fill</summary>
202213
<div>
203214
<label>
204-
fill:
205-
<input
206-
type="checkbox"
215+
fill:
216+
<input
217+
type="checkbox"
207218
id="input-filled"
208219
checked={filled}
209220
onChange={(e) => setState(prev => ({ ...prev, filled: e.target.checked }))}
210221
/>
211222
</label>
212223

213224
<label>
214-
Fill color:
215-
<input
216-
type="color"
217-
id="input-fill"
225+
Fill color:
226+
<input
227+
type="color"
228+
id="input-fill"
218229
value={fill}
219230
onChange={(e) => setState(prev => ({ ...prev, fill: e.target.value }))}
220231
/>
221-
<input
222-
type="text"
232+
<input
233+
type="text"
223234
value={fill}
224235
onChange={(e) => setState(prev => ({ ...prev, fill: e.target.value }))}
225236
placeholder="#000000"
@@ -228,9 +239,9 @@ export default function Sidebar({ state, setState }: SidebarProps) {
228239
</label>
229240

230241
<label>
231-
Fill rule:
232-
<select
233-
id="input-fill-rule"
242+
Fill rule:
243+
<select
244+
id="input-fill-rule"
234245
value={fillRule}
235246
onChange={(e) => setState(prev => ({ ...prev, fillRule: e.target.value as 'evenodd' | 'nonzero' }))}
236247
>
@@ -245,41 +256,41 @@ export default function Sidebar({ state, setState }: SidebarProps) {
245256
<summary>Options</summary>
246257
<div>
247258
<label>
248-
union:
249-
<input
250-
type="checkbox"
259+
union:
260+
<input
261+
type="checkbox"
251262
id="input-union"
252263
checked={union}
253264
onChange={(e) => setState(prev => ({ ...prev, union: e.target.checked }))}
254265
/>
255266
</label>
256267

257268
<label>
258-
separate characters:
259-
<input
260-
type="checkbox"
269+
separate characters:
270+
<input
271+
type="checkbox"
261272
id="input-separate"
262273
checked={separate}
263274
onChange={(e) => setState(prev => ({ ...prev, separate: e.target.checked }))}
264275
/>
265276
</label>
266277

267278
<label>
268-
bezier accuracy
269-
<span title="0.5 = accurate to half a pixel &#013;.001 = accurate to 1/1000th of a pixel &#013;smaller numbers take longer to compute &#013;leave blank for auto">ℹ️</span>:
270-
<input
271-
type="text"
272-
id="input-bezier-accuracy"
273-
placeholder="auto"
279+
bezier accuracy
280+
<span title="0.5 = accurate to half a pixel &#013;.001 = accurate to 1/1000th of a pixel &#013;smaller numbers take longer to compute &#013;leave blank for auto">ℹ️</span>:
281+
<input
282+
type="text"
283+
id="input-bezier-accuracy"
284+
placeholder="auto"
274285
value={bezierAccuracy}
275286
onChange={(e) => setState(prev => ({ ...prev, bezierAccuracy: e.target.value }))}
276287
/>
277288
</label>
278289

279290
<label>
280-
Dxf Units:
281-
<select
282-
id="dxf-units"
291+
Dxf Units:
292+
<select
293+
id="dxf-units"
283294
value={dxfUnits}
284295
onChange={(e) => setState(prev => ({ ...prev, dxfUnits: e.target.value }))}
285296
>
@@ -294,6 +305,6 @@ export default function Sidebar({ state, setState }: SidebarProps) {
294305
</div>
295306
</details>
296307

297-
</aside>
308+
</aside >
298309
);
299310
}

0 commit comments

Comments
 (0)