Added social links on home page
This commit is contained in:
Mitchell McCaffrey
parent
0d2cc080c1
commit
98ecfc42d3
17
src/icons/SocialRedditIcon.js
Normal file
17
src/icons/SocialRedditIcon.js
Normal file
@ -0,0 +1,17 @@
|
||||
import React from "react";
|
||||
|
||||
function SocialRedditIcon() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
fill="currentcolor"
|
||||
>
|
||||
<path d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm5 4.75c-.491 0-.912.286-1.116.698l-2.908-.619a.312.312 0 00-.37.24l-.891 4.186c-1.863.052-3.537.61-4.749 1.483a1.75 1.75 0 10-1.926 2.858c-.027.174-.042.35-.042.529 0 2.692 3.134 4.875 7 4.875s7-2.183 7-4.875c0-.178-.014-.353-.041-.526a1.75 1.75 0 10-1.923-2.858c-1.196-.863-2.844-1.42-4.68-1.485l.797-3.75 2.605.553A1.247 1.247 0 0018.25 6c0-.69-.56-1.25-1.25-1.25zM9.492 16.095c.538.538 1.688.728 2.51.728.821 0 1.972-.19 2.51-.728a.324.324 0 01.458.458c-.853.852-2.488.918-2.969.918-.48 0-2.115-.066-2.967-.918a.324.324 0 01.458-.458zM14.75 12c.69 0 1.25.561 1.25 1.25 0 .69-.56 1.25-1.25 1.25s-1.25-.56-1.25-1.25c0-.689.56-1.25 1.25-1.25zm-5.5 0c.69 0 1.25.56 1.25 1.25s-.56 1.25-1.25 1.25c-.689 0-1.25-.56-1.25-1.25S8.561 12 9.25 12z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default SocialRedditIcon;
|
||||
17
src/icons/SocialTwitterIcon.js
Normal file
17
src/icons/SocialTwitterIcon.js
Normal file
@ -0,0 +1,17 @@
|
||||
import React from "react";
|
||||
|
||||
function SocialTwitterIcon() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
fill="currentcolor"
|
||||
>
|
||||
<path d="M24 12c0 6.63-5.37 12-12 12S0 18.63 0 12 5.37 0 12 0s12 5.37 12 12zM9.804 18.33c5.322 0 8.232-4.41 8.232-8.232 0-.126 0-.252-.006-.372a5.927 5.927 0 001.446-1.5 5.872 5.872 0 01-1.662.456c.6-.36 1.056-.924 1.272-1.602-.558.33-1.176.57-1.836.702a2.894 2.894 0 00-4.926 2.64A8.208 8.208 0 016.36 7.398c-.246.426-.39.924-.39 1.452 0 1.002.51 1.89 1.29 2.406a2.842 2.842 0 01-1.308-.36v.036c0 1.404.996 2.568 2.322 2.838a2.884 2.884 0 01-1.308.048 2.889 2.889 0 002.7 2.01 5.816 5.816 0 01-4.284 1.194 8.06 8.06 0 004.422 1.308" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default SocialTwitterIcon;
|
||||
17
src/icons/SocialYouTubeIcon.js
Normal file
17
src/icons/SocialYouTubeIcon.js
Normal file
@ -0,0 +1,17 @@
|
||||
import React from "react";
|
||||
|
||||
function SocialYouTubeIcon() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
fill="currentcolor"
|
||||
>
|
||||
<path d="M12 0c6.63 0 12 5.37 12 12s-5.37 12-12 12S0 18.63 0 12 5.37 0 12 0zm.28 6.001h-.56c-1.073.006-4.902.047-5.971.336A2.01 2.01 0 004.334 7.76c-.297 1.117-.33 3.31-.334 3.785v.183c.004.474.037 2.668.334 3.784a2.01 2.01 0 001.415 1.424c1.105.298 5.156.332 6.068.336h.366c.912-.004 4.963-.038 6.068-.336a2.01 2.01 0 001.415-1.424C20 14.257 20 11.636 20 11.636s0-2.62-.334-3.876a2.01 2.01 0 00-1.415-1.423c-1.07-.289-4.898-.33-5.97-.336zm-1.916 3.256l4.181 2.38-4.181 2.378V9.257z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export default SocialYouTubeIcon;
|
||||
@ -1,5 +1,5 @@
|
||||
import React, { useState, useEffect, useContext } from "react";
|
||||
import { Flex, Button, Image, Text } from "theme-ui";
|
||||
import { Flex, Button, Image, Text, IconButton, Link } from "theme-ui";
|
||||
|
||||
import Footer from "../components/Footer";
|
||||
|
||||
@ -9,6 +9,10 @@ import DonateModal from "../modals/DonationModal";
|
||||
|
||||
import AuthContext from "../contexts/AuthContext";
|
||||
|
||||
import RedditIcon from "../icons/SocialRedditIcon";
|
||||
import TwitterIcon from "../icons/SocialTwitterIcon";
|
||||
import YouTubeIcon from "../icons/SocialYouTubeIcon";
|
||||
|
||||
import owlington from "../images/Owlington.png";
|
||||
|
||||
function Home() {
|
||||
@ -60,6 +64,23 @@ function Home() {
|
||||
>
|
||||
Support Us
|
||||
</Button>
|
||||
<Flex sx={{ justifyContent: "center" }}>
|
||||
<Link href="https://www.reddit.com/r/OwlbearRodeo/">
|
||||
<IconButton title="Reddit" aria-label="Reddit">
|
||||
<RedditIcon />
|
||||
</IconButton>
|
||||
</Link>
|
||||
<Link href="https://twitter.com/OwlbearRodeo">
|
||||
<IconButton title="Twitter" aria-label="Twitter">
|
||||
<TwitterIcon />
|
||||
</IconButton>
|
||||
</Link>
|
||||
<Link href="https://www.youtube.com/channel/UCePe1wJC53_7fbBbSECG7YQ">
|
||||
<IconButton title="YouTube" aria-label="YouTube">
|
||||
<YouTubeIcon />
|
||||
</IconButton>
|
||||
</Link>
|
||||
</Flex>
|
||||
<JoinModal
|
||||
isOpen={isJoinModalOpen}
|
||||
onRequestClose={() => setIsJoinModalOpen(false)}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user