feat(components): add workflow card

.gitignore

@@ -11,6 +11,7 @@
 
 # misc
 .DS_Store
+.eslintcache
 .env.local
 .env.development.local
 .env.test.local

src/components/newtab/workflow/WorkflowCard.vue

@@ -0,0 +1,22 @@
+<template>
+  <ui-card class="hover:ring-accent hover:ring-2">
+    <div class="mb-6 flex items-center">
+      <span class="p-2 rounded-full bg-accent inline-block text-white">
+        <v-remixicon name="riGlobalLine" />
+      </span>
+      <div class="flex-grow"></div>
+      <button class="mr-3">
+        <v-remixicon name="riPlayLine" />
+      </button>
+      <button>
+        <v-remixicon name="riMoreLine" />
+      </button>
+    </div>
+    <router-link to="/workflow">
+      <p class="line-clamp leading-tight font-semibold">Workflow name</p>
+      <p class="text-gray-600 dark:text-gray-200 leading-tight text-overflow">
+        3 Days ago
+      </p>
+    </router-link>
+  </ui-card>
+</template>

src/newtab/pages/Home.vue

@@ -3,30 +3,7 @@
   <div class="flex items-start">
     <div class="w-7/12 mr-8">
       <div class="grid gap-3 mb-8 grid-cols-3">
-        <ui-card v-for="i in 3" :key="i" class="hover:ring-2 hover:ring-accent">
-          <div class="flex items-center mb-3">
-            <span class="p-2 rounded-full bg-accent text-white inline-block">
-              <v-remixicon name="riGlobalLine" />
-            </span>
-            <div class="flex-grow"></div>
-            <button title="Execute">
-              <v-remixicon name="riPlayLine" />
-            </button>
-          </div>
-          <router-link to="/workflow">
-            <p class="line-clamp leading-tight font-semibold">Workflow name</p>
-            <p
-              class="
-                text-gray-600
-                dark:text-gray-200
-                leading-tight
-                text-overflow
-              "
-            >
-              3 Days ago
-            </p>
-          </router-link>
-        </ui-card>
+        <workflow-card v-for="i in 3" :key="i" />
       </div>
       <div>
         <div class="mb-4 flex items-center justify-between">
@@ -86,6 +63,7 @@
 </template>
 <script setup>
 import SharedTaskList from '@/components/shared/SharedTaskList.vue';
+import WorkflowCard from '@/components/newtab/workflow/WorkflowCard.vue';
 
 const tasks = [
   { name: 'Open website', status: 'success' },

src/newtab/pages/Workflows.vue

@@ -1,6 +1,6 @@
 <template>
-  <h1 class="text-2xl font-semibold mb-5">Workflows</h1>
-  <div class="flex items-center space-x-4">
+  <h1 class="text-2xl font-semibold mb-8">Workflows</h1>
+  <div class="flex items-center mb-6 space-x-4">
     <ui-input
       prepend-icon="riSearch2Line"
       placeholder="Search..."
@@ -18,8 +18,13 @@
     </div>
     <ui-button variant="accent"> New Workflow </ui-button>
   </div>
+  <div class="grid gap-4 grid-cols-4">
+    <workflow-card v-for="i in 13" :key="i" />
+  </div>
 </template>
 <script setup>
+import WorkflowCard from '@/components/newtab/workflow/WorkflowCard.vue';
+
 const sorts = [
   { name: 'Name', id: 'name' },
   { name: 'Created date', id: 'createdAt' },