<template>
	<section class="focus-card">
		<VindiTitle icon="mdi mdi-check-circle-outline">
			{{ $t('HOMEPAGE_SECTION_FOCUS') }}
		</VindiTitle>
		<div class="focus-card__content">
			<!-- TODO Focus task -->
		</div>
	</section>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
	name: "FocusTasks",
});
</script>

<style lang="scss">
.focus-card {
	&__content {
		@include rounded('2xl');
		@include margin(2, t);
		@include padding(4);

		height: 9rem;
		background-color: var(--color-shade-2);
	}
}
</style>