🚧 Basic structure for widgets

src/components/Widgets/WidgetBase.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+  <Collapsable
+    :title="widget.name"
+    :icon="widget.icon"
+    :uniqueKey="groupId"
+    :collapsed="displayData.collapsed"
+    :cols="displayData.cols"
+    :rows="displayData.rows"
+    :color="displayData.color"
+    :customStyles="displayData.customStyles"
+  >
+  <Clock v-if="widgetType === 'clock'" :options="widgetOptions" />
+  </Collapsable>
+  </div>
+</template>
+
+<script>
+import Clock from '@/components/Widgets/Clock.vue';
+import Collapsable from '@/components/LinkItems/Collapsable.vue';
+
+export default {
+  name: 'Widget',
+  components: {
+    Collapsable,
+    Clock,
+  },
+  props: {
+    widget: Object,
+    index: Number,
+  },
+  computed: {
+    displayData() {
+      return this.widget.displayData || {};
+    },
+    groupId() {
+      return `widget-${this.index}`;
+    },
+    widgetType() {
+      return this.widget.type.toLowerCase();
+    },
+    widgetOptions() {
+      return this.widget.options || {};
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/media-queries.scss';
+
+</style>

src/components/Widgets/WidgetGroup.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <WidgetBase
+      v-for="(widget, widgetIndex) in widgets"
+      :key="widgetIndex"
+      :widget="widget"
+      :index="widgetIndex"
+    />
+  </div>
+</template>
+
+<script>
+import WidgetBase from '@/components/Widgets/WidgetBase';
+
+export default {
+  name: 'WidgetGroup',
+  components: {
+    WidgetBase,
+  },
+  props: {
+    widgets: Array,
+  },
+  computed: {},
+};
+</script>
+
+<style scoped lang="scss">
+@import '@/styles/media-queries.scss';
+
+</style>