<script setup lang="ts">
import Logo from '@/icons/Logo.vue';

const downloads = [
  { name: 'Linux', link: './dist/covergen.linux-amd64' },
  { name: 'Darwin', link: './dist/covergen.darwin-amd64' },
];
</script>

<template>
  <div class="w-full mx-auto px-8">
    <div class="relative flex items-center justify-between h-16">
      <div class="flex-1 flex items-stretch justify-between">
        <div class="flex-shrink-0 flex items-center">
          <Logo class="h-12" />
          <h1>CoverGen</h1>
        </div>

        <div class="ml-6">
          <div class="flex space-x-4 items-center text-sm font-medium h-full">
            <span class="text-base"> Download me: </span>
            <a
              v-for="dl in downloads"
              :key="dl.link"
              :href="dl.link"
              class="text-gray-800 hover:bg-gray-300 px-3 py-2 rounded-md"
              >{{ dl.name }}</a
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>