From b816b19524a2ba2b294261e877621665f12c03ab Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Sun, 2 Feb 2025 23:05:17 +0330
Subject: [PATCH] added switch component

---
 frontend/components/global/Switch.vue | 41 +++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 frontend/components/global/Switch.vue

diff --git a/frontend/components/global/Switch.vue b/frontend/components/global/Switch.vue
new file mode 100644
index 0000000..ad15817
--- /dev/null
+++ b/frontend/components/global/Switch.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// types
+
+type Props = {
+    modelValue: boolean;
+};
+
+type Emit = {
+    "update:modelValue": [value: boolean];
+};
+
+// props
+
+const props = defineProps<Props>();
+
+const { modelValue } = toRefs(props);
+
+// emit
+
+const emit = defineEmits<Emit>();
+
+// computed
+
+const value = computed({
+    get: () => modelValue.value ?? false,
+    set: (value) => emit("update:modelValue", value),
+});
+</script>
+
+<template>
+    <SwitchRoot
+        v-model="value"
+        class="w-[3rem] h-[1.8rem] flex data-[state=unchecked]:bg-slate-200 data-[state=checked]:bg-stone-800 border border-slate-300 data-[state=checked]:border-stone-700 rounded-full relative transition-all focus-within:outline-none"
+    >
+        <SwitchThumb
+            class="size-6 my-auto bg-white text-sm ms-1 flex items-center justify-center shadow-xl rounded-full transition-transform translate-x-0.5 will-change-transform data-[state=checked]:-translate-x-[68%]"
+        />
+    </SwitchRoot>
+</template>
+
+<style scoped></style>