Finished base portrait component.

Author: anotherKyleFrom1994

src/components/activity/sponsor/Sponsor.ts

@@ -1,6 +1,31 @@
 import { Vue, Component } from 'vue-property-decorator';
+import { Item } from '@/components/base/portrait/Portrait';
+import IconType from '@/enums/iconType';
 
 @Component({})
 export default class Sponsor extends Vue {
-
+  private imageSrc = 'https://picsum.photos/700?image=996';
+  private listItems: Item[] = [{
+      iconStart: IconType.Phone,
+      title: '12313',
+      iconEnd: IconType.MessageText,
+      divider: true
+    },
+    {
+      iconStart: IconType.Phone,
+      title: '12313',
+      iconEnd: IconType.MessageText,
+      divider: true
+    },
+    {
+      iconStart: IconType.Email,
+      title: '12313',
+      divider: true
+    },
+    {
+      iconStart: IconType.MapMarker,
+      title: '12313',
+      divider: false
+    }
+  ];
 }

src/components/activity/sponsor/Sponsor.vue

@@ -1,5 +1,6 @@
 <template>
-  <base-portrait>
+  <base-portrait :image-src="imageSrc"
+                 :list-items="listItems">
   </base-portrait>
 </template>
 

src/components/base/portrait/Portrait.ts

@@ -1,6 +1,16 @@
-import { Vue, Component, Prop } from 'vue-property-decorator'
+import { Vue, Component, Prop } from 'vue-property-decorator';
+import IconType from '@/enums/iconType';
+
+export interface Item {
+  iconStart ? : IconType;
+  title: string;
+  iconEnd ? : IconType;
+  divider ? : boolean;
+}
 
 @Component({})
 export default class BasePortrait extends Vue {
+  @Prop({ required: true }) imageSrc!: string;
+  @Prop({ required: true }) listItems!: Item[];
 
 }

src/components/base/portrait/Portrait.vue

@@ -21,27 +21,31 @@
       </v-btn>
     </v-card-title> -->
 
-    <v-img src="https://picsum.photos/700?image=996"
+    <v-img :src="imageSrc"
            height="200px"></v-img>
 
     <v-list>
-      <v-list-item>
-        <v-list-item-action>
-          <v-icon>mdi-phone</v-icon>
-        </v-list-item-action>
-
-        <v-list-item-content>
-          <v-list-item-title>(650) 555-1234</v-list-item-title>
-        </v-list-item-content>
-        <v-list-item-action>
-
-          <v-icon>mdi-message-text</v-icon>
-        </v-list-item-action>
-      </v-list-item>
-
-      <v-divider inset></v-divider>
-
-      <v-list-item>
+      <template v-for="(item, i) in listItems">
+        <v-list-item :key="'item' + i">
+          <v-list-item-action v-if="item.iconStart">
+            <v-icon>{{ item.iconStart }}</v-icon>
+          </v-list-item-action>
+
+          <v-list-item-content>
+            <v-list-item-title>{{ item.title }}</v-list-item-title>
+          </v-list-item-content>
+
+          <v-list-item-action v-if="item.iconEnd">
+            <v-icon>{{ item.iconEnd }}</v-icon>
+          </v-list-item-action>
+        </v-list-item>
+
+        <v-divider v-if="item.divider"
+                   :key="'divider'+ i"
+                   inset></v-divider>
+      </template>
+
+      <!-- <v-list-item>
         <v-list-item-action>
           <v-icon>mdi-phone</v-icon>
         </v-list-item-action>
@@ -77,7 +81,7 @@
         <v-list-item-content>
           <v-list-item-title>Orlando, FL 79938</v-list-item-title>
         </v-list-item-content>
-      </v-list-item>
+      </v-list-item> -->
     </v-list>
 
   </v-card>

src/enums/iconType.ts

@@ -2,7 +2,15 @@
 // https://materialdesignicons.com/
 enum IconType {
   Person = 'person',
-    Lock = 'lock'
+    Lock = 'lock',
+    Phone = 'mdi-phone',
+    Pencil = 'mdi-pencil',
+    Email = 'mdi-email',
+    MessageText = 'mdi-message-text',
+    ChevronLeft = 'mdi-chevron-left',
+    DotsVertical = 'mdi-dots-vertical',
+    MapMarker = 'mdi-map-marker'
+
 }
 
 export default IconType;