<script>
import CodeServer from 'Svg/apps/code.vue'
import Deluge from 'Svg/apps/deluge.vue'
import Drone from 'Svg/apps/drone.vue'
import Gitea from 'Svg/apps/gitea.vue'
import Jellyfin from 'Svg/apps/jellyfin.vue'
import Nextcloud from 'Svg/apps/nextcloud.vue'
import Penpot from 'Svg/apps/penpot.vue'
import Plausible from 'Svg/apps/plausible.vue'
import Rss from 'Svg/apps/rss.vue'
import Hoppscotch from 'Svg/apps/hoppscotch.vue'
import Radio from 'Svg/apps/radio.vue'

export default {
  components: {
    CodeServer,
    Deluge,
    Drone,
    Gitea,
    Jellyfin,
    Nextcloud,
    Penpot,
    Plausible,
    Rss,
    Hoppscotch,
    Radio,
  },
  data: () => ({
    apps: [
      'Deluge',
      'Drone',
      'Gitea',
      'Jellyfin',
      'Nextcloud',
      'Penpot',
      'Plausible',
      'Rss',
      'hoppscotch',
      'radio',
    ],
  }),
}
</script>

<template>
  <section>
    <h2 class="title">Pre-configured applications</h2>
    <ul class="flex justify-center p-4 m-4 max-w-full flex-wrap">
      <li v-for="app in apps" :key="app" class="m-4">
        <a
          :href="
            'https://github.com/valerebron/pegaz/tree/master/services/' +
            app.toLowerCase()
          "
          :title="app"
        >
          <component :is="app" class="app" />
        </a>
      </li>
    </ul>
  </section>
</template>
