<script setup lang="ts">
defineProps<{
  name: string,
  route: string
}>()
</script>
<template>
  <div class="app-list-item">
    <h3>
      <RouterLink :to="route">{{ name }}</RouterLink>
    </h3>
    <p>
      <slot></slot>
    </p>
  </div>
</template>
<style scoped>
.app-list-item {
  padding: 1em;
  background-color: rgb(49, 49, 49);
  border-radius: 20px;
}

.app-list-item>h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: x-large;
}

.app-list-item>h3>a {
  text-decoration: none;
  color: inherit;
}

.app-list-item>h3>a:hover {
  text-decoration: underline;
  color: lightgray;
}
</style>
