ada/werefox-cafe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactored the contacts page into components, removed unnecessary links.

Browse Source
This commit is contained in:
Alexis Werefox 2021-05-01 21:16:55 +00:00
parent 1946e75c27
commit cc52a9fbef
4 changed files with 72 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/info/components/contacts-block.js Normal file
View File

@ -0,0 +1,19 @@
import CLink from "./contacts-link";
import { CONTACTS } from "../js/variables";
export default function ContactsBlock({}) {
return (
<div className="p-4 space-y-4">
{Object.keys(CONTACTS).map((contact) => (
<CLink
key={contact}
src={CONTACTS[contact].src}
alt={CONTACTS[contact].alt}
url={CONTACTS[contact].url}
description={contact}
url_text={CONTACTS[contact].url_text}
/>
))}
</div>
);
}

21
src/info/components/contacts-link.js Normal file
View File

@ -0,0 +1,21 @@
import Image from "next/image";
export default function ContactsLink({ src, alt, url, description, url_text }) {
return (
<p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
<a href={url} target="_blank">
<span className="animate-bounce relative inline-block w-6 h-6 align-middle">
<Image src={src} layout="fill" objectFit="contain" alt={alt} />
</span>
</a>{" "}
{description}{" "}
<a
className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
href={url}
target="_blank"
>
{url_text}
</a>
</p>
);
}

31
src/info/js/variables.js
View File

@ -146,6 +146,35 @@ export const PAGES = {
},
};
// An object listing pages folks can visit
export const CONTACTS = {
"My public Mastodon": {
url: "https://vulpine.club/@shadow8t4",
src: "/emoji/mastodon-logo.png",
alt: "The Mastodon logo",
url_text: "@shadow8t4@vulpine.club",
},
"My Twitter": {
url: "https://twitter.com/alexis_werefox",
src: "/emoji/twitter-logo.png",
alt: "The Twitter logo",
url_text: "@alexis_werefox",
},
"My Twitch": {
url: "https://twitch.tv/alexis_werefox",
src: "/emoji/twitch-logo.png",
alt: "The Twitch logo",
url_text: "@Alexis_Werefox",
},
"My e-mail": {
url: "mailto:adh9694@gmail.com",
src: "/emoji/inbox.svg",
alt: "An inbox emoji",
url_text: "adh9694@gmail.com",
},
};
// Use this to list out partners on the partners page. >w>
export const PARTNERS = {
@ -462,5 +491,5 @@ export const OTHER = {
alt: "Microphone emoji",
description: `*Nervous sweating* Heh! sometimes I write some music!? You're free to take a
listen if you want! Let me know what you think! It's usually based on my poetry.`,
}
},
};

85
src/info/pages/contacts/index.js
View File

@ -1,6 +1,6 @@
import BasicPage from "../../components/basic-page";
import WCard from "../../components/werefox-card";
import Image from "next/image";
import CBlock from "../../components/contacts-block";
export default function Contacts() {
return (
@ -9,88 +9,7 @@ export default function Contacts() {
card_title={`"Do you have a [Social Media]?"`}
>
<WCard innerText="You can find me in quite a few places!">
<div className="p-4 space-y-4">
<p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
<a href="https://vulpine.club/@shadow8t4" target="_blank">
<span className="animate-bounce relative inline-block w-6 h-6 align-middle">
<Image
src="/emoji/mastodon-logo.png"
layout="fill"
objectFit="contain"
alt="Mastodon logo"
/>
</span>
</a>{" "}
My public Mastodon{" "}
<a
className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
href="https://vulpine.club/@shadow8t4"
target="_blank"
>
@shadow8t4@vulpine.club
</a>
</p>
<p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
<a href="https://twitter.com/alexis_werefox" target="_blank">
<span className="animate-bounce relative inline-block w-6 h-6 align-middle">
<Image
src="/emoji/twitter-logo.png"
layout="fill"
objectFit="contain"
alt="Twitter logo"
/>
</span>
</a>{" "}
My Twitter{" "}
<a
className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
href="https://twitter.com/alexis_werefox"
target="_blank"
>
@alexis_werefox
</a>
</p>
<p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
<a href="https://www.twitch.tv/alexis_werefox" target="_blank">
<span className="animate-bounce relative inline-block w-6 h-6 align-middle">
<Image
src="/emoji/twitch-logo.png"
layout="fill"
objectFit="contain"
alt="Twitch logo"
/>
</span>
</a>{" "}
My Twitch{" "}
<a
className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
href="https://www.twitch.tv/alexis_werefox"
target="_blank"
>
@Alexis_Werefox
</a>
</p>
<p className="md:text-lg sm:text-md text-xs text-center text-werefox-blue-dark dark:text-werefox-blue">
<a href="mailto:adh9694@gmail.com" target="">
<span className="animate-bounce relative inline-block w-6 h-6 align-middle">
<Image
src="/emoji/inbox.svg"
layout="fill"
objectFit="contain"
alt="Inbox emoji"
/>
</span>
</a>{" "}
My e-mail{" "}
<a
className="animate-wiggle inline-flex transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink"
href="mailto:adh9694@gmail.com"
target="_blank"
>
adh9694@gmail.com
</a>
</p>
</div>
<CBlock />
</WCard>
</BasicPage>
);