pico-pixel-player

pico-pixel-player/webclient/src/components/SVG.tsx
SVG.tsx
⎇
Raw
1import { type Accessor, createSignal } from "solid-js";
2
3const defaultColor = "#888";
4const highlightColor = "#AAA";
5
6interface StateProps {
7 disabled: Accessor<boolean>;
8}
9
10export function CogSVG() {
11 const [hovered, setHovered] = createSignal();
12 return (
13 <svg
14 xmlns="http://www.w3.org/2000/svg"
15 width="24"
16 height="24"
17 viewBox="0 0 24 24"
18 onMouseEnter={() => setHovered(true)}
19 onMouseLeave={() => setHovered(false)}
20 >
21 <path
22 fill={hovered() ? "#FFF" : "#CCC"}
23 d="M21 10V9h-1V7h1V5h-1V4h-1V3h-2v1h-2V3h-1V1h-4v2H9v1H7V3H5v1H4v1H3v2h1v2H3v1H1v4h2v1h1v2H3v2h1v1h1v1h2v-1h2v1h1v2h4v-2h1v-1h2v1h2v-1h1v-1h1v-2h-1v-2h1v-1h2v-4zm-11 0V9h4v1h1v4h-1v1h-4v-1H9v-4z"
24 />
25 </svg>
26 );
27}
28
29export function PlaySVG(props: StateProps) {
30 const [hovered, setHovered] = createSignal();
31 return (
32 <svg
33 xmlns="http://www.w3.org/2000/svg"
34 width="24"
35 height="24"
36 viewBox="0 0 24 24"
37 onMouseEnter={() => setHovered(true)}
38 onMouseLeave={() => setHovered(false)}
39 >
40 <path
41 fill={hovered() && !props.disabled() ? highlightColor : defaultColor}
42 d="M22 11v2h-1v1h-1v1h-2v1h-2v1h-1v1h-2v1h-2v1h-1v1H8v1H6v1H3v-1H2V2h1V1h3v1h2v1h2v1h1v1h2v1h2v1h1v1h2v1h2v1h1v1z"
43 />
44 </svg>
45 );
46}
47
48export function PauseSVG(props: StateProps) {
49 const [hovered, setHovered] = createSignal();
50 return (
51 <svg
52 xmlns="http://www.w3.org/2000/svg"
53 width="24"
54 height="24"
55 viewBox="0 0 24 24"
56 onMouseEnter={() => setHovered(true)}
57 onMouseLeave={() => setHovered(false)}
58 >
59 <path
60 fill={hovered() && !props.disabled() ? highlightColor : defaultColor}
61 d="M23 2v20h-1v1h-7v-1h-1V2h1V1h7v1zM9 2h1v20H9v1H2v-1H1V2h1V1h7z"
62 />
63 </svg>
64 );
65}
66
67export function NextTrackSVG(props: StateProps) {
68 const [hovered, setHovered] = createSignal();
69 return (
70 <svg
71 xmlns="http://www.w3.org/2000/svg"
72 width="24"
73 height="24"
74 viewBox="0 0 24 24"
75 onMouseEnter={() => setHovered(true)}
76 onMouseLeave={() => setHovered(false)}
77 >
78 <path
79 fill={hovered() && !props.disabled() ? highlightColor : defaultColor}
80 d="M7 19v-2h1v-1h1v-1h1v-1h1v-1h1v-2h-1v-1h-1V9H9V8H8V7H7V5h1V4h2v1h1v1h1v1h1v1h1v1h1v1h1v1h1v2h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1H8v-1z"
81 />
82 </svg>
83 );
84}
85
86export function PreviousTrackSVG(props: StateProps) {
87 const [hovered, setHovered] = createSignal();
88 return (
89 <svg
90 xmlns="http://www.w3.org/2000/svg"
91 width="24"
92 height="24"
93 viewBox="0 0 24 24"
94 onMouseEnter={() => setHovered(true)}
95 onMouseLeave={() => setHovered(false)}
96 >
97 <path
98 fill={hovered() && !props.disabled() ? highlightColor : defaultColor}
99 d="M17 5v2h-1v1h-1v1h-1v1h-1v1h-1v2h1v1h1v1h1v1h1v1h1v2h-1v1h-2v-1h-1v-1h-1v-1h-1v-1h-1v-1H9v-1H8v-1H7v-2h1v-1h1V9h1V8h1V7h1V6h1V5h1V4h2v1z"
100 />
101 </svg>
102 );
103}
104
105export function ShuffleSVG(props: StateProps) {
106 return (
107 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
108 <path fill={!props.disabled() ? highlightColor : defaultColor} d="M8 14h1v3H8v1H7v1H1v-3h6v-1h1z" />
109 <path
110 fill={!props.disabled() ? highlightColor : defaultColor}
111 d="M22 17h1v1h-1v1h-1v1h-1v1h-1v1h-1v-3h-4v-1h-1v-1h-1v-2h-1v-1h-1v-2H9v-1H8V9H7V8H1V5h7v1h1v2h1v2h1v1h1v2h1v1h1v2h4v-3h1v1h1v1h1v1h1z"
112 />
113 <path
114 fill={!props.disabled() ? highlightColor : defaultColor}
115 d="M23 6v1h-1v1h-1v1h-1v1h-1v1h-1V8h-4v1h-1v1h-1V7h1V6h1V5h4V2h1v1h1v1h1v1h1v1z"
116 />
117 </svg>
118 );
119}
120
121export function RepeatSVG(props: StateProps) {
122 return (
123 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
124 <path
125 fill={!props.disabled() ? highlightColor : defaultColor}
126 d="M23 14v1h-1v2h-1v2h-1v1h-1v1h-2v1h-2v1H9v-1H7v-1H5v-1H3v1H2v1H1v-8h8v1H8v1H7v2h1v1h2v1h4v-1h2v-1h1v-1h1v-2h1v-1zm0-12v8h-8V9h1V8h1V6h-1V5h-2V4h-4v1H8v1H7v1H6v2H5v1H1V9h1V7h1V5h1V4h1V3h2V2h2V1h6v1h2v1h2v1h2V3h1V2z"
127 />
128 </svg>
129 );
130}
131
132export function VolumeSVG() {
133 return (
134 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
135 <path
136 fill={defaultColor}
137 d="M14 2v20h-3v-1h-1v-1H9v-1H8v-1H7v-1H6v-1H1V8h5V7h1V6h1V5h1V4h1V3h1V2zm3 13v-1h-1v-1h1v-2h-1v-1h1V9h1v1h1v4h-1v1z"
138 />
139 <path
140 fill={defaultColor}
141 d="M23 10v4h-1v2h-1v1h-1v1h-1v-1h-1v-1h1v-1h1v-1h1v-4h-1V9h-1V8h-1V7h1V6h1v1h1v1h1v2z"
142 />
143 </svg>
144 );
145}
146
147export function MusicSVG() {
148 return (
149 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
150 <path
151 fill={defaultColor}
152 d="M23 1v17h-1v1h-1v1h-4v-1h-1v-1h-1v-3h1v-1h1v-1h3V8h-2v1h-3v1h-4v1H9v10H8v1H7v1H3v-1H2v-1H1v-3h1v-1h1v-1h3V6h2V5h3V4h4V3h3V2h3V1z"
153 />
154 </svg>
155 );
156}
157
158export function ClosedFolderSVG(props: { forButton: boolean }) {
159 const [hovered, setHovered] = createSignal();
160
161 return (
162 <svg
163 xmlns="http://www.w3.org/2000/svg"
164 width="24"
165 height="24"
166 viewBox="0 0 24 24"
167 onMouseEnter={() => setHovered(true)}
168 onMouseLeave={() => setHovered(false)}
169 >
170 <path
171 fill={props.forButton ? (hovered() ? highlightColor : defaultColor) : "#ead800"}
172 d="M23 6v15h-1v1H2v-1H1V3h1V2h9v1h1v1h1v1h9v1z"
173 />
174 </svg>
175 );
176}
177
178export function OpenFolderSVG() {
179 const [hovered, setHovered] = createSignal();
180 return (
181 <svg
182 xmlns="http://www.w3.org/2000/svg"
183 width="24"
184 height="24"
185 viewBox="0 0 24 24"
186 onMouseEnter={() => setHovered(true)}
187 onMouseLeave={() => setHovered(false)}
188 >
189 <path fill={hovered() ? highlightColor : defaultColor} d="M2 16H1V3h1V2h7v1h1v1h9v1h1v4H5v1H4v2H3v2H2z" />
190 <path
191 fill={hovered() ? highlightColor : defaultColor}
192 d="M23 10v2h-1v2h-1v2h-1v2h-1v3h-1v1H3v-1H2v-3h1v-2h1v-2h1v-2h1v-2z"
193 />
194 </svg>
195 );
196}
197
198export function FullscreenSVG() {
199 const [hovered, setHovered] = createSignal();
200 return (
201 <svg
202 xmlns="http://www.w3.org/2000/svg"
203 width="24"
204 height="24"
205 viewBox="0 0 24 24"
206 onMouseEnter={() => setHovered(true)}
207 onMouseLeave={() => setHovered(false)}
208 >
209 <path
210 fill={hovered() ? highlightColor : defaultColor}
211 d="M9 20v3H2v-1H1v-7h3v5zM9 1v3H4v5H1V2h1V1zm14 14v7h-1v1h-7v-3h5v-5zm0-13v7h-3V4h-5V1h7v1z"
212 />
213 </svg>
214 );
215}
216
217export function ClearSVG() {
218 const [hovered, setHovered] = createSignal();
219 return (
220 <svg
221 xmlns="http://www.w3.org/2000/svg"
222 width="24"
223 height="24"
224 viewBox="0 0 24 24"
225 onMouseEnter={() => setHovered(true)}
226 onMouseLeave={() => setHovered(false)}
227 >
228 <path
229 fill={hovered() ? highlightColor : defaultColor}
230 d="M15 13h1v1h1v1h1v1h1v1h1v1h1v1h1v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-2v1h-1v1H9v1H8v1H7v1H6v1H5v1H4v-1H3v-1H2v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-2H8v-1H7V9H6V8H5V7H4V6H3V5H2V4h1V3h1V2h1v1h1v1h1v1h1v1h1v1h1v1h1v1h2V8h1V7h1V6h1V5h1V4h1V3h1V2h1v1h1v1h1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1z"
231 />
232 </svg>
233 );
234}
235
236export function DeleteSVG() {
237 const [hovered, setHovered] = createSignal();
238
239 return (
240 <svg
241 xmlns="http://www.w3.org/2000/svg"
242 width="24"
243 height="24"
244 viewBox="0 0 24 24"
245 onMouseEnter={() => setHovered(true)}
246 onMouseLeave={() => setHovered(false)}
247 >
248 <path
249 fill={hovered() ? highlightColor : defaultColor}
250 d="M22 3v2H2V3h6V2h1V1h6v1h1v1zM4 7v15h1v1h14v-2h1V7zm12 12h-2V9h2zm-6 0H8V9h2z"
251 />
252 </svg>
253 );
254}
255
256export function RefreshSVG() {
257 const [hovered, setHovered] = createSignal();
258 return (
259 <svg
260 xmlns="http://www.w3.org/2000/svg"
261 width="24"
262 height="24"
263 viewBox="0 0 24 24"
264 onMouseEnter={() => setHovered(true)}
265 onMouseLeave={() => setHovered(false)}
266 >
267 <path
268 fill={hovered() ? highlightColor : defaultColor}
269 d="M23 14v1h-1v2h-1v2h-1v1h-1v1h-2v1h-2v1H9v-1H7v-1H5v-1H3v1H2v1H1v-8h8v1H8v1H7v2h1v1h2v1h4v-1h2v-1h1v-1h1v-2h1v-1zm0-12v8h-8V9h1V8h1V6h-1V5h-2V4h-4v1H8v1H7v1H6v2H5v1H1V9h1V7h1V5h1V4h1V3h2V2h2V1h6v1h2v1h2v1h2V3h1V2z"
270 />
271 </svg>
272 );
273}
274
275export function DragSVG() {
276 return (
277 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
278 <path
279 fill={defaultColor}
280 d="M22 11h1v2h-1v1H2v-1H1v-2h1v-1h20zm0 8h1v2h-1v1H2v-1H1v-2h1v-1h20zm1-16v2h-1v1H2V5H1V3h1V2h20v1z"
281 />
282 </svg>
283 );
284}
285
286export function LinkSVG() {
287 const [hovered, setHovered] = createSignal();
288
289 return (
290 <svg
291 xmlns="http://www.w3.org/2000/svg"
292 width="24"
293 height="24"
294 viewBox="0 0 24 24"
295 onMouseEnter={() => setHovered(true)}
296 onMouseLeave={() => setHovered(false)}
297 >
298 <path
299 fill={hovered() ? highlightColor : defaultColor}
300 d="M16 10h1v7h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1H5v-1H4v-1H3v-1H2v-1H1v-5h1v-1h1v-1h1v-1h1v4H4v3h1v1h1v1h3v-1h1v-1h1v-1h1v-1h1v-1h1v-3h-1v-1h-1v-1h1V9h1V8h1v1h1z"
301 />
302 <path
303 fill={hovered() ? highlightColor : defaultColor}
304 d="M23 5v5h-1v1h-1v1h-1v1h-1V9h1V6h-1V5h-1V4h-3v1h-1v1h-1v1h-1v1h-1v1h-1v3h1v1h1v1h-1v1h-1v1H9v-1H8v-1H7V7h1V6h1V5h1V4h1V3h1V2h1V1h6v1h1v1h1v1h1v1z"
305 />
306 </svg>
307 );
308}
309
310export function DownloadSVG() {
311 const [hovered, setHovered] = createSignal();
312
313 return (
314 <svg
315 xmlns="http://www.w3.org/2000/svg"
316 width="24"
317 height="24"
318 viewBox="0 0 24 24"
319 onMouseEnter={() => setHovered(true)}
320 onMouseLeave={() => setHovered(false)}
321 >
322 <path
323 fill={hovered() ? highlightColor : defaultColor}
324 d="M2 20h20v3H2zM20 8v2h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-2v-1h-1v-1H9v-1H8v-1H7v-1H6v-1H5v-1H4V8h1V7h2v1h1v1h1v1h1V1h4v9h1V9h1V8h1V7h2v1z"
325 />
326 </svg>
327 );
328}
329
330export function SyncSVG() {
331 const [hovered, setHovered] = createSignal();
332
333 return (
334 <svg
335 xmlns="http://www.w3.org/2000/svg"
336 width="24"
337 height="24"
338 viewBox="0 0 24 24"
339 onMouseEnter={() => setHovered(true)}
340 onMouseLeave={() => setHovered(false)}
341 >
342 <path
343 fill={hovered() ? highlightColor : defaultColor}
344 d="M22 12v-1h-2V9h-1V8h-1V7h-3v1h-1V6h-1V5H8v1H7v1H6v1H5v3H2v1H1v5h1v1h1v1h2v1h14v-1h2v-1h1v-1h1v-5zM9 17v-1H8v-1H7v-1H6v-1h3V9h3v4h3v1h-1v1h-1v1h-1v1h-1v1h-1v-1z"
345 />
346 </svg>
347 );
348}
349
350export function UploadSVG() {
351 const [hovered, setHovered] = createSignal();
352
353 return (
354 <svg
355 xmlns="http://www.w3.org/2000/svg"
356 width="24"
357 height="24"
358 viewBox="0 0 24 24"
359 onMouseEnter={() => setHovered(true)}
360 onMouseLeave={() => setHovered(false)}
361 >
362 <path
363 fill={hovered() ? highlightColor : defaultColor}
364 d="M5 10H4V8h1V7h1V6h1V5h1V4h1V3h1V2h1V1h2v1h1v1h1v1h1v1h1v1h1v1h1v1h1v2h-1v1h-2v-1h-1V9h-1V8h-1v9h-4V8H9v1H8v1H7v1H5zM2 20h20v3H2z"
365 />
366 </svg>
367 );
368}
369
370export function SpinnerSVG() {
371 return (
372 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
373 <path fill={defaultColor} d="M23 9v6h-1v2h-3v-2h1V9h-1V7h-1V6h-1V5h-2V4h-2V3h-1V1h3v1h2v1h2v1h1v1h1v2h1v2z" />
374 </svg>
375 );
376}
377
378export function PlaylistSVG() {
379 const [hovered, setHovered] = createSignal();
380
381 return (
382 <svg
383 xmlns="http://www.w3.org/2000/svg"
384 width="24"
385 height="24"
386 viewBox="0 0 24 24"
387 onMouseEnter={() => setHovered(true)}
388 onMouseLeave={() => setHovered(false)}
389 >
390 <path fill={hovered() ? highlightColor : defaultColor} d="M1 3h12v3H1zm0 6h12v3H1zm0 6h6v3H1z" />
391 <path
392 fill={hovered() ? highlightColor : defaultColor}
393 d="M23 1v6h-2v1h-2v13h-1v1h-1v1h-5v-1h-2v-1H9v-3h1v-1h2v-1h4V4h1V3h2V2h2V1z"
394 />
395 </svg>
396 );
397}
398
399export function SaveSVG() {
400 const [hovered, setHovered] = createSignal();
401
402 return (
403 <svg
404 xmlns="http://www.w3.org/2000/svg"
405 width="24"
406 height="24"
407 viewBox="0 0 24 24"
408 onMouseEnter={() => setHovered(true)}
409 onMouseLeave={() => setHovered(false)}
410 >
411 <path
412 fill={hovered() ? highlightColor : defaultColor}
413 d="M22 7V6h-1V5h-1V4h-1V3h-1V2h-1V1H2v1H1v20h1v1h20v-1h1V7zM9 19v-4h1v-1h4v1h1v4h-1v1h-4v-1zm7-9H4V4h12z"
414 />
415 </svg>
416 );
417}
418
419export function DownSVG() {
420 const [hovered, setHovered] = createSignal();
421 return (
422 <svg
423 xmlns="http://www.w3.org/2000/svg"
424 width="24"
425 height="24"
426 viewBox="0 0 24 24"
427 onMouseEnter={() => setHovered(true)}
428 onMouseLeave={() => setHovered(false)}
429 >
430 <path
431 fill={hovered() ? highlightColor : defaultColor}
432 d="M23 8v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-2v-1h-1v-1H9v-1H8v-1H7v-1H6v-1H5v-1H4v-1H3v-1H2V9H1V8h1V7h1V6h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h2v-1h1v-1h1v-1h1v-1h1V9h1V8h1V7h1V6h1v1h1v1z"
433 />
434 </svg>
435 );
436}
437
438export function UpSVG() {
439 const [hovered, setHovered] = createSignal();
440 return (
441 <svg
442 xmlns="http://www.w3.org/2000/svg"
443 width="24"
444 height="24"
445 viewBox="0 0 24 24"
446 onMouseEnter={() => setHovered(true)}
447 onMouseLeave={() => setHovered(false)}
448 >
449 <path
450 fill={hovered() ? highlightColor : defaultColor}
451 d="M23 16v1h-1v1h-1v1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-1h-2v1h-1v1H9v1H8v1H7v1H6v1H5v1H4v1H3v-1H2v-1H1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1V9h1V8h1V7h1V6h2v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1z"
452 />
453 </svg>
454 );
455}
456
457export function DownloadManagerSVG() {
458 const [hovered, setHovered] = createSignal();
459
460 return (
461 <svg
462 xmlns="http://www.w3.org/2000/svg"
463 width="24"
464 height="24"
465 viewBox="0 0 24 24"
466 onMouseEnter={() => setHovered(true)}
467 onMouseLeave={() => setHovered(false)}
468 >
469 <path
470 fill={hovered() ? highlightColor : defaultColor}
471 d="M2 5h3v3H2zm0 12h3v3H2zm0-6h3v3H2zm21-5v1h-1v1H10V7H9V6h1V5h12v1zm-1 6h1v1h-1v1H10v-1H9v-1h1v-1h12zm0 6h1v1h-1v1H10v-1H9v-1h1v-1h12z"
472 />
473 <path fill="none" d="M0 0h24v24H0z" />
474 </svg>
475 );
476}
477
478export function StopSVG() {
479 const [hovered, setHovered] = createSignal();
480
481 return (
482 <svg
483 xmlns="http://www.w3.org/2000/svg"
484 width="24"
485 height="24"
486 viewBox="0 0 24 24"
487 onMouseEnter={() => setHovered(true)}
488 onMouseLeave={() => setHovered(false)}
489 >
490 <path
491 fill={hovered() ? highlightColor : defaultColor}
492 d="M22 8V7h-1V6h-1V5h-1V4h-1V3h-1V2h-1V1H8v1H7v1H6v1H5v1H4v1H3v1H2v1H1v8h1v1h1v1h1v1h1v1h1v1h1v1h1v1h8v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1v-1h1V8zm-6 9h-2v-1h-1v-1h-2v1h-1v1H8v-1H7v-2h1v-1h1v-2H8v-1H7V8h1V7h2v1h1v1h2V8h1V7h2v1h1v2h-1v1h-1v2h1v1h1v2h-1z"
493 />
494 </svg>
495 );
496}
497
498export function FilterSVG() {
499 const [hovered, setHovered] = createSignal();
500
501 return (
502 <svg
503 xmlns="http://www.w3.org/2000/svg"
504 width="24"
505 height="24"
506 viewBox="0 0 24 24"
507 onMouseEnter={() => setHovered(true)}
508 onMouseLeave={() => setHovered(false)}
509 >
510 <path
511 fill={hovered() ? highlightColor : defaultColor}
512 d="M22 20v-1h-1v-1h-1v-1h-1v-1h-2v-1h1v-2h1V7h-1V5h-1V4h-1V3h-1V2h-2V1H7v1H5v1H4v1H3v1H2v2H1v6h1v2h1v1h1v1h1v1h2v1h6v-1h2v-1h1v2h1v1h1v1h1v1h1v1h2v-1h1v-2zm-10-5v1H8v-1H6v-1H5v-2H4V8h1V6h1V5h2V4h4v1h2v1h1v2h1v4h-1v2h-1v1z"
513 />
514 </svg>
515 );
516}
517
518export function InfoSVG() {
519 const [hovered, setHovered] = createSignal();
520
521 return (
522 <svg
523 xmlns="http://www.w3.org/2000/svg"
524 width="24"
525 height="24"
526 viewBox="0 0 24 24"
527 onMouseEnter={() => setHovered(true)}
528 onMouseLeave={() => setHovered(false)}
529 >
530 <path
531 fill={hovered() ? highlightColor : defaultColor}
532 d="M22 9V7h-1V5h-1V4h-1V3h-2V2h-2V1H9v1H7v1H5v1H4v1H3v2H2v2H1v6h1v2h1v2h1v1h1v1h2v1h2v1h6v-1h2v-1h2v-1h1v-1h1v-2h1v-2h1V9zM11 6h2v2h-2zm-1 9h1v-5h-1V9h3v6h1v2h-4z"
533 />
534 <path fill="none" d="M0 0h24v24H0z" />
535 </svg>
536 );
537}
538