Add ProjectCard component

usevital · Jul 6, 2024 · 7d5cc22 · 7d5cc22
1 parent 5730b11
commit 7d5cc22
Show file tree

Hide file tree

Showing 5 changed files with 214 additions and 383 deletions.
diff --git a/components/projectCard.vue b/components/projectCard.vue
@@ -0,0 +1,34 @@
+<template>
+  <div
+    class="flex flex-col gap-2 bg-[color:var(--brand-colour)] p-4 rounded-2xl"
+  >
+    <!-- Title -->
+    <span
+      class="gap-4 flex flex-row items-center text-[color:var(--big-text-colour)] text-5xl font-bold"
+    >
+      {{ props.title }}
+      <!-- Icon -->
+      <img class="h-12 bg-white rounded-xl p-1" :src="props.icon" />
+    </span>
+    <!-- Description -->
+    <div class="flex flex-col gap-3 text-2xl">
+      <slot />
+    </div>
+    <!-- Buttons -->
+    <div class="flex mt-5">
+      <NuxtLink
+        :to="download"
+        class="flex gap-2 px-10 py-3 rounded-xl items-center text-lg border-2 hover:bg-white hover:text-black"
+        ><LucideDownload />Modrinth</NuxtLink
+      >
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  title: String,
+  download: String,
+  icon: String,
+})
+</script>
diff --git a/components/projectContainer.vue b/components/projectContainer.vue
diff --git a/components/projectParagraph.vue b/components/projectParagraph.vue
diff --git a/components/projectTitle.vue b/components/projectTitle.vue