use proper svgs > grommet

2024-07-09 20:29:39 -04:00
parent 944d27025f
commit 8ce8c4c255
4 changed files with 65 additions and 128 deletions
@@ -8,7 +8,6 @@
      "name": "website",
      "version": "0.0.0",
      "dependencies": {
-        "grommet-icons": "^4.12.1",
        "react": "^18.2.0",
        "react-dom": "^18.2.0"
      },
@@ -399,27 +398,6 @@
        "node": ">=6.9.0"
      }
    },
-    "node_modules/@emotion/is-prop-valid": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz",
-      "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==",
-      "peer": true,
-      "dependencies": {
-        "@emotion/memoize": "^0.8.1"
-      }
-    },
-    "node_modules/@emotion/memoize": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz",
-      "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==",
-      "peer": true
-    },
-    "node_modules/@emotion/unitless": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz",
-      "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==",
-      "peer": true
-    },
    "node_modules/@esbuild/aix-ppc64": {
      "version": "0.20.2",
      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
@@ -1353,12 +1331,6 @@
        "@types/react": "*"
      }
    },
-    "node_modules/@types/stylis": {
-      "version": "4.2.5",
-      "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz",
-      "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==",
-      "peer": true
-    },
    "node_modules/@typescript-eslint/eslint-plugin": {
      "version": "7.9.0",
      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.9.0.tgz",
@@ -1793,15 +1765,6 @@
        "node": ">= 6"
      }
    },
-    "node_modules/camelize": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz",
-      "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==",
-      "peer": true,
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
    "node_modules/caniuse-lite": {
      "version": "1.0.30001620",
      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001620.tgz",
@@ -1922,26 +1885,6 @@
        "node": ">= 8"
      }
    },
-    "node_modules/css-color-keywords": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
-      "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==",
-      "peer": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/css-to-react-native": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
-      "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==",
-      "peer": true,
-      "dependencies": {
-        "camelize": "^1.0.0",
-        "css-color-keywords": "^1.0.0",
-        "postcss-value-parser": "^4.0.2"
-      }
-    },
    "node_modules/cssesc": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -1957,7 +1900,8 @@
    "node_modules/csstype": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true
    },
    "node_modules/debug": {
      "version": "4.3.4",
@@ -2645,16 +2589,6 @@
      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
      "dev": true
    },
-    "node_modules/grommet-icons": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/grommet-icons/-/grommet-icons-4.12.1.tgz",
-      "integrity": "sha512-LhOP6BkDAGiSNcUOfsGGRo+AKD6zWOXeNeusY1WYvKplAR6mKCAQfH7Nig2Buc/v5zadKSko2NDtCQqwJaME0Q==",
-      "peerDependencies": {
-        "react": "^16.6.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.6.0 || ^17.0.0 || ^18.0.0",
-        "styled-components": ">= 5.x"
-      }
-    },
    "node_modules/has-flag": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -3035,6 +2969,7 @@
      "version": "3.3.7",
      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "dev": true,
      "funding": [
        {
          "type": "github",
@@ -3234,7 +3169,8 @@
    "node_modules/picocolors": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
+      "dev": true
    },
    "node_modules/picomatch": {
      "version": "2.3.1",
@@ -3270,6 +3206,7 @@
      "version": "8.4.38",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+      "dev": true,
      "funding": [
        {
          "type": "opencollective",
@@ -3411,7 +3348,8 @@
    "node_modules/postcss-value-parser": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
    },
    "node_modules/prelude-ls": {
      "version": "1.2.1",
@@ -3633,12 +3571,6 @@
        "node": ">=10"
      }
    },
-    "node_modules/shallowequal": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
-      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
-      "peer": true
-    },
    "node_modules/shebang-command": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -3685,6 +3617,7 @@
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -3791,40 +3724,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/styled-components": {
-      "version": "6.1.11",
-      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.11.tgz",
-      "integrity": "sha512-Ui0jXPzbp1phYij90h12ksljKGqF8ncGx+pjrNPsSPhbUUjWT2tD1FwGo2LF6USCnbrsIhNngDfodhxbegfEOA==",
-      "peer": true,
-      "dependencies": {
-        "@emotion/is-prop-valid": "1.2.2",
-        "@emotion/unitless": "0.8.1",
-        "@types/stylis": "4.2.5",
-        "css-to-react-native": "3.2.0",
-        "csstype": "3.1.3",
-        "postcss": "8.4.38",
-        "shallowequal": "1.1.0",
-        "stylis": "4.3.2",
-        "tslib": "2.6.2"
-      },
-      "engines": {
-        "node": ">= 16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/styled-components"
-      },
-      "peerDependencies": {
-        "react": ">= 16.8.0",
-        "react-dom": ">= 16.8.0"
-      }
-    },
-    "node_modules/stylis": {
-      "version": "4.3.2",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz",
-      "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==",
-      "peer": true
-    },
    "node_modules/sucrase": {
      "version": "3.35.0",
      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
@@ -3996,12 +3895,6 @@
      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
      "dev": true
    },
