feat(new component): Initial typography (#199)

* feat: typography * feat: typography * feat: typography * Update docs/components/heading.md * Update src/components/Typography/A.vue * Update src/components/Typography/Heading.vue * Update src/components/Typography/Img.vue * Update src/components/Typography/P.vue --------- Co-authored-by: Ilya Artamonov <ilya.sosidka@gmail.com>
2023-09-19 15:13:47 +05:30
parent e3fc36606e
commit 7fd3b4f3a6
31 changed files with 735 additions and 0 deletions
--- a/src/components/Typography/Heading.vue
+++ b/src/components/Typography/Heading.vue
@@ -0,0 +1,28 @@
+<template>
+  <div :class="customSize ? customSize : [textSizes[tag], color, 'w-full']">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+interface HeadingProps {
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  color?: string
+  customSize?: string
+}
+
+withDefaults(defineProps<HeadingProps>(), {
+  tag: 'h1',
+  color: 'text-gray-900 dark:text-white',
+  customSize: '',
+})
+
+const textSizes: Record<string, string> = {
+  h1: 'text-5xl font-extrabold',
+  h2: 'text-4xl font-bold',
+  h3: 'text-3xl font-bold',
+  h4: 'text-2xl font-bold',
+  h5: 'text-xl font-bold',
+  h6: 'text-lg font-bold',
+}
+</script>