From b6f483071dc7e53ca47161d8bfb15b30c9ed0eab Mon Sep 17 00:00:00 2001
From: Alex Frantz <alex@alexav.gg>
Date: Tue, 21 May 2024 21:09:41 -0400
Subject: [PATCH] simple site

---
 src/assets/main.css           |  13 ++++-
 src/components/SocialItem.tsx |  19 +++++++
 src/index.tsx                 | 104 ++++++++++++++++++++--------------
 tailwind.config.js            |   3 +-
 4 files changed, 95 insertions(+), 44 deletions(-)
 create mode 100644 src/components/SocialItem.tsx

diff --git a/src/assets/main.css b/src/assets/main.css
index bd6213e..1f75884 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -1,3 +1,14 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;
+
+.crayon {
+    padding:0.5rem 0.5rem;
+    margin:0 0.5rem;
+    font-size:1rem;
+
+    border-top-left-radius: 255px 15px;
+    border-top-right-radius: 15px 225px;
+    border-bottom-right-radius: 225px 15px;
+    border-bottom-left-radius:15px 255px;
+}
\ No newline at end of file
diff --git a/src/components/SocialItem.tsx b/src/components/SocialItem.tsx
new file mode 100644
index 0000000..1496ecc
--- /dev/null
+++ b/src/components/SocialItem.tsx
@@ -0,0 +1,19 @@
+type SocialItemType = {
+    urlTo: string,
+    title: string
+}
+
+export default function SocialItem({
+    urlTo,
+    title
+}: SocialItemType) {
+    return (
+        <a 
+            href={urlTo} 
+            target="_blank"
+            className="hover:text-gray-500 hover:underline"
+        >
+            {title}
+        </a>
+    )
+}
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index 79b035e..65da60f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,51 +1,71 @@
-import {
-    Twitter,
-    BlockQuote,
-    Desktop
-} from 'grommet-icons'
+import SocialItem from "./components/SocialItem"
+import { useState, useEffect } from "react"
 
 export default function Home() {
+    const [copied, setCopied] = useState<boolean>(false);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setCopied(false)
+        }, 5000)
+    }, [copied])
+
     return (
-        <div className="flex justify-center items-center flex-col bg-black min-h-screen text-white">
-            <div className="inline-block space-x-2 text-center my-2">
-                <p className="inline hover:cursor-pointer hover:underline hover:text-gray-300">
-                    <a href="https://watch.alexav.gg" target="_blank">
-                        Watchlist
-                    </a>
-                </p>
-                <p className="inline hover:cursor-pointer hover:underline hover:text-gray-300">
-                    <a href="https://nobro.alexav.gg" target="_blank">
-                        NoBro
-                    </a>
-                </p>
-                <p className="inline hover:cursor-pointer hover:underline hover:text-gray-300">
-                    Blog
-                </p>
-                <p className="inline hover:cursor-pointer hover:underline hover:text-gray-300">
-                    Radio
-                </p>
+        <div className="bg-black min-h-screen flex justify-center items-center text-white">
+            <div className="inline-block">
+                <div className="space-x-2 mx-auto my-2 text-center">
+                    <SocialItem 
+                        urlTo="https://nobro.alexav.gg"
+                        title="NoBro" 
+                    />
+                    <SocialItem 
+                        urlTo="https://blog.alexav.gg"
+                        title="Blog" 
+                    />
+                    <SocialItem 
+                        urlTo="#"
+                        title="Radio" 
+                    />
+                </div>
+                <div className="crayon border">
+                    <h1 className="text-2xl font-bold text-center">Alex</h1>
+                </div>
+                <div className="space-x-2 mx-auto my-2 text-center">
+                    <SocialItem 
+                        urlTo="https://twitter.com/avvex__"
+                        title="Twitter" 
+                    />
+                    <SocialItem 
+                        urlTo="https://mast.thatalex.dev"
+                        title="Mastodon" 
+                    />
+                    <SocialItem 
+                        urlTo="https://medal.tv/u/alexav"
+                        title="Medal"
+                    />
+                </div>
             </div>
 
-            <div className="max-w-fit">
-                <h1 className="text-5xl font-bold">Alex's<br />Website</h1>
-            </div>
+            <div className="bottom-0 absolute my-6 text-zinc-700 font-bold">
+                {/* <button type="button" onClick={() => setCopied(true)} className="hover:underline">
+                    {
+                        copied ? "Copied!"
+                        : "alex@alexav.gg"
+                    }
+                </button> */}
+
+                {
+                    copied ? (
+                        <button type="button" className="underline">
+                            Copied!
+                        </button>
+                    ) : (
+                        <button type="button" onClick={() => setCopied(true)} className="hover:underline">
+                            alex@alexav.gg
+                        </button>
+                    )
+                }
 
-            <div className="inline-block space-x-2 text-center my-2">
-                <p className="inline hover:cursor-pointer hover:underline hover:text-gray-300">
-                    <a href="https://twitter.com/avvex__" target="_blank">
-                        <Twitter size="small" /> Twitter
-                    </a>
-                </p>
-                <p className="inline hover:cursor-pointer hover:underline hover:text-gray-300">
-                    <a href="https://mast.thatalex.dev" target="_blank">
-                        <BlockQuote size="small" /> Mastodon
-                    </a>
-                </p>
-                <p className="inline hover:cursor-pointer hover:underline hover:text-gray-300">
-                    <a href="https://medal.tv/u/alexav" target="_blank">
-                        <Desktop size="small" /> Medal
-                    </a>
-                </p>
             </div>
         </div>
     )
diff --git a/tailwind.config.js b/tailwind.config.js
index 5513b1c..f213ffa 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,7 +5,8 @@ export default {
     "./src/**/*.{js,ts,tsx,jsx}"
   ],
   theme: {
-    extend: {},
+    extend: {
+    },
   },
   plugins: [],
 }