simple site

src/assets/main.css

@@ -1,3 +1,14 @@
 @tailwind base;
 @tailwind components;
 @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;
+}

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>
+    )
+}

src/index.tsx

@@ -1,51 +1,71 @@
-import {
+import SocialItem from "./components/SocialItem"
-    Twitter,
+import { useState, useEffect } from "react"
-    BlockQuote,
-    Desktop
-} from 'grommet-icons'
 
 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="bg-black min-h-screen flex justify-center items-center text-white">
-            <div className="inline-block space-x-2 text-center my-2">
+            <div className="inline-block">
-                <p className="inline hover:cursor-pointer hover:underline hover:text-gray-300">
+                <div className="space-x-2 mx-auto my-2 text-center">
-                    <a href="https://watch.alexav.gg" target="_blank">
+                    <SocialItem 
-                        Watchlist
+                        urlTo="https://nobro.alexav.gg"
-                    </a>
+                        title="NoBro" 
-                </p>
+                    />
-                <p className="inline hover:cursor-pointer hover:underline hover:text-gray-300">
+                    <SocialItem 
-                    <a href="https://nobro.alexav.gg" target="_blank">
+                        urlTo="https://blog.alexav.gg"
-                        NoBro
+                        title="Blog" 
-                    </a>
+                    />
-                </p>
+                    <SocialItem 
-                <p className="inline hover:cursor-pointer hover:underline hover:text-gray-300">
+                        urlTo="#"
-                    Blog
+                        title="Radio" 
-                </p>
+                    />
-                <p className="inline hover:cursor-pointer hover:underline hover:text-gray-300">
+                </div>
-                    Radio
+                <div className="crayon border">
-                </p>
+                    <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">
+            <div className="bottom-0 absolute my-6 text-zinc-700 font-bold">
-                <h1 className="text-5xl font-bold">Alex's<br />Website</h1>
+                {/* <button type="button" onClick={() => setCopied(true)} className="hover:underline">
-            </div>
+                    {
+                        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>
     )

tailwind.config.js

@@ -5,7 +5,8 @@ export default {
     "./src/**/*.{js,ts,tsx,jsx}"
   ],
   theme: {
-    extend: {},
+    extend: {
+    },
   },
   plugins: [],
 }