link chips

components/Icon.tsx

@@ -1,6 +1,9 @@
 enum IconSet {
 	Menu,
 	Twitter,
+	GitHub,
+	YouTube,
+	MessageSquare,
 }
 
 type iconprops = {
@@ -35,7 +38,6 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
 					<line x1="3" y1="18" x2="21" y2="18" />
 				</svg>
 			);
-			break;
 		case IconSet.Twitter:
 			return (
 				<svg
@@ -54,7 +56,61 @@ const Icon = ({ icon, width, height, ...props }: iconprops) => {
 					<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
 				</svg>
 			);
-			break;
+		case IconSet.GitHub:
+			return (
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width={width || 24}
+					height={height || 24}
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					className="feather feather-github"
+					{...props}
+				>
+					<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
+				</svg>
+			);
+		case IconSet.YouTube:
+			return (
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width={width || 24}
+					height={height || 24}
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					className="feather feather-youtube"
+					{...props}
+				>
+					<path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z" />
+					<polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02" />
+				</svg>
+			);
+		case IconSet.MessageSquare:
+			return (
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width={width || 24}
+					height={height || 24}
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+					className="feather feather-message-square"
+					{...props}
+				>
+					<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+				</svg>
+			);
 	}
 };
 

pages/index.tsx

@@ -1,8 +1,9 @@
 import styles from "../styles/Index.module.scss";
-
 import { useEffect, useState } from "react";
 import { SEO } from "../components/SEO";
+import { Icon, IconSet } from "../components/Icon";
 import splashes from "../data/splashes.json";
+import Link from "next/link";
 
 const PageIndex = () => {
 	const [splash, setSplash] = useState("");
@@ -49,6 +50,20 @@ const PageIndex = () => {
 					</article>
 				</main>
 			</div>
+			<main className={styles.chips}>
+				<Link href="/discord" className={styles.chip}>
+					discord <Icon icon={IconSet.MessageSquare} />
+				</Link>
+				<Link href="/youtube" className={styles.chip}>
+					youtube <Icon icon={IconSet.YouTube} />
+				</Link>
+				<Link href="/twitter" className={styles.chip}>
+					twitter <Icon icon={IconSet.Twitter} />
+				</Link>
+				<Link href="/github" className={styles.chip}>
+					github <Icon icon={IconSet.GitHub} />
+				</Link>
+			</main>
 		</>
 	);
 };

styles/Index.module.scss

@@ -92,3 +92,38 @@
 		}
 	}
 }
+.chips {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	flex-wrap: wrap;
+	gap: 1rem;
+}
+.chip {
+	display: inline-flex;
+	text-decoration: none;
+	gap: 0.5rem;
+	align-items: center;
+	color: inherit;
+	padding: 6px 8px;
+	border: 1px solid var(--grey);
+	border-radius: 8px;
+	transition-duration: 100ms;
+	text-rendering: geometricPrecision;
+	// font-family: var(--fonts-bold);
+	// color: var(--grey);
+	svg {
+		color: var(--grey);
+	}
+	&:hover,
+	&:focus {
+		outline: none;
+		background: var(--black1);
+		border: 1px solid var(--black1);
+		box-shadow: var(--shadow0);
+		transform: scale(1.1);
+		svg {
+			color: var(--color);
+		}
+	}
+}

styles/globals.scss

@@ -8,6 +8,7 @@
 	--grey: #444;
 	--accent: #61f2ea;
 	--shadow0: 0 0 1rem rgba(0, 0, 0, 0.35);
+	--shadow1: 0 0 8px var(--grey);
 	--fonts-norm: "Quicksand", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
 		Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 	--fonts-bold: "Lexend", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,