profile page, but lotsa issues

keepr.client/src/components/KeepModal.vue

@@ -1,30 +1,63 @@
  <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-dialog modal-xl modal-dialog-centered">
         <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 class="card">
+            <div class="row">
+              <div class="col-6">
+                <img :src="keep?.img" :alt="keep?.name" class="img-fluid">
+              </div>
+              <div class="col-6">
+                <div class="card-body">
+                  <div class="d-flex flex-column justify-content-between">
+                    <div>
+                      <div class="d-flex justify-content-end">
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                      </div>
+                      <div class="d-flex justify-content-center">
+                        <p>social medi</p>
+                        <p>social medi</p>
+                        <p>social medi</p>
+                      </div>
+                      <h5 class="card-title text-center">{{ keep?.name }}</h5>
+                      <p class="card-text">{{ keep?.description }}</p>
+                    </div>
+                    <hr>
+                    <div class="d-flex justify-content-between">
+                      <button class="btn btn-primary">add to vault</button>
+                      <!-- account is empty... -->
+                      <button v-show="account?.id == keep?.creator?.id" class="btn btn-primary">trashcan</button>
+                      <div @click="viewProfile(keep?.creator)">
+                        <img :src="keep?.creator?.picture" :alt="keep?.creator?.name">
+                        <p>{{ keep?.creator?.name }}</p>
+                      </div>  
+                    </div>
+                  </div>
+                  <!-- tags -->
+                </div>
+              </div>
+            </div>
           </div>
+
+
+
+
+
         </div>
       </div>
     </div>
   </div>
- </template>
+</template>
  
  
  <script>
- export default {
+import { AppState } from '../AppState'
+import { computed } from 'vue'
+import { Modal } from 'bootstrap'
+import { logger } from '../utils/Logger.js'
+import { useRouter } from 'vue-router'
+export default {
   props: {
     keep: {
       id: Number,
@@ -41,13 +74,32 @@
       }
     }
   },
-  setup(props){
-    return {}
+  setup(props) {
+    // console.log(AppState.account)
+    const router = useRouter()
+    return {
+      account: computed(() => {AppState.account}),
+      viewProfile() {
+        // console.log(user.name)
+        // AppState.activeProfile = user
+        Modal.getOrCreateInstance(document.getElementById('keepModal')).hide()
+        // logger.log(props.keep.creator.id)
+        router.push({name: 'Profile', params: {id: props.keep.creator.id}})
+      }
+    }
   }
- }
- </script>
+}
+</script>
  
  
  <style lang="scss" scoped>
+ .modal-content {
+   // width: 84vw;
+   // height: calc(100vh - 16vw);
+   // margin: 8vw;
+ }
  
+ .img-fluid {
+   width: 100%;
+ }
  </style>

keepr.client/src/components/KeepsList.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="component">
+    keeps list
+
+  </div>
+</template>
+
+
+<script>
+export default {
+  setup(){
+    return {}
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+
+</style>

keepr.client/src/components/Profile.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="component">
+    Profile
+    {{ profile?.name }}
+
+  </div>
+</template>
+
+
+<script>
+export default {
+  props: {
+    profile: {
+      id: String,
+      name: String,
+      picture: String
+    }
+  },
+  setup(props){
+    return {}
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+
+</style>

keepr.client/src/components/VaultsList.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="component">
+    vaults list
+
+  </div>
+</template>
+
+
+<script>
+export default {
+  setup(){
+    return {}
+  }
+}
+</script>
+
+
+<style lang="scss" scoped>
+
+</style>