43 lines
1.2 KiB
Vue
43 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { shallowRef } from 'vue';
|
|
import { FolderIcon,BriefcaseIcon,BeachIcon } from 'vue-tabler-icons';
|
|
const props = defineProps(['icon']);
|
|
const folders = shallowRef([
|
|
{
|
|
subtitle: 'Jan 9, 2022',
|
|
title: 'Photos',
|
|
icon:FolderIcon,
|
|
},
|
|
{
|
|
subtitle: 'Jan 17, 2022',
|
|
title: 'Works',
|
|
icon:BriefcaseIcon
|
|
},
|
|
{
|
|
subtitle: 'Jan 18, 2022',
|
|
title: 'Vacation',
|
|
icon:BeachIcon
|
|
}
|
|
]);
|
|
</script>
|
|
<template>
|
|
<v-list lines="two">
|
|
<v-card variant="outlined">
|
|
<v-list-item v-for="folder in folders" :key="folder.title" :subtitle="folder.subtitle">
|
|
<template v-slot:prepend>
|
|
<v-avatar color="grey400">
|
|
<component :is="folder.icon" size="20" stroke-width="1.5" />
|
|
</v-avatar>
|
|
</template>
|
|
|
|
<template v-slot:title>
|
|
<h5 class="text-subtitle-1">{{ folder.title }}</h5>
|
|
</template>
|
|
<template v-slot:subtitle>
|
|
<span class="text-subtitle-2">{{ folder.subtitle }}</span>
|
|
</template>
|
|
</v-list-item>
|
|
</v-card>
|
|
</v-list>
|
|
</template>
|