src/lib/components/Card.svelte

@@ -4,8 +4,9 @@
 	import { OpenInNewWindow } from 'radix-icons-svelte';
 	import { quintInOut } from 'svelte/easing';
 	import { slide } from 'svelte/transition';
+	import type { Service } from '$lib/types/data-types';
 
-	let { service } = $props();
+	let { service: Service } = $props();
 
 	let hover = $state({
 		title: false,

src/lib/types/data-types.ts

@@ -0,0 +1,9 @@
+export type Service = {
+	name: string;
+	icon: string;
+	href: string;
+	desc: string;
+	warn: string;
+	extLink?: string;
+	id: number;
+};

src/routes/services/+page.svelte

@@ -3,8 +3,9 @@
 <script lang="ts">
 	import pages from '$lib/components/pages.json';
 	import Card from '$lib/components/Card.svelte';
+	import type { Service } from '$lib/types/data-types';
 
-	const services = $state(pages.services);
+	const services: Array<Service> = $state(pages.services);
 </script>
 
 <svelte:head>