From 4db34e0c56696dff2f2aa35c9cfa208df0ad32cf Mon Sep 17 00:00:00 2001
From: jmt-gh <13617455+jmt-gh@users.noreply.github.com>
Date: Fri, 25 Nov 2022 21:06:18 -0800
Subject: [PATCH] Add new settings content component

This commit adds a new settings conent component. This is a container
component for the settings pages, so that they all get the same
formatting by default. It handles the header text, description text, and
any "add new" plus button as needed.
---
 client/components/app/SettingsContent.vue | 48 +++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 client/components/app/SettingsContent.vue

diff --git a/client/components/app/SettingsContent.vue b/client/components/app/SettingsContent.vue
new file mode 100644
index 00000000..df079711
--- /dev/null
+++ b/client/components/app/SettingsContent.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
+    <div class="flex items-center mb-2">
+      <h1 class="text-xl">{{ headerText }}</h1>
+
+      <div v-if="showAddButton" class="mx-2 w-7 h-7 flex items-center justify-center rounded-full cursor-pointer hover:bg-white hover:bg-opacity-10 text-center" @click="clicked">
+        <span class="material-icons" style="font-size: 1.4rem">add</span>
+      </div>
+    </div>
+
+    <p v-if="description" id="description" class="mb-6 text-gray-200" v-html="description" />
+
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    headerText: String,
+    description: String,
+    note: String,
+    showAddButton: Boolean
+  },
+  methods: {
+    clicked() {
+      this.$emit('clicked');
+    }
+  }
+}
+</script>
+
+<style>
+#description a {
+  color: rgb(96 165 250);
+}
+#description a:hover {
+  color: rgb(147 197 253);
+  text-decoration-line: underline;
+}
+#description code {
+  font-size: 0.875rem;
+  border-radius: 6px;
+  background-color: rgb(82, 82, 82);
+  color: white;
+  padding: 2px 4px;
+}
+</style>
\ No newline at end of file