feat(components): item

src/components/Item.astro

@@ -0,0 +1,14 @@
+---
+import { BUTTONS } from '../config';
+---
+
+{
+	BUTTONS.map((button) => (
+		<a
+			href={button.href}
+			class={`${button.background} w-full rounded-xl border-2 border-black py-4 text-center text-xl font-bold text-white drop-shadow-[4px_5px_0_rgba(0,0,0,1)] duration-75 hover:translate-y-1 hover:translate-x-1 hover:drop-shadow-none`}
+		>
+			{button.name}
+		</a>
+	))
+}

src/config.ts

@@ -16,22 +16,37 @@ export const OPEN_GRAPH = {
 export const BUTTONS = [
 	{
 		name: 'YouTube',
-		background: 'youtube',
+		background: 'bg-youtube hover:bg-youtube/80',
 		href: '/',
 	},
 	{
 		name: 'Instagram',
-		background: 'twitch',
+		background: 'bg-instagram hover:bg-instagram/80',
 		href: '/',
 	},
 	{
-		name: 'Instagram',
+		name: 'GitHub',
-		background: 'twitch',
+		background: 'bg-github hover:bg-github/80',
 		href: '/',
 	},
 	{
-		name: 'Instagram',
+		name: 'Discord',
-		background: 'twitch',
+		background: 'bg-discord hover:bg-discord/80',
+		href: '/',
+	},
+	{
+		name: 'Tiwtch',
+		background: 'bg-twitch hover:bg-twitch/80',
+		href: '/',
+	},
+	{
+		name: 'Spotify',
+		background: 'bg-spotify hover:bg-spotify/80',
+		href: '/',
+	},
+	{
+		name: 'Twitter',
+		background: 'bg-twitter hover:bg-twitter/80',
 		href: '/',
 	},
 ];

src/pages/index.astro

@@ -6,7 +6,7 @@ import Item from '../components/Item.astro';
 ---
 
 <Layout>
-	<main class="mx-auto w-max">
+	<main class="mx-auto w-max mb-12">
 		<header class="mt-12 flex flex-col items-center">
 			<Picture />
 			<Username />