From 57fd14a199a253f49f3c53810490e5d31512b261 Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Tue, 5 Apr 2022 23:23:08 +0200
Subject: [PATCH] feat(page): home page layout

---
 src/components/ToolCard.vue | 45 +++++++++++++++++++++++++++++++++++++
 src/pages/Home.page.vue     | 16 ++++++++++---
 src/plugins/naive.plugin.ts |  6 +++++
 src/tools/index.ts          |  1 +
 4 files changed, 65 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ToolCard.vue

diff --git a/src/components/ToolCard.vue b/src/components/ToolCard.vue
new file mode 100644
index 00000000..75c60857
--- /dev/null
+++ b/src/components/ToolCard.vue
@@ -0,0 +1,45 @@
+<template>
+    <router-link :to="tool.path">
+        <n-card class="tool-card">
+            <n-icon class="icon" size="35">
+                <component :is="tool.icon" />
+            </n-icon>
+            <n-h3 class="title">{{ tool.name }}</n-h3>
+            <div class="description">
+                <n-ellipsis :line-clamp="2" :tooltip="false">{{ tool.description }}</n-ellipsis>
+            </div>
+        </n-card>
+    </router-link>
+</template>
+
+<script setup lang="ts">
+import type { ITool } from '@/tools/Tool';
+import { toRefs, defineProps } from 'vue';
+import { ArrowRight } from '@vicons/tabler'
+
+const props = defineProps<{ tool: ITool & { category: string } }>()
+const { tool } = toRefs(props)
+
+</script>
+
+<style lang="less" scoped>
+a {
+    text-decoration: none;
+}
+
+.tool-card {
+    &:hover {
+        border-color: var(--n-color-target);
+    }
+    .icon {
+        opacity: 0.7;
+    }
+    .title {
+        margin: 5px 0;
+    }
+    .description {
+        opacity: 0.7;
+        margin: 5px 0;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/Home.page.vue b/src/pages/Home.page.vue
index 7387ac2e..e733507d 100644
--- a/src/pages/Home.page.vue
+++ b/src/pages/Home.page.vue
@@ -1,11 +1,21 @@
 <script setup lang="ts">
-
+import { toolsWithCategory } from '@/tools';
+import ToolCard from '../components/ToolCard.vue';
 </script>
 
 <template>
-    <div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minima velit nesciunt esse iusto explicabo? Corporis, optio inventore doloremque sed maxime repellendus debitis recusandae atque nulla corrupti cum sit molestiae ad.</div>
+    <div class="home-page">
+        <n-grid x-gap="12" y-gap="12" :cols="3">
+            <n-gi v-for="tool in toolsWithCategory" :key="tool.name">
+                <tool-card :tool="tool" />
+            </n-gi>
+        </n-grid>
+    </div>
 </template>
 
 
-<style scoped>
+<style scoped lang="less">
+.home-page {
+    padding-top: 50px;
+}
 </style>
\ No newline at end of file
diff --git a/src/plugins/naive.plugin.ts b/src/plugins/naive.plugin.ts
index 86de7fb9..b04df564 100644
--- a/src/plugins/naive.plugin.ts
+++ b/src/plugins/naive.plugin.ts
@@ -39,10 +39,15 @@ import {
   NMessageProvider,
   NPageHeader,
   NResult,
+  NH3,
+  NEllipsis,
+  NTag,
 } from 'naive-ui';
 
 const components = [
+  NTag,
   NResult,
+  NEllipsis,
   NPageHeader,
   NMessageProvider,
   NLayout,
@@ -50,6 +55,7 @@ const components = [
   NMenu,
   NDropdown,
   NH2,
+  NH3,
   NP,
   NAlert,
   NTooltip,
diff --git a/src/tools/index.ts b/src/tools/index.ts
index 782478a7..c9889f23 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -20,3 +20,4 @@ export const toolsByCategory: ToolCategory[] = [
 ];
 
 export const tools = toolsByCategory.flatMap(({ components }) => components);
+export const toolsWithCategory = toolsByCategory.flatMap(({ components, name }) => components.map((tool) => ({ category: name, ...tool })));