From 0d6f2593530eb373d5d408b0fe6da30ca26ac96c Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Wed, 28 Aug 2024 15:53:33 +0700
Subject: [PATCH] refactor: add closeButton

---
 src/components/button/CloseButton.vue | 26 ++++++++++++++++++++++++++
 src/components/button/index.ts        |  1 +
 2 files changed, 27 insertions(+)
 create mode 100644 src/components/button/CloseButton.vue

diff --git a/src/components/button/CloseButton.vue b/src/components/button/CloseButton.vue
new file mode 100644
index 00000000..bd44ca50
--- /dev/null
+++ b/src/components/button/CloseButton.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import MainButton from './MainButton.vue';
+
+defineEmits<{
+  (e: 'click', v: MouseEvent): void;
+}>();
+defineProps<{
+  iconOnly?: boolean;
+  solid?: boolean;
+  outlined?: boolean;
+  disabled?: boolean;
+  dark?: boolean;
+}>();
+</script>
+
+<template>
+  <MainButton
+    @click="(e) => $emit('click', e)"
+    v-bind="{ ...$props, ...$attrs }"
+    icon="mdi-close"
+    color="var(--gray-7-hsl)"
+    :title="iconOnly ? $t('general.clear') : undefined"
+  >
+    {{ $t('general.clear') }}
+  </MainButton>
+</template>
diff --git a/src/components/button/index.ts b/src/components/button/index.ts
index 945f207a..6e350f92 100644
--- a/src/components/button/index.ts
+++ b/src/components/button/index.ts
@@ -7,3 +7,4 @@ export { default as BackButton } from './BackButton.vue';
 export { default as UndoButton } from './UndoButton.vue';
 export { default as ToggleButton } from './ToggleButton.vue';
 export { default as ClearButton } from './ClearButton.vue';
+export { default as CloseButton } from './CloseButton.vue';