Merge branch 'main' into community-popup

src/components/BaseComponents/CustomFooterModal.vue

+<template>
+  <!-- Main modal -->
+  <div
+    v-if="visible"
+    class="fixed grid place-items-center bg-gray-600 bg-opacity-50 top-0 left-0 right-0 z-50 w-full overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full"
+  >
+    <div class="relative w-full h-full max-w-2xl p-4 md:h-auto">
+      <!-- Modal content -->
+      <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+        <!-- Modal header -->
+        <div
+          class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600"
+        >
+          <h3 class="text-xl font-semibold text-gray-900 dark:text-white">
+            {{ title }}
+          </h3>
+          <button
+            @click="close()"
+            class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+          >
+            <svg
+              class="w-5 h-5"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                clip-rule="evenodd"
+              ></path>
+            </svg>
+          </button>
+        </div>
+        <!-- Modal body -->
+        <div class="p-6 space-y-6">
+          <p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+            {{ message }}
+          </p>
+        </div>
+        <!-- Modal footer -->
+        <div class="rounded-b border-t border-gray-200 dark:border-gray-600">
+          <!-- Slot: Add any html you want here -->
+          <slot />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CustomFooterModal",
+  props: {
+    visible: Boolean,
+    title: String,
+    message: String,
+  },
+  methods: {
+    close() {
+      this.$emit("close");
+    },
+  },
+};
+</script>

src/components/BaseComponents/IconButton.vue

+<template>
+  <!-- Icon button -->
+  <button
+    class="block w-fit text-white text-base bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+  >
+    <div class="flex flex-row px-5 py-2.5 h-10">
+      <!-- Icon slot: Default content "Ban"-icon -->
+      <div class="h-6 w-6">
+        <slot>
+          <BanIcon />
+        </slot>
+      </div>
+      <p>{{ text }}</p>
+    </div>
+  </button>
+</template>
+
+<script>
+import { BanIcon } from "@heroicons/vue/outline";
+
+export default {
+  name: "IconButton",
+  props: {
+    text: String,
+  },
+  components: {
+    BanIcon,
+  },
+};
+</script>

src/router/index.js

@@ -97,6 +97,11 @@ const routes = [
     name: "GroupHome",
     component: () => import("../views/CommunityViews/CommunityHomeView.vue"),
   },
+  {
+    path: "/test",
+    name: "test",
+    component: () => import("../views/TestView.vue"),
+  },
 ];
 
 const router = createRouter({

src/views/TestView.vue

+<template>
+  <div />
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      show: false,
+    };
+  },
+  components: {},
+  methods: {
+    toggleModal() {
+      this.show = !this.show;
+    },
+  },
+};
+</script>