Skip to content

Commit

Permalink
adds header icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@stolinski
stolinski committed Dec 11, 2023
1 parent 8807372 commit 27439a3
Show file tree
Hide file tree
Showing 8 changed files with 299 additions and 104 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@
"gpt-3-encoder": "^1.1.4",
"gray-matter": "^4.0.3",
"js-cookie": "^3.0.5",
"media-chrome": "^1.4.4",
"media-chrome": "^2.0.0",
"npm-run-all": "^4.1.5",
"openai": "^3.3.0",
"puppeteer-core": "^21.4.1",
Expand Down
16 changes: 8 additions & 8 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

84 changes: 73 additions & 11 deletions src/lib/Icon.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,31 +18,36 @@
| 'edit'
| 'spotify'
| 'apple-podcasts'
| 'minimize'
| 'back-30'
| 'forward-30'
| 'share'
| 'download';
</script>

<script lang="ts">
import { capitalize } from '$utilities/capitalize';
export let name: IconName;
export let title: string | boolean;
export let title: string | boolean = '';
export let ariaHidden = true;
if (!title && title !== false) title = capitalize(name);
</script>

{#if name === 'play'}
<svg
xmlns="http://www.w3.org/2000/svg"
style="width: var(--icon_size, 16px);"
viewBox="0 0 16 16"
viewBox="0 0 8 10"
aria-hidden={ariaHidden}
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>{title}</title>
<path
d="M7.629 4.306C7.74306 4.38231 7.83655 4.48555 7.90121 4.6066C7.96586 4.72765 7.99968 4.86276 7.99968 5C7.99968 5.13723 7.96586 5.27235 7.90121 5.39339C7.83655 5.51444 7.74306 5.61769 7.629 5.694L1.228 9.871C0.695 10.218 0 9.825 0 9.176V0.823997C0 0.174997 0.695 -0.218003 1.228 0.128997L7.629 4.306Z"
fill="currentColor"
d="M11.629 7.306a.835.835 0 0 1 0 1.388l-6.401 4.177C4.695 13.218 4 12.825 4 12.176V3.824c0-.649.695-1.042 1.228-.695l6.4 4.177Z"
/></svg
>
/>
</svg>
{/if}
{#if name === 'playing'}
<svg
Expand All @@ -59,18 +64,19 @@

{#if name === 'pause'}
<svg
xmlns="http://www.w3.org/2000/svg"
style="width: var(--icon_size, 16px);"
viewBox="0 0 16 16"
viewBox="0 0 8 10"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<title>{title}</title>
<path
fill="currentColor"
fill-rule="evenodd"
d="M5 3a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H5Zm5 0a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1h-1Z"
clip-rule="evenodd"
/></svg
>
d="M1 0C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1V9C0 9.26522 0.105357 9.51957 0.292893 9.70711C0.48043 9.89464 0.734784 10 1 10H2C2.26522 10 2.51957 9.89464 2.70711 9.70711C2.89464 9.51957 3 9.26522 3 9V1C3 0.734784 2.89464 0.48043 2.70711 0.292893C2.51957 0.105357 2.26522 0 2 0H1ZM6 0C5.73478 0 5.48043 0.105357 5.29289 0.292893C5.10536 0.48043 5 0.734784 5 1V9C5 9.26522 5.10536 9.51957 5.29289 9.70711C5.48043 9.89464 5.73478 10 6 10H7C7.26522 10 7.51957 9.89464 7.70711 9.70711C7.89464 9.51957 8 9.26522 8 9V1C8 0.734784 7.89464 0.48043 7.70711 0.292893C7.51957 0.105357 7.26522 0 7 0H6Z"
/>
</svg>
{/if}

{#if name === 'sort'}
Expand Down Expand Up @@ -299,6 +305,62 @@
/>
</svg>
{/if}
{#if name === 'back-30'}
<svg width="10" height="19" viewBox="0 0 10 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0.480774 15.3505L1.54327 15.2216C1.57713 15.4924 1.66827 15.6994 1.81671 15.8427C1.96515 15.9859 2.14484 16.0575 2.35577 16.0575C2.58234 16.0575 2.77244 15.9716 2.92609 15.7997C3.08234 15.6278 3.16046 15.396 3.16046 15.1044C3.16046 14.8283 3.08624 14.6096 2.93781 14.4481C2.78937 14.2867 2.60838 14.2059 2.39484 14.2059C2.25421 14.2059 2.08624 14.2333 1.89093 14.288L2.01202 13.3934C2.3089 13.4013 2.53546 13.3375 2.69171 13.202C2.84796 13.064 2.92609 12.8817 2.92609 12.6552C2.92609 12.4625 2.86879 12.3088 2.75421 12.1942C2.63963 12.0796 2.48728 12.0223 2.29718 12.0223C2.10968 12.0223 1.94952 12.0875 1.81671 12.2177C1.6839 12.3479 1.60317 12.538 1.57452 12.788L0.562805 12.6161C0.633118 12.2697 0.738586 11.9937 0.879211 11.788C1.02244 11.5796 1.22036 11.4169 1.47296 11.2997C1.72817 11.1799 2.01333 11.12 2.32843 11.12C2.86749 11.12 3.29978 11.2919 3.62531 11.6356C3.89353 11.9169 4.02765 12.2346 4.02765 12.5888C4.02765 13.0914 3.75291 13.4924 3.20343 13.7919C3.53156 13.8622 3.79327 14.0197 3.98859 14.2645C4.1865 14.5093 4.28546 14.8049 4.28546 15.1513C4.28546 15.6539 4.10187 16.0822 3.73468 16.4364C3.36749 16.7906 2.91046 16.9677 2.36359 16.9677C1.84536 16.9677 1.41567 16.8192 1.07452 16.5223C0.733378 16.2229 0.535461 15.8322 0.480774 15.3505ZM6.82843 11.12C7.38312 11.12 7.81671 11.3179 8.12921 11.7138C8.50161 12.1825 8.68781 12.9598 8.68781 14.0458C8.68781 15.1291 8.50031 15.9078 8.12531 16.3817C7.81541 16.7723 7.38312 16.9677 6.82843 16.9677C6.27114 16.9677 5.82192 16.7541 5.48077 16.327C5.13963 15.8973 4.96906 15.133 4.96906 14.0341C4.96906 12.9559 5.15656 12.1799 5.53156 11.7059C5.84145 11.3153 6.27374 11.12 6.82843 11.12ZM6.82843 12.0302C6.69562 12.0302 6.57713 12.0731 6.47296 12.1591C6.36879 12.2424 6.28807 12.3934 6.23077 12.6122C6.15525 12.896 6.11749 13.3739 6.11749 14.0458C6.11749 14.7177 6.15135 15.1799 6.21906 15.4325C6.28676 15.6825 6.3714 15.8492 6.47296 15.9325C6.57713 16.0158 6.69562 16.0575 6.82843 16.0575C6.96124 16.0575 7.07973 16.0158 7.1839 15.9325C7.28807 15.8466 7.36879 15.6942 7.42609 15.4755C7.50161 15.1942 7.53937 14.7177 7.53937 14.0458C7.53937 13.3739 7.50551 12.913 7.43781 12.663C7.3701 12.4104 7.28416 12.2424 7.17999 12.1591C7.07843 12.0731 6.96124 12.0302 6.82843 12.0302Z"
fill="currentColor"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M8 3.16667C8 2.98986 7.93679 2.82029 7.82426 2.69526C7.71174 2.57024 7.55913 2.5 7.4 2.5L2.6 2.5C2.44087 2.5 2.28826 2.57024 2.17574 2.69526C2.06321 2.82029 2 2.98986 2 3.16667L2 3.83333C2 4.01014 2.06321 4.17971 2.17574 4.30474C2.28826 4.42976 2.44087 4.5 2.6 4.5L7.4 4.5C7.55913 4.5 7.71174 4.42976 7.82426 4.30474C7.93679 4.17971 8 4.01014 8 3.83333L8 3.16667Z"
fill="currentColor"
/>
<path
d="M0.231687 3.98579C0.160397 3.93237 0.101962 3.8601 0.0615511 3.77537C0.0211403 3.69064 -2.90656e-07 3.59606 -2.82258e-07 3.5C-2.73861e-07 3.40394 0.0211403 3.30936 0.0615511 3.22463C0.101962 3.1399 0.160397 3.06763 0.231687 3.01421L4.23247 0.0903865C4.56561 -0.152507 5 0.122586 5 0.576875L5 6.42313C5 6.87741 4.56561 7.15251 4.23247 6.90961L0.231687 3.98579Z"
fill="currentColor"
/>
</svg>
{/if}
{#if name === 'forward-30'}
<svg width="9" height="19" viewBox="0 0 9 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0.300781 15.3505L1.36328 15.2216C1.39714 15.4924 1.48828 15.6994 1.63672 15.8427C1.78516 15.9859 1.96484 16.0575 2.17578 16.0575C2.40234 16.0575 2.59245 15.9716 2.74609 15.7997C2.90234 15.6278 2.98047 15.396 2.98047 15.1044C2.98047 14.8283 2.90625 14.6096 2.75781 14.4481C2.60938 14.2867 2.42839 14.2059 2.21484 14.2059C2.07422 14.2059 1.90625 14.2333 1.71094 14.288L1.83203 13.3934C2.12891 13.4013 2.35547 13.3375 2.51172 13.202C2.66797 13.064 2.74609 12.8817 2.74609 12.6552C2.74609 12.4625 2.6888 12.3088 2.57422 12.1942C2.45964 12.0796 2.30729 12.0223 2.11719 12.0223C1.92969 12.0223 1.76953 12.0875 1.63672 12.2177C1.50391 12.3479 1.42318 12.538 1.39453 12.788L0.382812 12.6161C0.453125 12.2697 0.558594 11.9937 0.699219 11.788C0.842448 11.5796 1.04036 11.4169 1.29297 11.2997C1.54818 11.1799 1.83333 11.12 2.14844 11.12C2.6875 11.12 3.11979 11.2919 3.44531 11.6356C3.71354 11.9169 3.84766 12.2346 3.84766 12.5888C3.84766 13.0914 3.57292 13.4924 3.02344 13.7919C3.35156 13.8622 3.61328 14.0197 3.80859 14.2645C4.00651 14.5093 4.10547 14.8049 4.10547 15.1513C4.10547 15.6539 3.92188 16.0822 3.55469 16.4364C3.1875 16.7906 2.73047 16.9677 2.18359 16.9677C1.66536 16.9677 1.23568 16.8192 0.894531 16.5223C0.553385 16.2229 0.355469 15.8322 0.300781 15.3505ZM6.64844 11.12C7.20312 11.12 7.63672 11.3179 7.94922 11.7138C8.32161 12.1825 8.50781 12.9598 8.50781 14.0458C8.50781 15.1291 8.32031 15.9078 7.94531 16.3817C7.63542 16.7723 7.20312 16.9677 6.64844 16.9677C6.09115 16.9677 5.64193 16.7541 5.30078 16.327C4.95964 15.8973 4.78906 15.133 4.78906 14.0341C4.78906 12.9559 4.97656 12.1799 5.35156 11.7059C5.66146 11.3153 6.09375 11.12 6.64844 11.12ZM6.64844 12.0302C6.51562 12.0302 6.39714 12.0731 6.29297 12.1591C6.1888 12.2424 6.10807 12.3934 6.05078 12.6122C5.97526 12.896 5.9375 13.3739 5.9375 14.0458C5.9375 14.7177 5.97135 15.1799 6.03906 15.4325C6.10677 15.6825 6.19141 15.8492 6.29297 15.9325C6.39714 16.0158 6.51562 16.0575 6.64844 16.0575C6.78125 16.0575 6.89974 16.0158 7.00391 15.9325C7.10807 15.8466 7.1888 15.6942 7.24609 15.4755C7.32161 15.1942 7.35938 14.7177 7.35938 14.0458C7.35938 13.3739 7.32552 12.913 7.25781 12.663C7.1901 12.4104 7.10417 12.2424 7 12.1591C6.89844 12.0731 6.78125 12.0302 6.64844 12.0302Z"
fill="currentColor"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M7 3.16667C7 2.98986 6.93679 2.82029 6.82426 2.69526C6.71174 2.57024 6.55913 2.5 6.4 2.5L1.6 2.5C1.44087 2.5 1.28826 2.57024 1.17574 2.69526C1.06321 2.82029 1 2.98986 1 3.16667L1 3.83333C1 4.01014 1.06321 4.17971 1.17574 4.30474C1.28826 4.42976 1.44087 4.5 1.6 4.5L6.4 4.5C6.55913 4.5 6.71174 4.42976 6.82426 4.30474C6.93679 4.17971 7 4.01014 7 3.83333L7 3.16667Z"
fill="currentColor"
/>
<path
d="M8.58832 3.98579C8.65961 3.93237 8.71805 3.8601 8.75846 3.77537C8.79887 3.69064 8.82001 3.59606 8.82001 3.5C8.82001 3.40394 8.79887 3.30936 8.75846 3.22463C8.71805 3.1399 8.65961 3.06763 8.58832 3.01421L4.58754 0.0903865C4.2544 -0.152507 3.82001 0.122586 3.82001 0.576875L3.82001 6.42313C3.82001 6.87741 4.2544 7.15251 4.58754 6.90961L8.58832 3.98579Z"
fill="currentColor"
/>
</svg>
{/if}
{#if name === 'share'}
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
><path
fill-rule="evenodd"
clip-rule="evenodd"
d="M11.78 5.841a.75.75 0 0 1-1.06 0l-1.97-1.97v7.379a.75.75 0 0 1-1.5 0V3.871l-1.97 1.97a.75.75 0 0 1-1.06-1.06l3.25-3.25L8 1l.53.53 3.25 3.25a.75.75 0 0 1 0 1.061ZM2.5 9.75a.75.75 0 0 0-1.5 0V13a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V9.75a.75.75 0 0 0-1.5 0V13a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5V9.75Z"
fill="currentColor"
/></svg
>
{/if}
{#if name === 'minimize'}
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
><path
fill-rule="evenodd"
clip-rule="evenodd"
d="M2.22 5.22a.75.75 0 0 0 0 1.06l5.252 5.252a.75.75 0 0 0 1.06 0l5.252-5.252a.75.75 0 1 0-1.06-1.06L8.001 9.94 3.28 5.22a.75.75 0 0 0-1.06 0Z"
fill="currentColor"
/></svg
>
{/if}

<style>
@keyframes pulse {
Expand Down
Loading

0 comments on commit 27439a3

Please sign in to comment.