Finished up the partners page.

This commit is contained in:
Alexis Werefox 2021-04-26 02:18:47 +00:00
parent 5e5a86f79f
commit f120dd2bd4
5 changed files with 111 additions and 30 deletions

View File

@ -1,8 +1,42 @@
import Link from "next/link"; import Link from "next/link";
export default function TestimonialCard({ src, alt, url, innerText, user }) { export function validURL(str) {
const finalsrc = Boolean(src) ? src : "/images/werefox_logo.png"; var pattern = new RegExp(
const isMe = (user == "Shadow8t4") ? "text-werefox-blue-dark dark:text-werefox-blue": "text-werefox-pink-dark dark:text-werefox-pink" "^(https?:\\/\\/)?" + // protocol
"((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // domain name
"((\\d{1,3}\\.){3}\\d{1,3}))" + // OR ip (v4) address
"(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*" + // port and path
"(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
"(\\#[-a-z\\d_]*)?$",
"i"
); // fragment locator
return !!pattern.test(str);
}
export function renderPossibleURLField(field) {
if (validURL(field)) {
return (
<Link href={field}>
<a className="p-2 text-center overflow-ellipsis overflow-hidden ring-2 ring-werefox-grey-light dark:ring-werefox-grey-darker rounded-lg bg-werefox-grey-lightest dark:bg-werefox-grey">
{field}
</a>
</Link>
);
} else {
return (
<p className="p-2 text-center overflow-ellipsis overflow-hidden ring-2 ring-werefox-grey-light dark:ring-werefox-grey-darker rounded-lg bg-werefox-grey-lightest dark:bg-werefox-grey">
{field}
</p>
);
}
}
export default function TestimonialCard({ src, alt, url, fields, bio, user }) {
const finalsrc = Boolean(src) ? src : "/images/logo.png";
const isMe =
user == "Shadow8t4"
? "text-werefox-blue-dark dark:text-werefox-blue"
: "text-werefox-pink-dark dark:text-werefox-pink";
return ( return (
<div className="rounded-lg container flex overflow-hidden ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey"> <div className="rounded-lg container flex overflow-hidden ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
@ -18,9 +52,19 @@ export default function TestimonialCard({ src, alt, url, innerText, user }) {
</div> </div>
</a> </a>
</Link>{" "} </Link>{" "}
<div className={`animate-wiggle flex-5 p-4 sm:text-lg text-xs text-center ${isMe}`}> <div className={`flex-5 p-4 sm:text-sm text-xs text-center ${isMe}`}>
<div className="grid grid-cols-1 gap-2">
<div className="ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker rounded-lg p-2 grid grid-cols-2 grid-rows-1 gap-2 bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
{Object.keys(fields).map((field) => (
<>
{renderPossibleURLField(field)}
{renderPossibleURLField(fields[field])}
</>
))}
</div>
<div className="ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker rounded-lg p-2 bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
<p> <p>
{innerText} {bio}
<br /> <br />
{"- "} {"- "}
<Link href={url}> <Link href={url}>
@ -29,5 +73,7 @@ export default function TestimonialCard({ src, alt, url, innerText, user }) {
</p> </p>
</div> </div>
</div> </div>
</div>
</div>
); );
} }

View File

@ -1,7 +1,5 @@
import Head from "next/head";
import BasicPage from "../../components/basic-page-template"; import BasicPage from "../../components/basic-page-template";
import WCard from "../../components/werefox-card"; import WCard from "../../components/werefox-card";
import MS from "../../components/mutant-standard";
export default function HRT() { export default function HRT() {
return ( return (

View File

@ -1,12 +1,48 @@
import BasicPage from "../../../components/basic-page-template" import BasicPage from "../../../components/basic-page-template";
import WCard from "../../../components/werefox-card";
import LCard from "../../../components/love-card";
export default function HRT() { // Use this to list out partner info on this page. >w>
const PARTNERS = {
// heatherhorns: {
// url: "",
// avi: "",
// fields: {
// "": "",
// },
// bio: ``,
// },
};
export default function Partners() {
if (PARTNERS == null) {
return ( return (
<BasicPage <BasicPage page_title="Partners" card_title="Partners!">
page_title="Partners" {Object.keys(PARTNERS).map((partner) => (
card_title="Partners!" <LCard
> key={PARTNERS[partner].url}
src={PARTNERS[partner].avi}
alt={`${partner}'s Avatar`}
url={PARTNERS[partner].url}
user={partner}
fields={PARTNERS[partner].fields}
bio={PARTNERS[partner].bio}
></LCard>
))}
</BasicPage> </BasicPage>
); );
} else {
return (
<BasicPage page_title="Partners" card_title="Partners!">
<WCard>
<p className="p-6 text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
Oh! It looks like I don't have any partners at the moment.
<br />
Oh well!
</p>
</WCard>
</BasicPage>
);
}
} }

View File

@ -1,9 +1,6 @@
import Head from "next/head";
import Image from "next/image";
import BasicPage from "../components/basic-page-template"; import BasicPage from "../components/basic-page-template";
import IDButton from "../components/identity-button"; import IDButton from "../components/identity-button";
import WCard from "../components/werefox-card"; import WCard from "../components/werefox-card";
import MS from "../components/mutant-standard";
export default function Home() { export default function Home() {
return ( return (

View File

@ -8,12 +8,16 @@ module.exports = {
}, },
colors: { colors: {
"werefox-blue": { "werefox-blue": {
DEFAULT: "#60A4FF", DEFAULT: "#75B1FF",
dark: "#2885ff", dark: "#0052B8",
darker: "#0052B8",
darkest: "#0052B8",
}, },
"werefox-pink": { "werefox-pink": {
DEFAULT: "#ff84c5", DEFAULT: "#FF84CA",
dark: "#ff329f", dark: "#9E0054",
darker: "#8A0040",
darkest: "#75003F",
}, },
"werefox-grey": { "werefox-grey": {
lightest: "#EEE", lightest: "#EEE",