Merge pull request #14 from shaniit-org/dev

update on separate related card component
shaniit-org · Nov 27, 2023 · ed8c5af · ed8c5af
2 parents 692525e + 8396565
commit ed8c5af
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 21 deletions.
diff --git a/src/lib/components/common/EventCard.svelte b/src/lib/components/common/EventCard.svelte
@@ -12,7 +12,7 @@
 <div
 	class="border-t border-t-gray-200 border-solid pt-4 cursor-pointer flex flex-col gap-8 md:flex-row md:gap-6"
 >
-	<div class="w-full h-full basis-[20%] aspect-video max-w-[330px] mt-4 shrink-0">
+	<div class="w-full h-full basis-[20%] aspect-video max-w-[330px] mt-4 shrink-0 overflow-hidden">
 		<SanityImage
 			className="w-full h-full object-cover"
 			maxWidth={300}

diff --git a/src/lib/components/common/RelatedArticle.svelte b/src/lib/components/common/RelatedArticle.svelte
@@ -1,6 +1,5 @@
 <script>
-	import NewsCard from '$lib/components/common/NewsCard.svelte';
-	import EventCard from './EventCard.svelte';
+	import RelatedCard from './RelatedCard.svelte';
 	/** @type {import('../../types').RelatedArticle[] | undefined} */
 	export let data;
 </script>
@@ -11,12 +10,7 @@
 			<h3 class="text-xl mb-4">Related Articles</h3>
 			<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4 pb-12">
 				{#each data as itm}
-					{#if itm._type == 'event'}
-						<EventCard data={itm} />
-					{/if}
-					{#if itm._type != 'event'}
-						<NewsCard data={itm} />
-					{/if}
+					<RelatedCard data={itm} />
 				{/each}
 			</div>
 		</div>

diff --git a/src/lib/components/common/RelatedCard.svelte b/src/lib/components/common/RelatedCard.svelte
@@ -0,0 +1,27 @@
+<script>
+	import moment from 'moment';
+	import SanityImage from '$lib/sanity/image/SanityImage.svelte';
+	/**
+	 * @type {import('../../types').News}
+	 */
+	export let data;
+	$: url = data._type === 'event' ? `/events/${data.slug}` : `/news/${data.slug}`;
+</script>
+
+<a href={url} class="cursor-pointer hover:bg-theme-muted bg-white flex flex-col">
+	<SanityImage
+		maxWidth={450}
+		image={data.coverImage}
+		alt={data.title}
+		className=" aspect-video w-full object-cover"
+	/>
+	<div class="flex-col justify-between p-4 flex gap-6">
+		<h3 class="text-xl">
+			{data.title}
+		</h3>
+		<div class="flex flex-col">
+			<span class="text-gray-800 mb-2"> {data.description} </span>
+			<span> {moment(data.publishedAt).format('LL')}</span>
+		</div>
+	</div>
+</a>
diff --git a/src/routes/events/[slug]/+page.js b/src/routes/events/[slug]/+page.js
@@ -17,16 +17,16 @@ const query = `*[_type =="event" && slug.current==$slug][0]{
  * @type {import('@sveltejs/kit').Load}
  */
 export const load = async ({ params }) => {
-    /** @type {string} */
-    if (params.slug) {
-        /**
-         * @type {import('$lib/types').EventDetail}
-         */
-        const data = await getPageData(query, {
-            slug: params.slug
-        });
-        if (data) return { data };
-        else throw error(404, 'not found');
-    }
-    throw error(404, 'not found');
+	/** @type {string} */
+	if (params.slug) {
+		/**
+		 * @type {import('$lib/types').EventDetail}
+		 */
+		const data = await getPageData(query, {
+			slug: params.slug
+		});
+		if (data) return { data };
+		else throw error(404, 'not found');
+	}
+	throw error(404, 'not found');
 };