feat(*): Add products page

src/lib/components/products/ProductsListItem.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	export let product;
+</script>
+
+<a href="/products/{product.id}" class="max-w-[384px] mx-auto">
+	<div class="w-full max-w-sm aspect-square relative">
+		<img src={product.images[0]} alt={product.description} class="w-full h-full rounded-xl" />
+		<!-- <span
+			class="py-1 min-[400px]:py-2 px-2 min-[400px]:px-4 cursor-pointer rounded-lg bg-gradient-to-tr from-indigo-600 to-purple-600 font-medium text-base leading-7 text-white absolute top-3 right-3 z-10"
+			>20% Off</span
+		> -->
+	</div>
+	<div class="mt-5 flex items-center justify-between">
+		<div class="">
+			<h6 class="font-medium text-xl leading-8 text-black mb-2">{product.name}</h6>
+			<h6 class="font-semibold text-xl leading-8 text-indigo-600">£{product.actualPrice}</h6>
+		</div>
+		<button
+			class="p-2 min-[400px]:p-4 rounded-full bg-white border border-gray-300 flex items-center justify-center group shadow-sm shadow-transparent transition-all duration-500 hover:shadow-gray-200 hover:border-gray-400 hover:bg-gray-50"
+		>
+			<svg
+				class="stroke-gray-900 transition-all duration-500 group-hover:stroke-black"
+				xmlns="http://www.w3.org/2000/svg"
+				width="26"
+				height="26"
+				viewBox="0 0 26 26"
+				fill="none"
+			>
+				<path
+					d="M12.6892 21.125C12.6892 22.0225 11.9409 22.75 11.0177 22.75C10.0946 22.75 9.34632 22.0225 9.34632 21.125M19.3749 21.125C19.3749 22.0225 18.6266 22.75 17.7035 22.75C16.7804 22.75 16.032 22.0225 16.032 21.125M4.88917 6.5L6.4566 14.88C6.77298 16.5715 6.93117 17.4173 7.53301 17.917C8.13484 18.4167 8.99525 18.4167 10.7161 18.4167H18.0056C19.7266 18.4167 20.587 18.4167 21.1889 17.9169C21.7907 17.4172 21.9489 16.5714 22.2652 14.8798L22.8728 11.6298C23.3172 9.25332 23.5394 8.06508 22.8896 7.28254C22.2398 6.5 21.031 6.5 18.6133 6.5H4.88917ZM4.88917 6.5L4.33203 3.25"
+					stroke=""
+					stroke-width="1.6"
+					stroke-linecap="round"
+				/>
+			</svg>
+		</button>
+	</div>
+</a>

src/routes/products/+page.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import ProductsListItem from '$lib/components/products/ProductsListItem.svelte';
+	import { onMount } from 'svelte';
+	let products = [] as any;
+
+	let enablePagination = false;
+
+	onMount(async () => {
+		const response = await fetch('/products');
+		const responseJson = await response.json();
+		products = responseJson.data;
+		if (responseJson.has_more) {
+			enablePagination = true;
+		}
+	});
+</script>
+
+<section class="py-24">
+	<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+		<h2
+			class="font-manrope font-bold text-3xl min-[400px]:text-4xl text-black mb-8 max-lg:text-center"
+		>
+			Available Products
+		</h2>
+		<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+			{#each products as product (product.id)}
+				<ProductsListItem {product} />
+			{/each}
+		</div>
+		{#if enablePagination}
+			<div class="flex justify-center mt-12">
+				<div class="join">
+					<button class="join-item btn">1</button>
+					<button class="join-item btn btn-active">2</button>
+					<button class="join-item btn">3</button>
+					<button class="join-item btn">4</button>
+				</div>
+			</div>
+		{/if}
+	</div>
+</section>

src/routes/products/+server.ts

@@ -0,0 +1,23 @@
+import { json } from '@sveltejs/kit';
+import { PUBLIC_STRIPE_SECRET_KEY } from '$env/static/public';
+import stripe from 'stripe';
+const stripeClient = new stripe(PUBLIC_STRIPE_SECRET_KEY);
+
+export const GET = async () => {
+	const products = await stripeClient.products.list({
+		limit: 100
+	});
+
+	try {
+		// Get the price for each product
+		for (const product of products.data) {
+			const price = await stripeClient.prices.retrieve(product.default_price as string);
+			if (price) {
+				product.actualPrice = price.unit_amount / 100;
+			}
+		}
+	} catch (error) {
+		console.error(error);
+	}
+	return json(products);
+};

src/routes/products/prices/[priceId]/+server.ts

@@ -0,0 +1,10 @@
+import { json } from '@sveltejs/kit';
+import { PUBLIC_STRIPE_SECRET_KEY } from '$env/static/public';
+import stripe from 'stripe';
+const stripeClient = new stripe(PUBLIC_STRIPE_SECRET_KEY);
+
+export const GET = async ({ params }) => {
+	const { priceId } = params;
+	const price = await stripeClient.prices.retrieve(priceId);
+	return json(price);
+};