From d88a45b7f8f4ba086df66738e791e98b6a1e5747 Mon Sep 17 00:00:00 2001
From: Alexis Werefox <adh9694@gmail.com>
Date: Sun, 18 Apr 2021 23:27:30 +0000
Subject: [PATCH] Updated some theming, made a component for identity info.

---
 src/info/pages/components/identity-button.js |  38 ++++
 src/info/pages/index.js                      | 190 ++++++++++---------
 src/info/tailwind.config.js                  |   6 +-
 3 files changed, 143 insertions(+), 91 deletions(-)
 create mode 100644 src/info/pages/components/identity-button.js

diff --git a/src/info/pages/components/identity-button.js b/src/info/pages/components/identity-button.js
new file mode 100644
index 0000000..e77f9f4
--- /dev/null
+++ b/src/info/pages/components/identity-button.js
@@ -0,0 +1,38 @@
+import Image from "next/image";
+import Link from "next/link";
+
+export default function IdentityButton({
+  extraClasses,
+  imageObj,
+  innerText,
+  url,
+}) {
+  const images = Array(imageObj).flat();
+
+  return (
+    <div className="container max-w-sm mx-auto md:px-2 p-2">
+      <Link href={url}>
+        <a
+          target="_blank"
+          className={`${extraClasses} block rounded-lg text-lg text-center text-werefox-grey-lighter dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-lightest transition hover:bg-werefox-grey-dark dark:hover:bg-werefox-grey-light`}
+        >
+          {images.map((source) => (
+            <span
+              key={source.src}
+              className="relative inline-block w-4 h-4 align-middle mb-1"
+            >
+              {" "}
+              <Image
+                src={source.src}
+                layout="fill"
+                objectFit="contain"
+                alt={source.alt}
+              />{" "}
+            </span>
+          ))}{" "}
+          {innerText}
+        </a>
+      </Link>
+    </div>
+  );
+}
diff --git a/src/info/pages/index.js b/src/info/pages/index.js
index 9fa18cd..77bac2f 100644
--- a/src/info/pages/index.js
+++ b/src/info/pages/index.js
@@ -1,6 +1,7 @@
 import Head from "next/head";
 import Link from "next/link";
 import Image from "next/image";
