From 1e1b1f6844a26c974085288fbcf9806ffaed3ae9 Mon Sep 17 00:00:00 2001
From: Pranav <pranavrajs@gmail.com>
Date: Sun, 12 Jan 2025 00:37:32 -0800
Subject: [PATCH] Rearranage components

---
 .../components/ArticleCardSkeletonLoader.vue  | 15 ------
 .../widget/components/ArticleSearch.vue       | 52 -------------------
 .../Home/Article/ArticleBlock.vue}            |  0
 .../Home/Article}/ArticleListItem.vue         |  0
 .../Home/Article/SkeletonLoader.vue           | 15 ++++++
 app/javascript/widget/views/Home.vue          |  4 +-
 6 files changed, 17 insertions(+), 69 deletions(-)
 delete mode 100644 app/javascript/widget/components/ArticleCardSkeletonLoader.vue
 delete mode 100644 app/javascript/widget/components/ArticleSearch.vue
 rename app/javascript/widget/components/{ArticleHero.vue => pageComponents/Home/Article/ArticleBlock.vue} (100%)
 rename app/javascript/widget/components/{ => pageComponents/Home/Article}/ArticleListItem.vue (100%)
 create mode 100644 app/javascript/widget/components/pageComponents/Home/Article/SkeletonLoader.vue

diff --git a/app/javascript/widget/components/ArticleCardSkeletonLoader.vue b/app/javascript/widget/components/ArticleCardSkeletonLoader.vue
deleted file mode 100644
index 83c8aaaa2..000000000
--- a/app/javascript/widget/components/ArticleCardSkeletonLoader.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div class="py-4 space-y-4 bg-white dark:bg-slate-700">
-    <div class="space-y-2 animate-pulse">
-      <div class="h-6 bg-slate-100 dark:bg-slate-500 rounded w-2/5" />
-    </div>
-    <div class="space-y-2 animate-pulse">
-      <div class="h-4 bg-slate-100 dark:bg-slate-500 rounded" />
-      <div class="h-4 bg-slate-100 dark:bg-slate-500 rounded" />
-      <div class="h-4 bg-slate-100 dark:bg-slate-500 rounded" />
-    </div>
-    <div class="space-y-2 animate-pulse">
-      <div class="h-4 bg-slate-100 dark:bg-slate-500 rounded w-1/5" />
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/widget/components/ArticleSearch.vue b/app/javascript/widget/components/ArticleSearch.vue
deleted file mode 100644
index b6b98aa72..000000000
--- a/app/javascript/widget/components/ArticleSearch.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script>
-import { debounce } from '@chatwoot/utils';
-export default {
-  props: {
-    placeholder: {
-      type: String,
-      default: '',
-    },
-  },
-  emits: ['search'],
-  data() {
-    return {
-      searchQuery: '',
-    };
-  },
-  methods: {
-    handleInput: debounce(
-      () => {
-        this.$emit('search', this.searchQuery);
-      },
-      500,
-      true
-    ),
-  },
-};
-</script>
-
-<template>
-  <div class="relative flex items-center">
-    <div
-      class="absolute inset-y-0 left-0 flex items-center px-2 py-2 text-slate-500"
-    >
-      <fluent-icon icon="search" size="14" />
-    </div>
-    <input
-      id="search"
-      v-model="searchQuery"
-      :placeholder="placeholder"
-      type="text"
-      name="search"
-      class="block w-full h-8 px-2 pl-6 pr-1 text-sm border rounded-md focus-visible:outline-none text-slate-800 border-slate-100 bg-slate-75 placeholder:text-slate-400 focus:ring focus:border-woot-500 focus:ring-woot-200 hover:border-woot-200"
-      @input="handleInput"
-    />
-    <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
-      <kbd
-        class="inline-flex items-center px-1 font-sans border rounded border-slate-200 text-xxs text-slate-400"
-      >
-        {{ '⌘K' }}
-      </kbd>
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/widget/components/ArticleHero.vue b/app/javascript/widget/components/pageComponents/Home/Article/ArticleBlock.vue
similarity index 100%
rename from app/javascript/widget/components/ArticleHero.vue
rename to app/javascript/widget/components/pageComponents/Home/Article/ArticleBlock.vue
diff --git a/app/javascript/widget/components/ArticleListItem.vue b/app/javascript/widget/components/pageComponents/Home/Article/ArticleListItem.vue
similarity index 100%
rename from app/javascript/widget/components/ArticleListItem.vue
rename to app/javascript/widget/components/pageComponents/Home/Article/ArticleListItem.vue
diff --git a/app/javascript/widget/components/pageComponents/Home/Article/SkeletonLoader.vue b/app/javascript/widget/components/pageComponents/Home/Article/SkeletonLoader.vue
new file mode 100644
index 000000000..025c2f767
--- /dev/null
+++ b/app/javascript/widget/components/pageComponents/Home/Article/SkeletonLoader.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="py-4 space-y-4">
+    <div class="space-y-2 animate-pulse">
+      <div class="h-6 bg-n-slate-7 rounded w-2/5" />
+    </div>
+    <div class="space-y-2 animate-pulse">
+      <div class="h-4 bg-n-slate-7 rounded" />
+      <div class="h-4 bg-n-slate-7 rounded" />
+      <div class="h-4 bg-n-slate-7 rounded" />
+    </div>
+    <div class="space-y-2 animate-pulse">
+      <div class="h-4 bg-n-slate-7 rounded w-1/5" />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/widget/views/Home.vue b/app/javascript/widget/views/Home.vue
index 29b13ca2f..d02e3f8d3 100755
--- a/app/javascript/widget/views/Home.vue
+++ b/app/javascript/widget/views/Home.vue
@@ -1,7 +1,7 @@
 <script>
 import TeamAvailability from 'widget/components/TeamAvailability.vue';
-import ArticleHero from 'widget/components/ArticleHero.vue';
-import ArticleCardSkeletonLoader from 'widget/components/ArticleCardSkeletonLoader.vue';
+import ArticleHero from 'widget/components/pageComponents/Home/Article/ArticleBlock.vue';
+import ArticleCardSkeletonLoader from 'widget/components/pageComponents/Home/Article/SkeletonLoader.vue';
 
 import { mapGetters } from 'vuex';
 import { useDarkMode } from 'widget/composables/useDarkMode';