migrate on nuxt3

components/Typography/UiHeading.vue

@@ -0,0 +1,48 @@
+<template>
+  <component
+    :is="tag"
+    class="font-semibold"
+    :class="[
+      {
+        'text-3xl md:text-4xl lg:text-5xl 2xl:text-6xl': size === '600',
+      }, // H1
+      {
+        'text-3xl md:text-4xl 2xl:text-5xl': size === '500',
+      }, // H2
+      {
+        'text-2xl md:text-3xl 2xl:text-4xl': size === '400',
+      }, // H3
+      {
+        'text-xl lg:text-2xl 2xl:text-3xl': size === '300',
+      }, // H4
+      {
+        'text-lg md:text-xl': size === '200',
+      }, // H5
+    ]"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { toRefs } from 'vue'
+
+const props = defineProps({
+  /**
+   * Tag name: h1 to h6
+   */
+  tag: {
+    type: String,
+    default: 'h2',
+  },
+  /**
+   * Heading size: '600' (largest) to '200' (smallest)
+   */
+  size: {
+    type: String,
+    default: '500',
+  },
+})
+
+const { size, tag } = toRefs(props)
+</script>

components/Typography/UiParagraph.vue

@@ -0,0 +1,48 @@
+<template>
+  <component
+    :is="as"
+    class="text-primary"
+    :class="[
+      {
+        'text-2xl lg:text-3xl 2xl:text-4xl': size === '600',
+      }, // 24px
+      {
+        'text-xl lg:text-2xl 2xl:text-3xl': size === '500',
+      }, // 20px
+      {
+        'text-lg lg:text-xl 2xl:text-2xl': size === '400',
+      }, // 18px
+      {
+        'text-lg lg:text-[20px]': size === '300',
+      }, // 16px
+      {
+        'text-[15px]': size === '250',
+      }, // 15px
+      {
+        'text-[13px]': size === '200',
+      }, // 14px
+    ]"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { toRefs } from 'vue'
+
+const props = defineProps({
+  as: {
+    type: String,
+    default: 'p',
+  },
+  /**
+   * Tailwind text size from 600 to 200
+   */
+  size: {
+    type: String,
+    default: '300',
+  },
+})
+
+const { size, as } = toRefs(props)
+</script>

components/UiButton/UiButton.params.ts

@@ -0,0 +1,13 @@
+export const colorVariants = {
+  primary: ['bg-accent-50', 'text-primary', 'hover:bg-accent-100', 'active:bg-accent-150'],
+  secondary: [
+    'bg-transparent',
+    'text-primary',
+    'hover:bg-accent-50',
+    'border-accent-50',
+    'border',
+    'hover:bg-accent-100',
+    'active:bg-accent-150',
+    'cursor-pointer',
+  ],
+}

components/UiButton/UiButton.vue

@@ -0,0 +1,45 @@
+<template>
+  <component
+    :is="tag"
+    class="px-14 py-4 rounded-[20px] text-[30px] cursor-pointer shadow-[0px_16px_50px_-16px_rgba(229,30,125,1)]"
+    :class="[baseStyle, size]"
+    data-ui="ui-button"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+import { toRefs, computed } from 'vue'
+import { colorVariants } from './UiButton.params.js'
+
+const props = defineProps({
+  tag: {
+    type: String,
+    default: 'button',
+  },
+  variants: {
+    type: String as () => 'primary' | 'secondary',
+    default: 'primary',
+    validator: (value) => {
+      return ['primary', 'secondary'].includes(value as string)
+    },
+  },
+  size: {
+    type: String,
+    default: 'font-bold',
+  },
+})
+
+const { tag, variants, size } = toRefs(props)
+
+const colorClasses: Record<'primary' | 'secondary', string[]> = {
+  primary: colorVariants.primary,
+  secondary: colorVariants.secondary,
+}
+
+const baseStyle = computed(() => {
+  const variant = variants.value as 'primary' | 'secondary'
+  return colorClasses[variant]?.join(' ') || ''
+})
+</script>

components/UiNav/UiNav.vue

@@ -0,0 +1,31 @@
+<template>
+  <UiParagraph
+    class="cursor-pointer"
+    as="span"
+    size="250"
+    v-for="({ path, name, target }, index) in navContent"
+    :key="index"
+    data-ui="ui-nav"
+  >
+    <component
+      data-ui="ui-nav-btn"
+      :is="target ? 'a' : 'RouterLink'"
+      :to="path"
+      :href="path"
+      :target="target"
+      >{{ name }}</component
+    >
+  </UiParagraph>
+</template>
+<script setup lang="ts">
+import UiParagraph from '../Typography/UiParagraph.vue'
+
+interface NavContent {
+  name: string
+  path: string
+  target?: string
+}
+const { navContent = undefined } = defineProps<{
+  navContent: NavContent[] | undefined
+}>()
+</script>