ptitlutins/ptitlutin/app/components/HomePage.vue
2025-07-19 19:10:28 +02:00

52 lines
1.2 KiB
Vue

<template>
<section class="homepage">
<h2>{{ $t("homepage.title") }}</h2>
<div class="flex col small-gap">
<div class="flex col">
<el-button
:icon="ElIconCalendar"
type="primary"
plain
@click="openCalendarDialog"
>
{{ $t("homepage.connect_to_calendar") }}
</el-button>
</div>
<div class="flex col">
<el-button :icon="ElIconMostlyCloudy" type="primary" plain>
{{ $t("homepage.connect_to_files") }}
</el-button>
</div>
</div>
<el-dialog
v-model="dialogCalendarVisible"
:title="$t('calendar_login_dialog.title')"
width="500"
>
<calendar-connection></calendar-connection>
</el-dialog>
</section>
</template>
<script setup>
const dialogCalendarVisible = ref(false);
function openCalendarDialog() {
dialogCalendarVisible.value = true;
}
function closeCalendarDialog() {
dialogCalendarVisible.value = false;
}
</script>
<style>
.homepage {
max-width: 1000px;
margin: 1rem auto;
border: 1px solid var(--el-border-color);
border-radius: 4px;
padding: 1rem;
box-shadow: var(--el-box-shadow-lighter);
}
</style>