Init

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

@@ -0,0 +1,50 @@
+<script>
+	import { ProductCard } from '$lib/components/ui/product-card';
+	import { Skeleton } from '$lib/components/ui/skeleton';
+	// const celebrity = [
+	// 	{
+	// 		name: 'Malika Mahat',
+	// 		img: malika
+	// 	},
+	// 	{
+	// 		name: 'Malika Mahat',
+	// 		img: malika
+	// 	}
+	// ];
+
+	let { products } = $props();
+</script>
+
+<div
+	class="mx-auto flex max-w-screen-2xl flex-col gap-6 bg-primary/10 px-10 py-10 max-sm:gap-2 max-sm:px-4"
+>
+	<div>
+		<h2 class="text-2xl font-bold tracking-tight max-sm:text-xl">New Arrivals</h2>
+	</div>
+	<div class="grid grid-cols-5 justify-between gap-6 max-sm:grid-cols-2 max-sm:gap-2">
+		{#await products}
+			{#each Array.from({ length: 10 })}
+				<Skeleton class="aspect-[4/4.5] h-full w-full bg-gray-50" />
+			{/each}
+		{:then product}
+			{#if product?.newArrival?.product?.length > 0}
+				{#each product?.newArrival?.product as newArrival}
+					<ProductCard
+						imgUrl={newArrival?.image}
+						productPrice={newArrival?.price}
+						productTitle={newArrival?.name}
+						rating={newArrival?.averageReview}
+						discount={newArrival?.discount}
+						productRedirectLink={`/product/${newArrival?.id}/${newArrival?.slug}`}
+						totalReviewCount={newArrival?.totalReviewCount}
+						celebrityPick={newArrival?.pickedByCelebrities}
+					/>
+				{/each}
+			{:else}
+				{#each Array.from({ length: 10 })}
+					<Skeleton class="aspect-[4/4.5] h-full w-full bg-gray-50" />
+				{/each}
+			{/if}
+		{/await}
+	</div>
+</div>