drop/components/UserFooter.vue

<template>
    <footer class="bg-zinc-950" aria-labelledby="footer-heading">
        <h2 id="footer-heading" class="sr-only">Footer</h2>
        <div class="mx-auto max-w-7xl px-6 py-16 sm:py-24 lg:px-8 ">
            <div class="xl:grid xl:grid-cols-3 xl:gap-8">
                <div class="space-y-8">
                    <Wordmark class="h-10" />
                    <p class="text-sm leading-6 text-zinc-300">An open-source game distribution platform built for
                        speed, flexibility and beauty.</p>
                    <div class="flex space-x-6">
                        <a v-for="item in navigation.social" :key="item.name" :href="item.href" target="_blank"
                            class="text-zinc-500 hover:text-zinc-400">
                            <span class="sr-only">{{ item.name }}</span>
                            <component :is="item.icon" class="h-6 w-6" aria-hidden="true" />
                        </a>
                    </div>
                </div>
                <div class="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
                    <div class="md:grid md:grid-cols-2 md:gap-8">
                        <div>
                            <h3 class="text-sm font-semibold leading-6 text-white">Games</h3>
                            <ul role="list" class="mt-6 space-y-4">
                                <li v-for="item in navigation.games" :key="item.name">
                                    <a :href="item.href" class="text-sm leading-6 text-zinc-300 hover:text-white">{{
                                        item.name }}</a>
                                </li>
                            </ul>
                        </div>
                        <div class="mt-10 md:mt-0">
                            <h3 class="text-sm font-semibold leading-6 text-white">Community</h3>
                            <ul role="list" class="mt-6 space-y-4">
                                <li v-for="item in navigation.community" :key="item.name">
                                    <a :href="item.href" class="text-sm leading-6 text-zinc-300 hover:text-white">{{
                                        item.name }}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="md:grid md:grid-cols-2 md:gap-8">
                        <div>
                            <h3 class="text-sm font-semibold leading-6 text-white">Documentation</h3>
                            <ul role="list" class="mt-6 space-y-4">
                                <li v-for="item in navigation.documentation" :key="item.name">
                                    <a :href="item.href" class="text-sm leading-6 text-zinc-300 hover:text-white">{{
                                        item.name }}</a>
                                </li>
                            </ul>
                        </div>
                        <div class="mt-10 md:mt-0">
                            <h3 class="text-sm font-semibold leading-6 text-white">About</h3>
                            <ul role="list" class="mt-6 space-y-4">
                                <li v-for="item in navigation.about" :key="item.name">
                                    <a :href="item.href" class="text-sm leading-6 text-zinc-300 hover:text-white">{{
                                        item.name }}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</template>

<script setup lang="ts">
import GithubLogo from './GithubLogo.vue';
import DiscordLogo from './DiscordLogo.vue';

const navigation = {
    games: [
        { name: 'Newly Added', href: '#' },
        { name: 'New Releases', href: '#' },
        { name: 'Top Sellers', href: '#' },
        { name: 'Find a Game', href: '#' },
    ],
    community: [
        { name: 'Friends', href: '#' },
        { name: 'Groups', href: '#' },
        { name: 'Servers', href: '#' },
    ],
    documentation: [
        { name: 'API', href: '#' },
        { name: 'Server Docs', href: '#' },
        { name: 'Client Docs', href: '#' },
    ],
    about: [
        { name: 'About Drop', href: '#' },
        { name: 'Features', href: '#' },
        { name: 'FAQ', href: '#' },
    ],
    social: [
        {
            name: 'GitHub',
            href: 'https://github.com/Drop-OSS',
            icon: GithubLogo,
        },
        {
            name: "Discord",
            href: "https://discord.gg/NHx46XKJWA",
            icon: DiscordLogo
        }
    ],
}
</script>