migrate on nuxt3

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>