feat: main window

EOX-A · Oct 9, 2024 · 20e8587 · 20e8587
1 parent ca87353
commit 20e8587
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 24 deletions.
diff --git a/index.html b/index.html
@@ -5,9 +5,13 @@
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">=
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css"
+      rel="stylesheet"
+    />
+    =
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/assets/main.css b/src/assets/main.css
@@ -1,9 +1,9 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
 
 .v-btn {
-  font-family: 'Inter', sans-serif;
+  font-family: "Inter", sans-serif;
   letter-spacing: normal;
 }
 .v-btn__content {
   letter-spacing: normal;
-}
+}
diff --git a/src/components/global/Navbar.vue b/src/components/global/Navbar.vue
@@ -1,41 +1,48 @@
 <script setup>
-import {ref} from "vue"
+import { ref } from "vue";
 
 const navItems = ref([
   {
-    title: 'All Sessions',
+    title: "All Sessions",
     disabled: false,
-    href: '/',
+    href: "/",
   },
   {
-    title: 'Products for Dry Tropospheric Correction',
+    title: "Products for Dry Tropospheric Correction",
     disabled: false,
-    href: '/products-for-dry-tropospheric-correction',
+    href: "/products-for-dry-tropospheric-correction",
   },
   {
-    title: 'Variables/catal...',
+    title: "Variables/catal...",
     disabled: true,
   },
-])
+]);
 </script>
 <template>
   <v-app-bar class="navbar" color="primary" app>
-    <v-toolbar-title> <v-breadcrumbs :items="navItems">
-      <template v-slot:divider>
-        <v-icon icon="mdi-chevron-right"></v-icon>
-      </template>
-    </v-breadcrumbs></v-toolbar-title>
-
+    <v-toolbar-title>
+      <v-breadcrumbs :items="navItems">
+        <template v-slot:divider>
+          <v-icon icon="mdi-chevron-right"></v-icon>
+        </template> </v-breadcrumbs
+    ></v-toolbar-title>
 
     <v-col cols="auto">
-      <v-btn size="large" prepend-icon="mdi-source-pull" variant="flat" class="text-capitalize font-weight-medium" color="btn-primary">Create New Session</v-btn>
+      <v-btn
+        size="large"
+        prepend-icon="mdi-source-pull"
+        variant="flat"
+        class="text-capitalize font-weight-medium"
+        color="btn-primary"
+        >Create New Session</v-btn
+      >
     </v-col>
   </v-app-bar>
 </template>
 
 <style>
 .navbar .v-breadcrumbs-item.v-breadcrumbs-item--disabled {
-  color: #ADDDFF;
+  color: #adddff;
   opacity: 0.8;
 }
 </style>
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
@@ -14,7 +14,7 @@ const vuetify = createVuetify({
           primary: "#002742",
           secondary: "#EEF0F1",
           background: "#F7F8F8",
-          "btn-primary": "#D6EEFF"
+          "btn-primary": "#D6EEFF",
         },
       },
     },

diff --git a/src/views/SessionsView.vue b/src/views/SessionsView.vue
@@ -1,5 +1,41 @@
-<script setup></script>
+<script setup>
+const files = [
+  {
+    color: "blue",
+    icon: "mdi-clipboard-text",
+    subtitle: "Jan 20, 2014",
+    title: "Adding SO-FRESH product",
+  },
+  {
+    color: "amber",
+    icon: "mdi-gesture-tap-button",
+    subtitle: "Jan 10, 2014",
+    title: "Kitchen remodel",
+  },
+];
+</script>
 
 <template>
-  <h1>List of sessions</h1>
+  <v-list>
+    <v-list-item
+      v-for="file in files"
+      :key="file.title"
+      :subtitle="file.subtitle"
+      :title="file.title"
+    >
+      <template v-slot:prepend>
+        <v-avatar :color="file.color">
+          <v-icon color="white">{{ file.icon }}</v-icon>
+        </v-avatar>
+      </template>
+
+      <template v-slot:append>
+        <v-btn
+          color="grey-lighten-1"
+          icon="mdi-information"
+          variant="text"
+        ></v-btn>
+      </template>
+    </v-list-item>
+  </v-list>
 </template>