Resources page, ResourceBlock, schemas

src/components/Button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	let { children, onclick } = $props();
+	let { children, onclick = null } = $props();
 </script>
 
 <button

src/components/ResourceCard.svelte

@@ -1,17 +1,18 @@
 <script>
+	import { slide } from 'svelte/transition';
 	import Button from './Button.svelte';
 	import Link from './Link.svelte';
-	let { title = '_Resource Title_', children = () => {}, link = "https://example.com"} = $props();
+	let { title = '_Resource Title_', children, link = 'https://example.com' } = $props();
 </script>
 
-<div class="bg-ecsess-200 w-96 rounded-lg px-8 py-4">
-	<p class="text-ecsess-black text-xl font-semibold pb-2">
+<div class="bg-ecsess-200 ring-6 ring-ecsess-600 hover:ring-ecsess-200/60 hover:shadow-3xl max-w-sm rounded-lg w-full transition-all" transition:slide>
+	<Link href={link}>
+		<div class="px-8 py-4">
+			<p class="text-ecsess-800 px-2 text-xl font-semibold lg:text-2xl">
 				{title}
 			</p>
 
-	<p class="text-ecsess-black text-base font-normal py-2">{@render children()}</p>
-
-    <Link href={link}>
-        <Button>Access</Button>
+			<p class="text-ecsess-black pt-3 text-base font-normal lg:text-lg">{@render children()}</p>
+		</div>
 	</Link>
 </div>

src/lib/schemas.ts

@@ -46,4 +46,10 @@ export type CouncilMember = {
 	yearProgram: string;
 };
 
+export type Resource = {
+	title: string;
+	url: string;
+	description: string;
+}
+
 export type Redirect = { shortname: string; url: string };

src/routes/resources/+page.server.ts

@@ -1,3 +1,4 @@
+import type { Resource } from '$lib/schemas';
 import { getFromCMS } from '$lib/utils.js';
 
 // needs to concat and format this text
@@ -5,11 +6,11 @@ const query = `*[_type == "resources"]{
   title,
   url,
   description,
-  "lastUpdated":_updatedAt
 }`;
 
 export const load = async () => {
+	const resources: Resource[] = await getFromCMS(query);
 	return {
-		resources: await getFromCMS(query)
+		resources: resources
 	};
 };

src/routes/resources/+page.svelte

@@ -1,4 +1,5 @@
 <script>
+	import ResourceCard from 'components/ResourceCard.svelte';
 	import Section from 'components/Section.svelte';
 	let { data } = $props();
 </script>
@@ -8,12 +9,11 @@
 <Section>
 	<p class="page-title">Resources</p>
 
-	<h1>Resources for ECSE students at McGill University, presented by ECSESS!</h1>
-
+	<div class="flex flex-col gap-8">
 		{#each data.resources as re}
-		{re.title} <br>
-		{re.url} <br>
-		{re.description} <br>
-		<p>==============</p>
+		<ResourceCard title={re.title} link={re.url}>
+			{re.description}
+		</ResourceCard>
 		{/each}
+	</div>
 </Section>