teacher-tools/app/src/components/AppListItem.vue

40 lines
608 B
Vue

<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>