Implement basic Contact page

package.json

@@ -13,6 +13,7 @@
     "@kodingdotninja/use-tailwind-breakpoint": "^0.0.5",
     "@tailwindcss/typography": "^0.5.8",
     "@tanstack/react-query": "^4.16.0",
+    "@tippyjs/react": "^4.2.6",
     "@trpc/client": "^10.0.0",
     "@trpc/next": "^10.0.0",
     "@trpc/react-query": "^10.0.0",

src/pages/contact.tsx

@@ -1,10 +1,45 @@
 import {type NextPage} from "next";
 import AppWrapper from "../components/AppWrapper";
-import WorkInProgress from "../components/WorkInProgress";
+import {BsDiscord, BsGithub} from "react-icons/bs";
+import {AiFillMail} from "react-icons/ai";
+import Link from "next/link";
+import {IconType} from "react-icons";
+import Tippy from "@tippyjs/react";
+import 'tippy.js/dist/tippy.css';
+
+const socials: { icon: IconType, href?: string, hint?: string, hideHint?: boolean }[] = [
+    {
+        icon: BsGithub,
+        href: "https://github.com/Xevion/"
+    },
+    {
+        icon: AiFillMail,
+        href: "mailto:xevion@xevion.dev",
+        hint: "xevion@xevion.dev"
+    },
+    {
+        icon: BsDiscord,
+        hint: "Xevion#8506"
+    }
+]
 
 const ContactPage: NextPage = () => {
     return <AppWrapper current='contact'>
-        <WorkInProgress/>
+        <div className="w-full my-10 flex flex-col items-center">
+            <div
+                className="bg-zinc-800 border border-zinc-700 rounded-md max-w-[23rem] sm:max-w-[25rem] lg:max-w-[30rem] mx-3 w-full p-5 flex flex-col">
+                <div className="flex justify-center gap-x-5 text-center">
+                    {socials.map(({icon: Icon, href, hint, hideHint}, index) => {
+                        const inner = <Icon className="w-8 h-8"/>;
+                        return <Tippy key={index} disabled={hideHint} content={hint ?? href}>
+                            {
+                                href != undefined ? <Link href={href}>{inner}</Link> : <span>{inner}</span>
+                            }
+                        </Tippy>
+                    })}
+                </div>
+            </div>
+        </div>
     </AppWrapper>
 }
 

yarn.lock

@@ -161,6 +161,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@popperjs/core@^2.9.0":
+  version "2.11.6"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.6.tgz#cee20bd55e68a1720bdab363ecf0c821ded4cd45"
+  integrity sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==
+
 "@rushstack/eslint-patch@^1.1.3":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz#8be36a1f66f3265389e90b5f9c9962146758f728"
@@ -196,6 +201,13 @@
     "@tanstack/query-core" "4.20.2"
     use-sync-external-store "^1.2.0"
 
+"@tippyjs/react@^4.2.6":
+  version "4.2.6"
+  resolved "https://registry.yarnpkg.com/@tippyjs/react/-/react-4.2.6.tgz#971677a599bf663f20bb1c60a62b9555b749cc71"
+  integrity sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==
+  dependencies:
+    tippy.js "^6.3.1"
+
 "@trpc/client@^10.0.0":
   version "10.5.0"
   resolved "https://registry.yarnpkg.com/@trpc/client/-/client-10.5.0.tgz#7e68348aae3dbe02086d0f19d435927fdaea36f3"
@@ -2854,6 +2866,13 @@ text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
+tippy.js@^6.3.1:
+  version "6.3.7"
+  resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"
+  integrity sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==
+  dependencies:
+    "@popperjs/core" "^2.9.0"
+
 to-regex-range@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"