alex/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use proper svgs > grommet

Browse Source
This commit is contained in:
Alex Frantz
2024-07-09 20:29:39 -04:00
parent 944d27025f
commit 8ce8c4c255
4 changed files with 65 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Footer.tsx
+7 -11
View File
@@ -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>
src/components/SocialIcons.tsx
+49
View File
@@ -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>
)
}