From e0d7ba61a5cd6db243714aaab01b19e239c53df4 Mon Sep 17 00:00:00 2001
From: Amir <amirhassan.hamzan@gmail.com>
Date: Wed, 3 Aug 2022 02:06:07 +0800
Subject: [PATCH] add font, sort home ui

---
 public/index.html                    |  39 ++++---
 src/Master.vue                       |  10 +-
 src/components/base/BaseCard.vue     |   2 +-
 src/components/home/TheHome.vue      | 149 +++++++++++++++++++++------
 src/components/layouts/TheHeader.vue |  35 +++++--
 5 files changed, 174 insertions(+), 61 deletions(-)

diff --git a/public/index.html b/public/index.html
index af11d6b..911ca60 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,18 +1,25 @@
 <!DOCTYPE html>
 <html lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
-    <title>Lelong | Ar-Rahn</title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
+  </style>
+  <!-- <title><%= htmlWebpackPlugin.options.title %></title> -->
+  <title>Lelong | Ar-Rahn</title>
+</head>
+
+<body>
+  <noscript>
+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+        Please enable it to continue.</strong>
+  </noscript>
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/Master.vue b/src/Master.vue
index 785f6c9..d2dca11 100644
--- a/src/Master.vue
+++ b/src/Master.vue
@@ -1,5 +1,7 @@
 <template>
-  <router-view></router-view>
+  <div id="style">
+    <router-view></router-view>
+  </div>
 </template>
 
 <script>
@@ -8,10 +10,6 @@ export default {};
 
 <style scoped>
 #style {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+  font-family: "Inter", Helvetica, Arial, sans-serif;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/base/BaseCard.vue b/src/components/base/BaseCard.vue
