Handle comments

src/lib/components/ProjectCard.svelte → src/lib/components/CommonCard.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import Tag from "$lib/components/Tag.svelte";
-	import MoreButton from "$lib/components/MoreButton.svelte";
 
 	type Props = {
 		term: string;
@@ -28,6 +27,8 @@
 				<img src="https://via.placeholder.com/150" alt={author} class="h-4 w-4 rounded-full" />
 			{/each} -->
 		</div>
-		<MoreButton />
+		<button class="rounded-full bg-lime-500 px-2 font-fira text-sm font-bold text-black">
+			Ver más
+		</button>
 	</div>
 </div>

src/routes/projects/+page.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
-	import ProjectCard from "$lib/components/ProjectCard.svelte";
-	import { projects } from "$lib/data/projects.json";
+	import CommonCard from "$lib/components/CommonCard.svelte";
 
 	let { data } = $props();
 </script>
 
 <p class="font-medium">{data.description}</p>
 <div class="mt-8 flex flex-col items-center sm:flex sm:flex-row sm:flex-wrap">
-	{#each projects as project}
-		<ProjectCard
+	{#each data.projects as project}
+		<CommonCard
 			term={project.term}
 			name={project.name}
 			category={project.category}

src/routes/projects/+page.ts

@@ -1,9 +1,12 @@
 import type { PageLoad } from "./$types";
+import { projects } from "$lib/data/projects.json";
 
 export const load = (async () => {
 	return {
 		title: "Proyectos",
 		// TODO: change this to a real description
 		description: "Aquí ponemos los proyectos que nos enorgullecen... y lo que hay ¯\\_(ツ)_/¯",
+		// TODO: fetch from API
+		projects,
 	};
 }) satisfies PageLoad;