first commit

calendar/src/components/QuoteCard.vue

@@ -0,0 +1,27 @@
+<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>