feat(components): item

This commit is contained in:
OLIMINATOR 2023-01-06 21:40:10 +01:00
parent 581178d9d8
commit 6ed14ce47c
3 changed files with 36 additions and 7 deletions

View file

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

View file

@ -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',
background: 'twitch',
name: 'GitHub',
background: 'bg-github hover:bg-github/80',
href: '/',
},
{
name: 'Instagram',
background: 'twitch',
name: 'Discord',
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: '/',
},
];

View file

@ -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 />