keeps on homepage

keepr.client/src/components/KeepTile.vue

@@ -0,0 +1,43 @@
+<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>
+  </div>
+</template>
+
+
+<script>
+import { computed, onMounted, ref } from 'vue'
+import { AppState } from '../AppState.js'
+import { logger } from '../utils/Logger.js'
+import { Keep } from "../models/Keep.js"
+export default {
+  props: {
+    keep: {
+      type: Keep
+    }
+  },
+  setup(props) {
+    return {}
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+.card-img {
+  min-height: 160px;
+}
+
+.card-img-overlay img {
+  max-height: 36px;
+}
+</style>

keepr.client/src/components/Navbar.vue

@@ -2,7 +2,8 @@
   <nav class="navbar navbar-expand-lg navbar-dark bg-dark px-3">
     <router-link class="navbar-brand d-flex" :to="{ name: 'Home' }">
       <div class="d-flex flex-column align-items-center">
-        <img alt="logo" src="../assets/img/cw-logo.png" height="45" />
+        <!-- <img alt="logo" src="../assets/img/cw-logo.png" height="45" /> -->
+        <h1 class="brand">Keepr</h1>
       </div>
     </router-link>
     <button
@@ -18,14 +19,14 @@
     </button>
     <div class="collapse navbar-collapse" id="navbarText">
       <ul class="navbar-nav me-auto">
-        <li>
+        <!-- <li>
           <router-link
             :to="{ name: 'About' }"
             class="btn text-success lighten-30 selectable text-uppercase"
           >
             About
           </router-link>
-        </li>
+        </li> -->
       </ul>
       <!-- LOGIN COMPONENT HERE -->
       <Login />
@@ -53,4 +54,8 @@ a:hover {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
+
+.brand {
+  font-family: cursive;
+}
 </style>