exercise 1

Author: danielkellyio

components.d.ts

@@ -6,6 +6,8 @@ import '@vue/runtime-core'
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AppButton: typeof import('./src/components/AppButton.vue')['default']
+    AppImage: typeof import('./src/components/AppImage.vue')['default']
+    BoardCard: typeof import('./src/components/BoardCard.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

src/components/AppImage.vue

@@ -0,0 +1,3 @@
+<template>
+  <img v-bind="$attrs" />
+</template>

src/components/BoardCard.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import {
+  Card as KCard,
+  CardTitle as KCardTitle,
+} from "@progress/kendo-vue-layout";
+import type { Board } from "@/types";
+defineProps<{
+  board: Board;
+}>();
+const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
+</script>
+<template>
+  <router-link :to="`/boards/${board.id}`" class="block w-96">
+    <KCard class="m-5">
+      <AppImage
+        v-if="board.image"
+        :src="board.image?.downloadUrl"
+        width="384"
+        class="aspect-video w-full"
+      />
+      <div
+        v-else
+        class="aspect-video w-full"
+        :style="{ backgroundColor: randomColor }"
+      ></div>
+      <KCardTitle class="p-2">
+        <span class="text-gray-700 text-xl">{{ board.title }}</span>
+      </KCardTitle>
+    </KCard>
+  </router-link>
+</template>

src/pages/boards/index.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { Board } from "@/types";
+import { ref } from "vue";
+const boards = ref<Partial<Board>[]>([
+  {
+    id: "1",
+    title: "My First Board",
+    order: "[]",
+    image: {
+      downloadUrl: "https://picsum.photos/480/270?board=1",
+    },
+  },
+  {
+    id: "2",
+    title: "My Second Board",
+    order: "[]",
+    image: {
+      downloadUrl: "https://picsum.photos/480/270?board=2",
+    },
+  },
+  {
+    id: "3",
+    title: "My Third Board",
+    order: "[]",
+  },
+]);
+</script>
+
+<template>
+  <h1 class="text-3xl mb-5">Boards</h1>
+  <div class="flex">
+    <BoardCard v-for="board in boards" :key="board.id" :board="board" />
+    <button class="text-gray-500" @click="createBoard(newBoardTemplate)">
+      <span>New Board +</span>
+    </button>
+  </div>
+</template>