merged lyxui into dashboard

dashboard/components/LyxUi/Button.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+
+export type ButtonType = 'primary' | 'secondary' | 'outline' | 'outlined' | 'danger';
+
+const props = defineProps<{ type: ButtonType, link?: string, target?: string, disabled?: boolean }>();
+
+</script>
+
+<template>
+    <NuxtLink tag="div" :to="disabled ? '' : link" :target="target"
+        class="poppins w-fit cursor-pointer px-4 py-1 rounded-md outline outline-[1px] text-text" :class="{
+            'bg-lyx-primary-dark outline-lyx-primary hover:bg-lyx-primary-hover': type === 'primary',
+            'bg-lyx-widget-lighter outline-lyx-widget-lighter hover:bg-lyx-widget-light': type === 'secondary',
+            'bg-lyx-transparent outline-lyx-widget-lighter hover:bg-lyx-widget-light': (type === 'outline' || type === 'outlined'),
+            'bg-lyx-danger-dark outline-lyx-danger hover:bg-lyx-danger': type === 'danger',
+            '!bg-lyx-widget !outline-lyx-widget-lighter !cursor-not-allowed': disabled === true,
+        }">
+        <slot></slot>
+    </NuxtLink>
+</template>

dashboard/components/LyxUi/Card.vue

@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+
+
+</script>
+
+<template>
+    <div class="w-fit h-fit rounded-md bg-lyx-widget p-4 outline outline-[1px] outline-lyx-background-lighter">
+        <slot></slot>
+    </div>
+</template>

dashboard/components/LyxUi/Icon.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+
+const props = defineProps<{ icon: string }>();
+
+</script>
+
+<template>
+    <span class="material-symbols-outlined">
+        {{ props.icon }}
+    </span>
+</template>

dashboard/components/LyxUi/Input.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+
+
+const props = defineProps<{ placeholder?: string, modelValue: string, type?: string }>();
+
+const emits = defineEmits<{
+    (e: "update:modelValue", value: string): void
+}>();
+
+
+const handleChange = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    emits('update:modelValue', target.value);
+};
+
+
+//TODO: FUNCTIONALITY + PLACEHOLDER DARK
+</script>
+
+<template>
+    <input
+        class="bg-lyx-widget-light text-lyx-text-dark poppins rounded-md outline outline-[1px] outline-lyx-widget-lighter"
+        :type="props.type ?? 'text'" :placeholder="props.placeholder" :value="props.modelValue" @input="handleChange">
+</template>