+import IDButton from "./components/identity-button";
 
 export default function Home() {
   return (
@@ -9,10 +10,10 @@ export default function Home() {
         <title>About A Werefox</title>
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <div className="container space-y-4 mx-auto px-4 pt-4">
-        <div className="rounded-lg container bg-werefox-grey-light dark:bg-werefox-grey">
+      <div className="container space-y-4 mx-auto px-4 py-4">
+        <div className="rounded-lg container ring-4 ring-werefox-blue bg-werefox-grey-light dark:bg-werefox-grey">
           <h1 className="p-4 text-xl text-center text-werefox-blue-dark dark:text-werefox-blue">
-            <span className="relative inline-block w-6 h-6 align-middle">
+            <span className="animate-bounce relative inline-block w-6 h-6 align-middle">
               {" "}
               <Image
                 src="/images/pixel_alexis.png"
@@ -21,102 +22,113 @@ export default function Home() {
                 alt="Pixel Alexis!"
               />{" "}
             </span>
-            -Hi! I'm Alexis Werefox!
+            {"- "}
+            Hi! I'm Alexis Werefox!
           </h1>
         </div>
-        <div className="rounded-lg container bg-werefox-grey-light dark:bg-werefox-grey">
-          <div className="grid xl:grid-rows-1 xl:grid-cols-7 sm:grid-rows-3 sm:grid-cols-3 grid-rows-7 grid-cols-1 gap-2">
-            <div className="container p-2">
-              <p className="rounded-lg text-lg text-center text-werefox-grey-light dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-light">
-                26
-              </p>
-            </div>
-            <div className="container p-2">
-              <p className="rounded-lg text-lg text-center text-werefox-grey-light dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-light">
-                Single
-              </p>
-            </div>
-            <div className="container p-2">
-              <p className="rounded-lg text-lg text-center text-werefox-grey-light dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-light">
-                <span className="relative inline-block w-4 h-4 align-middle">
-                  {" "}
-                  <Image
-                    src="/emoji/polyamory_flag.svg"
-                    layout="fill"
-                    objectFit="contain"
-                    alt="Polyamory flag"
-                  />{" "}
-                </span>
-                Polyam
-              </p>
-            </div>
-            <div className="container p-2">
-              <p className="rounded-lg text-lg xl:pt-1 xl:align-text-bottom xl:text-sm xl:min-h-full text-center text-werefox-grey-light dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-light">
-                <span className="relative inline-block w-4 h-4 align-middle">
-                  {" "}
-                  <Image
-                    src="/emoji/female_symbol.svg"
-                    layout="fill"
-                    objectFit="contain"
-                    alt="Female symbol"
-                  />{" "}
-                </span>
-                <span className="relative inline-block w-4 h-4 align-middle">
-                  {" "}
-                  <Image
-                    src="/emoji/transgender_flag.svg"
-                    layout="fill"
-                    objectFit="contain"
-                    alt="Transgender flag"
-                  />{" "}
-                </span>{" "}
-                Trans-femme
-              </p>
-            </div>
-            <div className="container p-2">
-              <p className="rounded-lg text-lg text-center text-werefox-grey-light dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-light">
-                <span className="relative inline-block w-4 h-4 align-middle">
-                  {" "}
-                  <Image
-                    src="/emoji/pansexual_flag.svg"
-                    layout="fill"
-                    objectFit="contain"
-                    alt="Pansexual flag"
-                  />{" "}
-                </span>{" "}
-                Pansexual
-              </p>
-            </div>
-            <div className="container p-2">
-              <p className="rounded-lg text-lg text-center text-werefox-grey-light dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-light">
-                <span className="relative inline-block w-4 h-4 align-middle">
-                  {" "}
-                  <Image
-                    src="/emoji/lesbian_flag.svg"
-                    layout="fill"
-                    objectFit="contain"
-                    alt="Lesbian flag"
-                  />{" "}
-                </span>{" "}
-                Lesbian
-              </p>
-            </div>
-            <div className="container p-2">
-              <p className="rounded-lg text-lg text-center text-werefox-grey-light dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-light">
-                ADHD
-              </p>
-            </div>
+        <div className="rounded-lg container ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
+          <div className="grid xl:grid-rows-2 xl:grid-cols-5 sm:grid-rows-3 sm:grid-cols-3 grid-rows-9 grid-cols-1 gap-2">
+            <IDButton
+              extraClasses=""
+              imageObj={{ src: "/emoji/18_plus.svg", alt: "Over 18" }}
+              innerText="26"
+              url=""
+            />
+            <IDButton
+              extraClasses="xl:pt-1 xl:align-text-bottom xl:text-sm xl:min-h-full"
+              imageObj={[
+                {
+                  src: "/emoji/female_symbol.svg",
+                  alt: "Female symbol",
+                },
+                {
+                  src: "/emoji/transgender_flag.svg",
+                  alt: "Transgender flag",
+                },
+              ]}
+              innerText="Trans-femme"
+              url="https://trans.wikia.org/wiki/Transfeminine"
+            />
+            <IDButton
+              extraClasses=""
+              imageObj={{
+                src: "/emoji/speech_bubble_left.svg",
+                alt: "",
+              }}
+              innerText="She/her"
+              url="https://pronouns.me/she"
+            />
+            <IDButton
+              extraClasses=""
+              imageObj={{
+                src: "/emoji/polyamory_flag.svg",
+                alt: "Polyamory flag",
+              }}
+              innerText="Polyam"
+              url="https://lgbta.wikia.org/wiki/Polyamorous"
+            />
+            <IDButton
+              extraClasses=""
+              imageObj={{
+                src: "/emoji/pansexual_flag.svg",
+                alt: "Pansexual flag",
+              }}
+              innerText="Pansexual"
+              url="https://lgbta.wikia.org/wiki/Pansexual"
+            />
+            <IDButton
+              extraClasses=""
+              imageObj={{
+                src: "/emoji/lesbian_flag.svg",
+                alt: "Lesbian flag",
+              }}
+              innerText="Lesbian"
+              url="https://lgbta.wikia.org/wiki/Lesbian"
+            />
+            <IDButton
+              extraClasses=""
+              imageObj={{
+                src: "/emoji/blue_heart.svg",
+                alt: "Blue heart",
+              }}
+              innerText="Single"
+              url=""
+            />
+            <IDButton
+              extraClasses=""
+              imageObj={{
+                src: "/emoji/neurodiversity.svg",
+                alt: "Neurodiversity symbol",
+              }}
+              innerText="ADHD"
+              url="https://en.wikipedia.org/wiki/Adult_attention_deficit_hyperactivity_disorder"
+            />
+            <IDButton
+              extraClasses="xl:pt-1 xl:align-text-bottom xl:text-sm xl:min-h-full"
+              imageObj={[
+                {
+                  src: "/emoji/fox.svg",
+                  alt: "Fox",
+                },
+                {
+                  src: "/emoji/magic_wand.svg",
+                  alt: "Magic wand",
+                },
+              ]}
+              innerText="Fox witch"
+              url=""
+            />
           </div>
         </div>
-        <div className="rounded-lg container bg-werefox-grey-light dark:bg-werefox-grey">
+        <div className="rounded-lg container ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
           <p className="p-4 text-lg text-center text-werefox-pink-dark dark:text-werefox-pink">
             Somewhere between a hot date and a hot mess. Just a witchy foxxo
             programmer trying to make it in the world tbh.
           </p>
         </div>
-        <div className="rounded-lg container bg-werefox-grey-light dark:bg-werefox-grey">
+        <div className="rounded-lg container ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
           <footer className="p-4">
-            <p className="text-center text-xs text-werefox-grey-dark dark:text-werefox-grey-light">
+            <p className="text-center text-xs text-werefox-grey-darker dark:text-werefox-grey-lighter">
               This site uses{" "}
               <Link href="https://mutant.tech">
                 <a>Mutant Standard emoji</a>
diff --git a/src/info/tailwind.config.js b/src/info/tailwind.config.js
index 7c6115f..f9d96dc 100644
--- a/src/info/tailwind.config.js
+++ b/src/info/tailwind.config.js
@@ -16,10 +16,12 @@ module.exports = {
           dark: "#ff329f",
         },
         "werefox-grey": {
-          lighter: "#EEE",
-          light: "#DBDBDB",
+          lightest: "#EEE",
+          lighter: "#DBDBDB",
+          light: "#CCC",
           DEFAULT: "#424242",
           dark: "#242424",
+          darker: "#121212",
         },
       },
     },