feat: Testimonial Integration

src/lib/components/pages/Home/Testimonial.svelte

@@ -1,11 +1,26 @@
 <script lang="ts">
+	import { Skeleton } from '$lib/components/ui/skeleton';
+
+	let { testimonial } = $props();
 </script>
 
-<section class="mt-12">
+<section class="mt-12 flex flex-col gap-8">
 	<h5 class="text-center text-4xl font-bold capitalize">Trust that speak for itself</h5>
-	<!-- <div>
-		<a href="#">
-			<video src="#"></video>
-		</a>
-	</div> -->
+
+	{#await testimonial}
+		<div class="flex items-center justify-center gap-4">
+			{#each Array.from({ length: 10 })}
+				<Skeleton class="aspect-[9/16] h-full w-full bg-gray-400"></Skeleton>
+			{/each}
+		</div>
+	{:then reviews}
+		<div class="flex items-center justify-center gap-4">
+			{#each reviews?.testimonial.slice(0, 4) as review}
+				<div class="relative aspect-[9/16] h-full">
+					<iframe src={review?.media} title={review?.name} frameborder="0" class="h-full w-full"
+					></iframe>
+				</div>
+			{/each}
+		</div>
+	{/await}
 </section>

src/lib/utils/api.ts

@@ -32,5 +32,9 @@ export const endpoints = {
 		celebrity: '/products/celebrity',
 		recommended: '/products/recommended',
 		flashSale: '/products/flash-sales'
+	},
+	testimonial: {
+		show: '/testimonial/',
+		create: '/testimonial/'
 	}
 };

src/routes/+page.server.ts

@@ -4,7 +4,7 @@ import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ fetch }) => {
 	try {
-		const [banner, celebrity, newArival, trending] = await Promise.all([
+		const [banner, celebrity, newArival, trending, testimonial] = await Promise.all([
 			fetch(`${VITE_BACKEND_URL}${endpoints.category.banner}`, {
 				method: 'GET',
 				headers: {
@@ -32,6 +32,14 @@ export const load: PageServerLoad = async ({ fetch }) => {
 					'Content-Type': 'application/json',
 					Accept: 'application/json'
 				}
+			}),
+
+			fetch(`${VITE_BACKEND_URL}${endpoints.testimonial.show}`, {
+				method: 'GET',
+				headers: {
+					'Content-Type': 'application/json',
+					Accept: 'application/json'
+				}
 			})
 		]);
 
@@ -46,7 +54,8 @@ export const load: PageServerLoad = async ({ fetch }) => {
 			banner: banner.json(),
 			// celebrity: celebrity.json(),
 			newArrival: newArival.json(),
-			trending: trending.json()
+			trending: trending.json(),
+			testimonial: testimonial.json()
 		};
 	} catch (err) {
 		return {

src/routes/+page.svelte

@@ -41,7 +41,7 @@
 		{/if}
 	{/await}
 
-	<!-- <Testimonial /> -->
+	<Testimonial testimonial={data?.testimonial} />
 
 	<section class="py-12">
 		<h6 class="text-center text-8xl font-semibold text-primary">20 Years of Clinical Trust</h6>