Something went wrong. Try again.
Something went wrong. Try again.
1.7 kB · 81 lines
Vue
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182<template> <div class="interval-input"> <div class="button-container minus"> <transition name="fade" mode="out-in"> <button v-if="editable" key="minus-button" class="spacer" @click="minus" > <img src="@/assets/minus.svg" alt="minus" /> </button> <div v-else key="minus-spacer" class="spacer"></div> </transition> </div> <h3 v-if="isMinuteSession"> {{ $t('interval.minuteSession', { interval }, interval) }} </h3> <h3 v-else>{{ $t('interval.secondSession') }}</h3> <div class="button-container plus"> <transition name="fade" mode="out-in"> <button v-if="editable" key="plus-button" class="spacer" @click="plus"> <img src="@/assets/plus.svg" alt="plus" /> </button> <div v-else key="plus-spacer" class="spacer"></div> </transition> </div> </div></template>
<script setup lang="ts">import { useInterval } from '@/hooks/useInterval'
defineProps<{ editable: boolean}>()
const { interval, isMinuteSession, minus, plus } = useInterval()</script>
<style lang="scss" scoped>$button-size: 50px;
.interval-input { margin: 0 auto; display: flex; justify-content: center; align-items: center; width: 100%;
h3 { flex: 2; line-height: 2rem; }
.button-container { flex: 1; display: flex;
&.minus { justify-content: flex-end; } &.plus { justify-content: flex-start; } }
button { display: flex; justify-content: center; align-items: center; font-size: 2rem; }
.spacer { width: $button-size; height: $button-size; margin: 0 1rem; }}</style>