<script>
export default {
  data: () => ({
    apps: [
      {
        name: 'Deluge',
        component: resolveComponent('SvgDeluge')
      },
      {
        name: 'Drone',
        component: resolveComponent('SvgDrone')
      },
      {
        name: 'Gitea',
        component: resolveComponent('SvgGitea')
      },
      {
        name: 'Hoppscotch',
        component: resolveComponent('SvgHoppscotch')
      },
      {
        name: 'Jellyfin',
        component: resolveComponent('SvgJellyfin')
      },
      {
        name: 'Nextcloud',
        component: resolveComponent('SvgNextcloud')
      },
      {
        name: 'Plausible',
        component: resolveComponent('SvgPlausible')
      },
      {
        name: 'Penpot',
        component: resolveComponent('SvgPenpot')
      },
      {
        name: 'Radio',
        component: resolveComponent('SvgRadio')
      }
    ]
  })
}
</script>

<template>
  <section class="bg-slate-300 p-8 bg-gradient-to-r from-violet-100 to-indigo-100 rounded-t-xl">
    <h2 class="title">
      Pre-configured applications
    </h2>
    <ul class="flex justify-center p-2 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.name.toLowerCase()
          "
          :title="app.name"
        >
          <component :is="app.component" class="app hover:scale-110" />
        </a>
      </li>
    </ul>
  </section>
</template>
