From 985cb17f84f8d1665420e6ea0f0674672e122a58 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Wed, 11 Dec 2024 20:20:03 +0330
Subject: [PATCH] Create button component

---
 frontend/components/Button.vue | 44 ++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 frontend/components/Button.vue

diff --git a/frontend/components/Button.vue b/frontend/components/Button.vue
new file mode 100644
index 0000000..e3f37f0
--- /dev/null
+++ b/frontend/components/Button.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+
+// types
+type Props = {
+    variant?: "solid" | "secondary" | "outlined" | "ghost"
+    size?: "xl" | "lg" | "md",
+    startIcon?: string;
+    endIcon?: string;
+}
+
+// props
+const props = withDefaults(defineProps<Props>(), {
+    variant: "solid",
+    size: "lg"
+});
+const { variant, size } = toRefs(props);
+
+// computed
+const classes = computed(() => {
+    return [
+        "rounded-full flex items-center justify-center transition-all cursor-pointer",
+        {
+            "btn-solid": variant.value === "solid",
+            "btn-secondary": variant.value === "secondary",
+            "btn-outlined": variant.value === "outlined",
+            "btn-ghost": variant.value === "ghost"
+        },
+        {
+            "btn-xl": size.value === "xl",
+            "btn-lg": size.value === "lg",
+            "btn-md": size.value === "md"
+        }
+    ];
+});
+
+</script>
+
+<template>
+    <button :class="classes">
+        <Icon v-if="startIcon" :name="startIcon" class="ms-0" />
+        <slot />
+        <Icon v-if="endIcon" :name="endIcon" class="me-0" />
+    </button>
+</template>
\ No newline at end of file