diff --git a/package-lock.json b/package-lock.json
index c5996c4127a70deafec77ff20acc4e75c67448a1..bf8401f585cf13c85d81e6a8f01912a151578266 100644
--- a/package-lock.json
+++ b/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,
diff --git a/package.json b/package.json
index 4a088f0efe3f10a8b470fb5a54debc6cb0fd0b21..66788b9ffdf616d6288db4223c4c69ed8106e191 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/BaseComponents/ColoredButton.vue b/src/components/BaseComponents/ColoredButton.vue
new file mode 100644
index 0000000000000000000000000000000000000000..74091bb360a25e7d489994c4aded8e59544445e5
--- /dev/null
+++ b/src/components/BaseComponents/ColoredButton.vue
@@ -0,0 +1,16 @@
+<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>
diff --git a/src/components/BaseComponents/CommunityHeader.vue b/src/components/BaseComponents/CommunityHeader.vue
new file mode 100644
index 0000000000000000000000000000000000000000..99fde7e4f3ca32f7931a1f4aed0ed7735ea87e98
--- /dev/null
+++ b/src/components/BaseComponents/CommunityHeader.vue
@@ -0,0 +1,76 @@
+<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>
diff --git a/src/components/BaseComponents/NotificationModal.vue b/src/components/BaseComponents/NotificationModal.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5883ed10714253ab7a6ffe1f0416c5af75f5166a
--- /dev/null
+++ b/src/components/BaseComponents/NotificationModal.vue
@@ -0,0 +1,60 @@
+<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>