Contact dynamic details

Author: realstoman

src/views/Contact.vue

@@ -93,37 +93,19 @@
 					Contact details
 				</h2>
 				<ul class="">
-					<li class="flex">
-						<i
-							data-feather="map-pin"
-							class="w-5 text-gray-500 dark:text-gray-400 mr-4"
-						></i>
-						<p
-							class="text-lg mb-4 text-ternary-dark dark:text-ternary-light"
-						>
-							Wazir Akbar Khan, Kabul, Afghanistan
-						</p>
-					</li>
-					<li class="flex">
-						<i
-							data-feather="mail"
-							class="w-5 text-gray-500 dark:text-gray-400 mr-4"
-						></i>
-						<p
-							class="text-lg mb-4 text-ternary-dark dark:text-ternary-light"
-						>
-							email@example.com
-						</p>
-					</li>
-					<li class="flex">
+					<li
+						class="flex"
+						v-for="contact in contacts"
+						:key="contact.id"
+					>
 						<i
-							data-feather="phone"
+							:data-feather="contact.icon"
 							class="w-5 text-gray-500 dark:text-gray-400 mr-4"
 						></i>
 						<p
 							class="text-lg mb-4 text-ternary-dark dark:text-ternary-light"
 						>
-							+93 7888 888 88
+							{{ contact.name }}
 						</p>
 					</li>
 				</ul>
@@ -137,7 +119,25 @@ import feather from 'feather-icons';
 
 export default {
 	data: () => {
-		return {};
+		return {
+			contacts: [
+				{
+					id: 1,
+					name: 'Wazir Akbar Khan, Kabul, Afghanistan',
+					icon: 'map-pin',
+				},
+				{
+					id: 2,
+					name: 'email@example.com',
+					icon: 'mail',
+				},
+				{
+					id: 3,
+					name: '+93 7888 888 88',
+					icon: 'phone',
+				},
+			],
+		};
 	},
 	mounted() {
 		feather.replace();