index dc3bb4a..4288665 100644
--- a/src/components/base/BaseCard.vue
+++ b/src/components/base/BaseCard.vue
@@ -6,7 +6,7 @@
 
 <style scoped>
 div {
-  margin: 2rem auto;
+  margin: 1rem auto;
   /* max-width: 40rem; */
   padding: 1rem;
   border-radius: 12px;
diff --git a/src/components/home/TheHome.vue b/src/components/home/TheHome.vue
index 6ae8251..b4cc939 100644
--- a/src/components/home/TheHome.vue
+++ b/src/components/home/TheHome.vue
@@ -3,16 +3,16 @@
     <div class="container">
       <div class="row">
         <div class="col-md-8">
+          <h4>Lelongan Hari Ini: 30/06/2022</h4>
           <base-card>
             <div>
-              <h5>Lelongan Hari Ini</h5>
               <table class="table table-bordered table-hover">
                 <thead>
                   <tr>
                     <th scope="col">#</th>
-                    <th scope="col">First</th>
-                    <th scope="col">Last</th>
-                    <th scope="col">Handle</th>
+                    <th scope="col">Cawangan</th>
+                    <th scope="col">Masa Mula</th>
+                    <th scope="col">Countdown</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -33,20 +33,29 @@
                     <td colspan="2">Larry the Bird</td>
                     <td>@twitter</td>
                   </tr>
+                  <tr>
+                    <th scope="row">3</th>
+                    <td colspan="2">Larry the Bird</td>
+                    <td>@twitter</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">3</th>
+                    <td colspan="2">Larry the Bird</td>
+                    <td>@twitter</td>
+                  </tr>
                 </tbody>
               </table>
             </div>
           </base-card>
+          <h4 class="mt-4">Lelongan Seterusnya</h4>
           <base-card>
             <div>
-              <h5>Lelongan Seterusnya</h5>
               <table class="table table-bordered table-hover">
                 <thead>
                   <tr>
                     <th scope="col">#</th>
-                    <th scope="col">First</th>
-                    <th scope="col">Last</th>
-                    <th scope="col">Handle</th>
+                    <th scope="col">Cawangan</th>
+                    <th scope="col">Tarikh</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -54,18 +63,31 @@
                     <th scope="row">1</th>
                     <td>Mark</td>
                     <td>Otto</td>
-                    <td>@mdo</td>
                   </tr>
                   <tr>
-                    <th scope="row">2</th>
-                    <td>Jacob</td>
-                    <td>Thornton</td>
-                    <td>@fat</td>
+                    <th scope="row">1</th>
+                    <td>Mark</td>
+                    <td>Otto</td>
                   </tr>
                   <tr>
-                    <th scope="row">3</th>
-                    <td colspan="2">Larry the Bird</td>
-                    <td>@twitter</td>
+                    <th scope="row">1</th>
+                    <td>Mark</td>
+                    <td>Otto</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">1</th>
+                    <td>Mark</td>
+                    <td>Otto</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">1</th>
+                    <td>Mark</td>
+                    <td>Otto</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">1</th>
+                    <td>Mark</td>
+                    <td>Otto</td>
                   </tr>
                 </tbody>
               </table>
@@ -74,23 +96,92 @@
         </div>
         <div class="col-md-4">
           <div class="col">
-            <base-card>
-              <div>
-                <h5>Karat</h5>
-                <p>Mutu</p>
-                <p>Harga</p>
+            <h4 class="ps-3">Emas Semasa</h4>
+            <div class="grid-container">
+              <!-- <base-card>
+                <div>
+                  <h5>22.0K</h5>
+                  <p>999</p>
+                  <p>RM261</p>
+                </div>
+              </base-card>
+              <base-card>
+                <div>
+                  <h5>22.0K</h5>
+                  <p>999</p>
+                  <p>RM261</p>
+                </div>
+              </base-card> -->
+              <div class="card">
+                <p>22.0K</p>
+                <p>999</p>
+                <p>RM261</p>
               </div>
-            </base-card>
-            <base-card>
-              <div>
-                <h5>Karat</h5>
-                <p>Mutu</p>
-                <p>Harga</p>
+              <div class="card">
+                <p>22.0K</p>
+                <p>999</p>
+                <p>RM261</p>
               </div>
-            </base-card>
+              <div class="card">
+                <p>22.0K</p>
+                <p>999</p>
+                <p>RM261</p>
+              </div>
+              <div class="card">
+                <p>22.0K</p>
+                <p>999</p>
+                <p>RM261</p>
+              </div>
+              <div class="card">
+                <p>22.0K</p>
+                <p>999</p>
+                <p>RM261</p>
+              </div>
+              <div class="card">
+                <p>22.0K</p>
+                <p>999</p>
+                <p>RM261</p>
+              </div>
+              <div class="card">
+                <p>22.0K</p>
+                <p>999</p>
+                <p>RM261</p>
+              </div>
+              <div class="card">
+                <p>22.0K</p>
+                <p>999</p>
+                <p>RM261</p>
+              </div>
+              <div class="card">
+                <p>22.0K</p>
+                <p>999</p>
+                <p>RM261</p>
+              </div>
+              <div class="card">
+                <p>22.0K</p>
+                <p>999</p>
+                <p>RM261</p>
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </div>
   </the-template>
-</template>
\ No newline at end of file
+</template>
+
+<style scoped>
+.grid-container {
+  display: grid;
+  grid-template-columns: auto auto;
+}
+
+.card {
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+  padding: 20px;
+  margin: 10px;
+  width: 140px;
+  height: 130px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/layouts/TheHeader.vue b/src/components/layouts/TheHeader.vue
index d5ffd7e..59fd0e7 100644
--- a/src/components/layouts/TheHeader.vue
+++ b/src/components/layouts/TheHeader.vue
@@ -16,27 +16,40 @@
       <div class="collapse navbar-collapse" id="navbarSupportedContent">
         <ul class="navbar-nav me-auto mb-2 mb-lg-0">
           <li class="nav-item">
-            <router-link class="nav-link" v-bind:to="{name: 'home'}">Utama</router-link>
+            <router-link class="nav-link" v-bind:to="{ name: 'home' }"
+              >Utama</router-link
+            >
           </li>
           <li class="nav-item">
-            <router-link class="nav-link" v-bind:to="{name: 'list'}">Senarai</router-link>
+            <router-link class="nav-link" v-bind:to="{ name: 'list' }"
+              >Senarai</router-link
+            >
           </li>
           <li class="nav-item">
-            <router-link class="nav-link" v-bind:to="{name: 'cart'}">Troli</router-link>
+            <router-link class="nav-link" v-bind:to="{ name: 'cart' }"
+              >Troli</router-link
+            >
           </li>
           <li class="nav-item">
-            <router-link class="nav-link" v-bind:to="{name: 'bid-record'}">Rekod Bidaan</router-link>
+            <router-link class="nav-link" v-bind:to="{ name: 'bid-record' }"
+              >Rekod Bidaan</router-link
+            >
           </li>
           <li class="nav-item">
-            <router-link class="nav-link" v-bind:to="{name: 'result'}">Keputusan</router-link>
+            <router-link class="nav-link" v-bind:to="{ name: 'result' }"
+              >Keputusan</router-link
+            >
           </li>
           <li class="nav-item">
-            <router-link class="nav-link" v-bind:to="{name: 'profile'}">Profil</router-link>
+            <router-link class="nav-link" v-bind:to="{ name: 'profile' }"
+              >Profil</router-link
+            >
           </li>
           <li class="nav-item">
-            <router-link class="nav-link" v-bind:to="{name: 'login'}">Log Keluar</router-link>
+            <router-link class="nav-link" v-bind:to="{ name: 'login' }"
+              >Log Keluar</router-link
+            >
           </li>
-        
         </ul>
       </div>
     </div>
@@ -45,6 +58,10 @@
 
 <style scoped>
 .nav-link:hover {
-    color: blue;
+  color: blue !important;
+}
+
+router-link:hover {
+  color: blue;
 }
 </style>
\ No newline at end of file