basic components

package-lock.json

@@ -8,6 +8,7 @@
       "name": "frontend",
       "version": "0.1.0",
       "dependencies": {
+        "@heroicons/vue": "^1.0.6",
         "@mdi/font": "5.9.55",
         "@vuelidate/core": "^2.0.0-alpha.40",
         "@vuelidate/validators": "^2.0.0-alpha.28",
@@ -1706,6 +1707,14 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
+    "node_modules/@heroicons/vue": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-1.0.6.tgz",
+      "integrity": "sha512-ng2YcCQrdoQWEFpw+ipFl2rZo8mZ56v0T5+MyfQQvNqfKChwgP6DMloZLW+rl17GEcHkE3H82UTAMKBKZr4+WA==",
+      "peerDependencies": {
+        "vue": ">= 3"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.5.0",
       "dev": true,
@@ -16071,6 +16080,12 @@
         "@hapi/hoek": "^9.0.0"
       }
     },
+    "@heroicons/vue": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-1.0.6.tgz",
+      "integrity": "sha512-ng2YcCQrdoQWEFpw+ipFl2rZo8mZ56v0T5+MyfQQvNqfKChwgP6DMloZLW+rl17GEcHkE3H82UTAMKBKZr4+WA==",
+      "requires": {}
+    },
     "@humanwhocodes/config-array": {
       "version": "0.5.0",
       "dev": true,

package.json

@@ -9,6 +9,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@heroicons/vue": "^1.0.6",
     "@mdi/font": "5.9.55",
     "@vuelidate/core": "^2.0.0-alpha.40",
     "@vuelidate/validators": "^2.0.0-alpha.28",

src/components/BaseComponents/ColoredButton.vue

+<template>
+  <button
+    class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+  >
+    {{ text }}
+  </button>
+</template>
+
+<script>
+export default {
+  name: "ColoredButton",
+  props: {
+    text: String,
+  },
+};
+</script>

src/components/BaseComponents/CommunityHeader.vue

+<template>
+  <div class="flex items-center justify-between mx-4">
+    <div class="flex-1 min-w-0">
+      <h2
+        class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate"
+      >
+        {{ community.name }}
+      </h2>
+      <div
+        class="mt-1 flex flex-col sm:flex-row sm:flex-wrap sm:mt-0 sm:space-x-6"
+      >
+        <div class="mt-2 flex items-center text-sm text-gray-500">
+          <svg
+            class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
+              clip-rule="evenodd"
+            />
+          </svg>
+          {{ community.location }}
+        </div>
+      </div>
+    </div>
+    <div class="flex">
+      <span class="hidden sm:block">
+        <button
+          v-if="adminStatus"
+          @click="edit()"
+          type="button"
+          class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+        >
+          <!-- Heroicon name: solid/pencil -->
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-5 w-5"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
+            />
+          </svg>
+          Edit
+        </button>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CommunityHeader",
+  props: {
+    adminStatus: Boolean,
+    community: {
+      communityId: Number,
+      name: String,
+      description: String,
+      visibility: Number,
+      location: String,
+      picture: String,
+    },
+  },
+  methods: {
+    edit() {
+      this.$emit("edit");
+    },
+  },
+};
+</script>

src/components/BaseComponents/NotificationModal.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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "NotificationModal",
+  props: {
+    visible: Boolean,
+    title: String,
+    message: String,
+  },
+  methods: {
+    close() {
+      this.$emit("close");
+    },
+  },
+};
+</script>