<template>
    <div class="article-list">
        <article
            class="article"
            v-for="item in list"
            :key="item.id"
        >
            <header class="header">
				<h4 class="title" >
					<router-link class="link black" :to="`/aid${item.id}.html`">
						<span v-text="item.title"></span>
					</router-link>
				</h4>
            </header>
            <section class="digest gray" v-text="item.digest"></section>
        </article>
    </div>
</template>

<script lang="ts" setup>
import { Article } from "@/types/Article";

const props = withDefaults(defineProps<{
	list: Article<any>[]
}>(), {
	list: () => []
});
const { list } = toRefs(props);
</script>

<style lang="less" scoped>
.article-list {
	padding: 1rem;

	.article {
		margin-bottom: 1rem;

		&:hover {
			background: #EEE;
		}

		.header {

			.title {
				margin: 0;
				padding: .25rem 1rem;
				border-left: 3px solid var(--td-brand-color);
			}
		}

		.digest {
			height: 3rem;
			font-size: 13px;
			margin-top: .25rem;
			padding-left: calc(1rem + 3px);
		}
	}
}
</style>
