refactor(ui): getting ride of naive ui buttons

1 files changed, 49 insertions, 0 deletions

diff --git a/src/ui/c-link/c-link.vue b/src/ui/c-link/c-link.vue
new file mode 100644
index 0000000..df10120
--- /dev/null
+++ b/src/ui/c-link/c-link.vue
@@ -0,0 +1,49 @@
+<template>
+  <component :is="tag" :href="href ?? to" class="c-link" :to="to">
+    <slot />
+  </component>
+</template>
+
+<script lang="ts" setup>
+import { RouterLink, type RouteLocationRaw } from 'vue-router';
+import { useTheme } from './c-link.theme';
+
+const props = defineProps<{
+  href?: string;
+  to?: RouteLocationRaw;
+}>();
+
+const { href, to } = toRefs(props);
+
+const theme = useTheme();
+const tag = computed(() => (href?.value ? 'a' : RouterLink));
+</script>
+
+<style lang="less" scoped>
+.c-link {
+  line-height: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  border: none;
+  cursor: pointer;
+  text-decoration: none;
+  font-weight: 400;
+  color: v-bind('theme.default.textColor');
+  border-radius: 4px;
+  transition: color cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
+
+  outline-offset: 1px;
+
+  &:hover {
+    color: v-bind('theme.default.hover.textColor');
+  }
+
+  &:active {
+    color: v-bind('theme.default.textColor');
+  }
+
+  &:focus {
+    color: v-bind('theme.default.outline.color');
+  }
+}
+</style>