props to keepModal working

keepr.client/src/components/KeepModal.vue

@@ -0,0 +1,53 @@
+ <template>
+  <div class="component">
+    <div class="modal fade" id="keepModal" tabindex="-1" aria-labelledby="keepModalLabel" aria-hidden="true">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="keepModalLabel">
+              {{ keep?.name }}
+            </h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
+            body
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            <button type="button" class="btn btn-primary">Save changes</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+ </template>
+ 
+ 
+ <script>
+ export default {
+  props: {
+    keep: {
+      id: Number,
+      creatorId: String,
+      name: String,
+      description: String,
+      img: String,
+      views: Number,
+      kept: Number,
+      creator: {
+        id: String,
+        name: String,
+        picture: String
+      }
+    }
+  },
+  setup(props){
+    return {}
+  }
+ }
+ </script>
+ 
+ 
+ <style lang="scss" scoped>
+ 
+ </style>

keepr.client/src/components/KeepTile.vue

@@ -1,32 +1,50 @@
 <template>
-  <div @click="" class="component">
-      <div class="card bg-dark text-white">
-        <!-- TODO check if keep.img is a valid image -->
-        <img :src="keep.img" class="card-img" :alt="keep.name">
-        <div class="card-img-overlay d-flex justify-content-between align-items-end">
-          <h5 class="card-title">{{ keep.name }}</h5>
-          <a href="#">
-            <img :src="keep.creator.picture" :alt="keep.creator.name" class="rounded-pill img-fluid">
-          </a>
-        </div>
+  <div @click="viewKeep()" class="component">
+    <div class="card bg-dark text-white">
+      <!-- TODO check if keep.img is a valid image -->
+      <img :src="keep.img" class="card-img" :alt="keep.name">
+      <div class="card-img-overlay d-flex justify-content-between align-items-end">
+        <h5 class="card-title">{{ keep.name }}</h5>
+        <a href="#">
+          <img :src="keep.creator.picture" :alt="keep.creator.name" class="rounded-pill img-fluid">
+        </a>
       </div>
+    </div>
   </div>
 </template>
 
 
 <script>
 import { computed, onMounted, ref } from 'vue'
+import { router } from '../router.js'
 import { AppState } from '../AppState.js'
 import { logger } from '../utils/Logger.js'
-import { Keep } from "../models/Keep.js"
+
 export default {
   props: {
     keep: {
-      type: Keep
+      id: Number,
+      creatorId: String,
+      name: String,
+      description: String,
+      img: String,
+      views: Number,
+      kept: Number,
+      creator: {
+        id: String,
+        name: String,
+        picture: String
+      }
     }
   },
   setup(props) {
-    return {}
+    return {
+      viewKeep() {
+        AppState.activeKeep = props.keep;
+        // console.log(props.keep.id)
+        // router.push({name: 'Keep'})
+      }
+    }
   }
 }
 </script>
@@ -35,6 +53,7 @@ export default {
 <style lang="scss" scoped>
 .card-img {
   min-height: 160px;
+  max-height: 80vh;
 }
 
 .card-img-overlay img {