38 lines
1.1 KiB
Vue
38 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { ArrowBigRightDashIcon, DicesIcon } from "@lucide/vue";
|
|
import { generateSlug } from "random-word-slugs";
|
|
import { ref } from "vue";
|
|
|
|
const listNameInput = ref<string>(generateSlug(4));
|
|
|
|
function onRandom() {
|
|
listNameInput.value = generateSlug(4);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-4">
|
|
<div class="mb-4 italic text-xl font-extralight" v-html="$t('home')">
|
|
</div>
|
|
<div class="flex gap-2 mb-4">
|
|
<input
|
|
v-model="listNameInput"
|
|
type="text"
|
|
:placeholder="$t('new_task_hint')"
|
|
class="input grow"
|
|
/>
|
|
<button
|
|
class="btn btn-square"
|
|
@click="onRandom"
|
|
>
|
|
<dices-icon />
|
|
</button>
|
|
</div>
|
|
<div class="w-full px-4">
|
|
<router-link class="btn btn-lg" :to="`/${listNameInput}`">
|
|
<arrow-big-right-dash-icon class="inline" /> {{ $t('home_button') }}
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</template>
|