First pass implementation for clickable cards!

17th Website/src/components/ProfilePage/activityCard.vue

@@ -0,0 +1,10 @@
+
+
+<template>
+
+<div class="border-2 border-white rounded-xl p-2 px-4">
+    <h2>hello</h2>
+    <p>date</p>
+</div>
+
+</template>

17th Website/src/components/ProfilePage/activityHistory.vue

@@ -1,3 +1,18 @@
+<script>
+import activityCard from './activityCard.vue';
+
+export default {
+    components: {
+        activityCard,
+    }
+}
+</script>
+
 <template>
-    <h1>This is activity history</h1>
+    <div class="flex flex-col w-full items-center">
+        <h1>This is activity history</h1>
+        <activityCard />
+        <activityCard />
+        <activityCard />
+    </div>
 </template>

17th Website/src/components/cards/clickableCard.vue

@@ -1,17 +1,42 @@
+<script>
+import { RouterLink } from 'vue-router';
+import { Icon } from '@iconify/vue'
+export default {
+    props: {
+        title: String,
+        description: String,
+        icon: String,
+        link: String,
+    },
+    components: {
+        Icon,
+    }
+}
+
+</script>
+
+
 <template>
-    <div class="card">
-        <h1 class="bg-gray-dark rounded-xl w-fit p-5">HELLO</h1>
+    <div class="flex flex-col flex-nowrap justify-end bg-gray-dark w-64 h-64 
+    rounded-2xl hover:ring-2 ring-blue p-6 cursor-pointer" v-on:click="$router.push(link)">
+        <div class="flex flex-row justify-center items-center h-full">
+            <icon :icon="icon" class="h-20 w-20 text-white" />
+        </div>
+        <div>
+            <h1 class="text-4xl m-0">{{ title }}</h1>
+            <p class="text-white h-12">{{ description }}</p>
+        </div>
     </div>
 </template>
 
 
 <style>
-.card {
+/* .card {
     color: var(--white);
     padding: 0 10px;
     margin: 10px;
     border-radius: 10px;
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     height: fit-content;
-}
+} */
 </style>