28 lines
479 B
Vue
28 lines
479 B
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
|
|
const props = defineProps<{
|
|
quote: string;
|
|
}>();
|
|
|
|
const quoteFontSize = computed(() => {
|
|
const length = props.quote.length;
|
|
|
|
if (length > 140) {
|
|
return '1.75rem';
|
|
}
|
|
|
|
if (length > 100) {
|
|
return '1.95rem';
|
|
}
|
|
|
|
return '2.2rem';
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<section class="card quote-card">
|
|
<p class="quote-card__content" :style="{ fontSize: quoteFontSize }">{{ quote }}</p>
|
|
</section>
|
|
</template>
|