-    "node_modules/tslib": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
-      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
-      "peer": true
-    },
    "node_modules/type-check": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -10,7 +10,6 @@
    "preview": "vite preview"
  },
  "dependencies": {
-    "grommet-icons": "^4.12.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
@@ -1,9 +1,5 @@
 import { useState, useEffect } from 'react';
-import {
-    Twitter,
-    Github,
-    Lastfm
-} from 'grommet-icons'
+import { GitHub, LastFM, Twitter } from './SocialIcons';

 export default function Footer() {
    const [mailState, setMailState] = useState(false);
@@ -15,7 +11,7 @@ export default function Footer() {
    }, [mailState])

    return (
-        <div className="bg-zinc-600 text-center text-white bottom-0 left-0 right-0 p-4 select-none">
+        <div className="bg-stone-800 lg:w-1/2 md:w-full mx-auto rounded-lg text-center text-white bottom-0 left-0 right-0 p-4 select-none">
            <h1 className="font-bold">&copy; {new Date().getFullYear()}, Alex Frantz. All Rights Reserved</h1>
            <p>All logos & images on this page belong to their respective owners.</p>

@@ -31,14 +27,14 @@ export default function Footer() {

            <div className="block space-x-2">
                {/* socials */}
-                <a href="https://twitter.com/avvex__" target="_blank">
-                    <Twitter color="black" size="medium" />
-                </a>
                <a href="https://github.com/azpha" target="_blank">
-                    <Github color="black" size="medium" />
+                    <GitHub />
+                </a>
+                <a href="https://twitter.com/avvex__" target="_blank">
+                    <Twitter />
                </a>
                <a href="https://last.fm/user/lulawex" target="_blank">
-                    <Lastfm color="black" size="medium" />
+                    <LastFM />
                </a>
            </div>
        </div>
@@ -0,0 +1,49 @@
+export const GitHub = () => {
+    return (
+        <svg 
+            role="img" 
+            viewBox="0 0 24 24" 
+            className="w-7 mt-2 mx-auto bg-white p-1 rounded-lg inline"
+            xmlns="http://www.w3.org/2000/svg">
+                <title>GitHub</title>
+                <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 
+                11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 
+                17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 
+                3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 
+                0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 
+                3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 
+                3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+        </svg>
+    )
+}
+
+export const LastFM = () => {
+    return (
+        <svg 
+            role="img" 
+            viewBox="0 0 24 24" 
+            className="w-7 mt-2 mx-auto bg-white p-1 rounded-lg inline"
+            xmlns="http://www.w3.org/2000/svg">
+            <title>Last.fm</title>
+            <path d="M10.584 17.21l-.88-2.392s-1.43 1.594-3.573 1.594c-1.897 0-3.244-1.649-3.244-4.288 0-3.382 1.704-4.591 3.381-4.591 
+            2.42 0 3.189 1.567 3.849 3.574l.88 2.749c.88 2.666 2.529 4.81 7.285 4.81 3.409 0 5.718-1.044 5.718-3.793 
+            0-2.227-1.265-3.381-3.63-3.931l-1.758-.385c-1.21-.275-1.567-.77-1.567-1.595 0-.934.742-1.484 1.952-1.484 1.32 0 2.034.495 2.144 
+            1.677l2.749-.33c-.22-2.474-1.924-3.492-4.729-3.492-2.474 0-4.893.935-4.893 3.932 0 1.87.907 3.051 3.189 3.601l1.87.44c1.402.33 
+            1.869.907 1.869 1.704 0 1.017-.99 1.43-2.86 1.43-2.776 0-3.93-1.457-4.59-3.464l-.907-2.75c-1.155-3.573-2.997-4.893-6.653-4.893C2.144 
+            5.333 0 7.89 0 12.233c0 4.18 2.144 6.434 5.993 6.434 3.106 0 4.591-1.457 4.591-1.457z"/></svg>
+    )
+}
+
+export const Twitter = () => {
+    return (
+        <svg 
+            role="img" 
+            viewBox="0 0 24 24" 
+            className="w-7 mt-2 mx-auto bg-white p-1 rounded-lg inline"
+            xmlns="http://www.w3.org/2000/svg">
+            <title>X</title>
+            <path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 
+            1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/>
+        </svg>
+    )
+}