feat: v-card-info

client/components/common/v-card-chin.vue

@@ -1,14 +1,10 @@
 <template lang='pug'>
   div
     v-divider.my-0
-    v-card-actions(:class='dark ? "grey darken-4-l5" : "grey lighten-4"')
+    v-card-actions(:class='$vuetify.theme.dark ? "grey darken-4-l5" : "grey lighten-4"')
       slot
 </template>
 
 <script>
-export default {
-  computed: {
-    dark() { return this.$vuetify.theme.dark }
-  }
-}
+export default { }
 </script>

client/components/common/v-card-info.vue

@@ -0,0 +1,56 @@
+<template lang='pug'>
+  .v-card-info(:class='`is-` + color')
+    v-card-text(:class='colors.cls')
+      v-icon(:color='colors.icon', left) {{icon}}
+      slot
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      default: 'blue'
+    },
+    icon: {
+      type: String,
+      default: 'mdi-information-outline'
+    }
+  },
+  computed: {
+    colors () {
+      switch (this.color) {
+        case 'blue':
+          return {
+            cls: this.$vuetify.theme.dark ? 'grey darken-4-l5' : 'blue lighten-5 blue--text text--darken-3',
+            icon: 'blue lighten-3'
+          }
+        case 'red':
+          return {
+            cls: this.$vuetify.theme.dark ? 'grey darken-4-l5' : 'red lighten-5 red--text text--darken-2',
+            icon: 'red lighten-3'
+          }
+        default:
+          return {
+            cls: this.$vuetify.theme.dark ? 'grey darken-4-l5' : 'grey lighten-4',
+            icon: 'grey darken-2'
+          }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.v-card-info {
+  border-bottom: 1px solid #EEE;
+
+  &.is-blue {
+    border-bottom-color: mc('blue', '100');
+  }
+
+  &.is-red {
+    border-bottom-color: mc('red', '100');
+  }
+}
+</style>