Dynamic social links

Author: realstoman

src/components/shared/Footer.vue

@@ -11,36 +11,17 @@
 			</p>
 			<ul class="flex gap-4 sm:gap-8">
 				<a
-					href="https://github.com/NangialaiStoman"
-					target="__blank"
-					class="text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer rounded-lg bg-gray-50 dark:bg-ternary-dark hover:bg-gray-100 shadow-sm∫ p-4"
-				>
-					<i data-feather="github" class="w-6 sm:w-8 h-6 sm:h-8"></i>
-				</a>
-				<a
-					href="https://twitter.com/NangialaiStoman"
-					target="__blank"
-					class="text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer rounded-lg bg-gray-50 dark:bg-ternary-dark hover:bg-gray-100 shadow-sm∫ p-4"
-				>
-					<i data-feather="twitter" class="w-6 sm:w-8 h-6 sm:h-8"></i>
-				</a>
-				<a
-					href="https://instagram.com/NangialaiStoman"
+					v-for="social in socials"
+					:key="social.id"
+					:href="social.url"
 					target="__blank"
 					class="text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer rounded-lg bg-gray-50 dark:bg-ternary-dark hover:bg-gray-100 shadow-sm∫ p-4"
 				>
 					<i
-						data-feather="instagram"
+						:data-feather="social.icon"
 						class="w-6 sm:w-8 h-6 sm:h-8"
 					></i>
 				</a>
-				<a
-					href="https://behance.net/NangialaiStoman"
-					target="__blank"
-					class="text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 cursor-pointer rounded-lg bg-gray-50 dark:bg-ternary-dark hover:bg-gray-100 shadow-sm∫ p-4"
-				>
-					<i data-feather="feather" class="w-6 sm:w-8 h-6 sm:h-8"></i>
-				</a>
 			</ul>
 		</div>
 		<!-- Footer social links end -->
@@ -68,6 +49,32 @@ export default {
 	data() {
 		return {
 			copyrightDate: new Date().getFullYear(),
+			socials: [
+				{
+					id: 1,
+					name: 'GitHub',
+					icon: 'github',
+					url: 'https://github.com/NangialaiStoman',
+				},
+				{
+					id: 2,
+					name: 'Twitter',
+					icon: 'twitter',
+					url: 'https://twitter.com/NangialaiStoman',
+				},
+				{
+					id: 3,
+					name: 'Instagram',
+					icon: 'instagram',
+					url: 'https://instagram.com/NangialaiStoman',
+				},
+				{
+					id: 4,
+					name: 'Behance',
+					icon: 'feather',
+					url: 'https://behance.net/NangialaiStoman',
+				},
+			],
 		};
 	},
 	mounted() {