From 35b21c1cea8a650897ac6541e9ade543554574e4 Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Wed, 16 Oct 2024 17:53:46 -0700
Subject: [PATCH] feat: Add Spinner to new components (#10303)

- Add Spinner to new components
---
 .../components-next/spinner/Spinner.story.vue | 15 +++++++++++
 .../components-next/spinner/Spinner.vue       | 25 +++++++++++++++++++
 2 files changed, 40 insertions(+)
 create mode 100644 app/javascript/dashboard/components-next/spinner/Spinner.story.vue
 create mode 100644 app/javascript/dashboard/components-next/spinner/Spinner.vue

diff --git a/app/javascript/dashboard/components-next/spinner/Spinner.story.vue b/app/javascript/dashboard/components-next/spinner/Spinner.story.vue
new file mode 100644
index 000000000..0031a5dfc
--- /dev/null
+++ b/app/javascript/dashboard/components-next/spinner/Spinner.story.vue
@@ -0,0 +1,15 @@
+<script setup>
+import Spinner from './Spinner.vue';
+</script>
+
+<template>
+  <Story title="Components/Spinner" :layout="{ type: 'grid', width: '400' }">
+    <Variant title="Default">
+      <Spinner size="24" class="text-n-slate-10" />
+      <Spinner size="32" class="text-n-ruby-10" />
+      <Spinner size="40" class="text-n-amber-10" />
+      <Spinner size="48" class="text-n-teal-10" />
+      <Spinner size="64" class="text-n-brand" />
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/components-next/spinner/Spinner.vue b/app/javascript/dashboard/components-next/spinner/Spinner.vue
new file mode 100644
index 000000000..d1cf8fc42
--- /dev/null
+++ b/app/javascript/dashboard/components-next/spinner/Spinner.vue
@@ -0,0 +1,25 @@
+<script setup>
+defineProps({
+  size: {
+    type: Number,
+    default: 24,
+  },
+});
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="8"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    class="animate-spin"
+  >
+    <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+  </svg>
+</template>