feat: add getting started card to dashboard

BrewingWeasel · Jul 14, 2024 · 252282b · 252282b
1 parent cfd85ff
commit 252282b
Showing 1 changed file with 94 additions and 64 deletions.
diff --git a/src/pages/dashboard/Index.vue b/src/pages/dashboard/Index.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import Button from "@/components/ui/button/Button.vue";
 import {
   Card,
   CardContent,
@@ -9,8 +10,10 @@ import {
 
 import { BarChart } from "@/components/ui/chart-bar";
 import Separator from "@/components/ui/separator/Separator.vue";
+import { GithubLogoIcon } from "@radix-icons/vue";
 
 import { invoke } from "@tauri-apps/api";
+import { BookText } from "lucide-vue-next";
 
 interface TimeSpent {
   days_this_week: { name: string; duration: number }[];
@@ -26,77 +29,104 @@ console.log(timeSpent);
 </script>
 
 <template>
-  <Card class="w-80">
-    <CardHeader>
-      <CardTitle>Activity</CardTitle>
-      <CardDescription>Time spent learning the language</CardDescription>
-    </CardHeader>
-    <CardContent>
-      <div class="flex items-center justify-center">
-        <div
-          class="p-12 w-48 h-48 bg-accent mb-3 rounded-full flex items-center justify-center flex-col ease-in-out duration-200 hover:scale-110"
-        >
-          <h1 class="text-center text-5xl font-black text-teal-600">
-            {{ timeSpent.streak }}
-          </h1>
-          <h3 class="text-center text-xl">day streak</h3>
+  <div class="flex gap-3">
+    <Card class="w-80">
+      <CardHeader>
+        <CardTitle>Activity</CardTitle>
+        <CardDescription>Time spent learning the language</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div class="flex items-center justify-center">
+          <div
+            class="p-12 w-48 h-48 bg-accent mb-3 rounded-full flex items-center justify-center flex-col ease-in-out duration-200 hover:scale-110"
+          >
+            <h1 class="text-center text-5xl font-black text-teal-600">
+              {{ timeSpent.streak }}
+            </h1>
+            <h3 class="text-center text-xl">day streak</h3>
+          </div>
         </div>
-      </div>
 
-      <h4 class="text-xl font-bold mb-1 mt-3">This week</h4>
+        <h4 class="text-xl font-bold mb-1 mt-3">This week</h4>
 
-      <BarChart
-        :data="timeSpent.days_this_week"
-        :categories="['duration']"
-        index="name"
-        :showLegend="false"
-        class="h-48"
-        :showYAxis="true"
-      />
+        <BarChart
+          :data="timeSpent.days_this_week"
+          :categories="['duration']"
+          index="name"
+          :showLegend="false"
+          class="h-48"
+          :showYAxis="true"
+        />
 
-      <div class="flex items-baseline justify-center mb-4">
-        <h2 class="font-bold">
-          {{ timeSpent.total_this_week[0] }}
-        </h2>
-        <h4>{{ timeSpent.total_this_week[1] }}</h4>
-        <h4>&nbsp;spent learning total</h4>
-      </div>
+        <div class="flex items-baseline justify-center mb-4">
+          <h2 class="font-bold">
+            {{ timeSpent.total_this_week[0] }}
+          </h2>
+          <h4>{{ timeSpent.total_this_week[1] }}</h4>
+          <h4>&nbsp;spent learning total</h4>
+        </div>
 
-      <div class="bg-accent rounded-md">
-        <div
-          class="flex justify-between items-baseline px-2 py-1 rounded-md hover:bg-background"
-        >
-          <h4>This month</h4>
-          <div class="flex items-baseline">
-            <h2 class="text-xl font-bold px-0.5">
-              {{ timeSpent.this_month[0] }}
-            </h2>
-            <h4>{{ timeSpent.this_month[1] }}</h4>
+        <div class="bg-accent rounded-md">
+          <div
+            class="flex justify-between items-baseline px-2 py-1 rounded-md hover:bg-background"
+          >
+            <h4>This month</h4>
+            <div class="flex items-baseline">
+              <h2 class="text-xl font-bold px-0.5">
+                {{ timeSpent.this_month[0] }}
+              </h2>
+              <h4>{{ timeSpent.this_month[1] }}</h4>
+            </div>
           </div>
-        </div>
-        <div
-          class="flex justify-between items-baseline px-2 py-1 rounded-md hover:bg-background"
-        >
-          <h4>This year</h4>
-          <div class="flex items-baseline">
-            <h2 class="text-xl font-bold px-0.5">
-              {{ timeSpent.this_year[0] }}
-            </h2>
-            <h4>{{ timeSpent.this_year[1] }}</h4>
+          <div
+            class="flex justify-between items-baseline px-2 py-1 rounded-md hover:bg-background"
+          >
+            <h4>This year</h4>
+            <div class="flex items-baseline">
+              <h2 class="text-xl font-bold px-0.5">
+                {{ timeSpent.this_year[0] }}
+              </h2>
+              <h4>{{ timeSpent.this_year[1] }}</h4>
+            </div>
           </div>
-        </div>
-        <div
-          class="flex justify-between items-baseline px-2 py-1 rounded-md hover:bg-background"
-        >
-          <h4>All time</h4>
-          <div class="flex items-baseline">
-            <h2 class="text-xl font-bold px-0.5">
-              {{ timeSpent.total[0] }}
-            </h2>
-            <h4>{{ timeSpent.total[1] }}</h4>
+          <div
+            class="flex justify-between items-baseline px-2 py-1 rounded-md hover:bg-background"
+          >
+            <h4>All time</h4>
+            <div class="flex items-baseline">
+              <h2 class="text-xl font-bold px-0.5">
+                {{ timeSpent.total[0] }}
+              </h2>
+              <h4>{{ timeSpent.total[1] }}</h4>
+            </div>
           </div>
         </div>
-      </div>
-    </CardContent>
-  </Card>
+      </CardContent>
+    </Card>
+    <Card class="w-80 h-fit">
+      <CardHeader>
+        <CardTitle>Getting Started</CardTitle>
+        <CardDescription>Important links</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div class="flex flex-col items-center justify-center gap-1">
+          <a target="_blank" href="https://github.com/BrewingWeasel/sakinyje">
+            <Button class="w-48" variant="outline">
+              <GithubLogoIcon />
+              <h2 class="ml-1">Repository</h2>
+            </Button>
+          </a>
+          <a
+            target="_blank"
+            href="https://github.com/BrewingWeasel/sakinyje/wiki"
+          >
+            <Button class="w-48" variant="outline">
+              <BookText />
+              <h2 class="ml-1">Docs</h2>
+            </Button>
+          </a>
+        </div>
+      </CardContent>
+    </Card>
+  </div>
 </template>