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 DownloadSVG() {
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="M2 20h20v3H2zM20 8v2h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-1v1h-2v-1h-1v-1H9v-1H8v-1H7v-1H6v-1H5v-1H4V8h1V7h2v1h1v1h1v1h1V1h4v9h1V9h1V8h1V7h2v1z"
301 />
302 </svg>
303 );
304}
305
306export function SpinnerSVG() {
307 return (
308 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
309 <path fill={defaultColor} d="M23 9v6h-1v2h-3v-2h1V9h-1V7h-1V6h-1V5h-2V4h-2V3h-1V1h3v1h2v1h2v1h1v1h1v2h1v2z" />
310 </svg>
311 );
312}
313