jcreek/SvelteKitSaasBoilerplate
1
0
Fork 0
mirror of https://github.com/jcreek/SvelteKitSaasBoilerplate.git synced 2026-07-14 11:33:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: display interval for subscriptions

Browse Source
This commit is contained in:
OllyNicholass
2024-10-15 23:47:34 +01:00
parent 43bd4e8026
commit b61983368c
2 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/products/ProductsListItem.svelte
+4 -1
View File
@@ -1,5 +1,8 @@
<script lang="ts"> <script lang="ts">
export let product; export let product;
const defaultPrice = product.prices[0];
const isSubscription = defaultPrice.type === 'recurring';
</script> </script>
<a href="/products/{product.id}" class="max-w-[384px] mx-auto"> <a href="/products/{product.id}" class="max-w-[384px] mx-auto">
@@ -13,7 +16,7 @@
<div class="mt-5 flex items-center justify-between"> <div class="mt-5 flex items-center justify-between">
<div class=""> <div class="">
<h6 class="font-medium text-xl leading-8 text-black mb-2">{product.name}</h6> <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> <h6 class="font-semibold text-xl leading-8 text-indigo-600">£{product.actualPrice} {isSubscription ? `/ ${defaultPrice.interval}` : ''}</h6>
</div> </div>
<button <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" 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"
src/routes/products/[productId]/+page.svelte
+1 -1
View File
@@ -85,7 +85,7 @@
<h6 <h6
class="font-manrope font-semibold text-2xl leading-9 text-gray-900 pr-5 sm:border-r border-gray-200 mr-5" class="font-manrope font-semibold text-2xl leading-9 text-gray-900 pr-5 sm:border-r border-gray-200 mr-5"
> >
£{item.price} £{item.price} {item.isSubscription ? `/ ${item.interval}` : ''}
</h6> </h6>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">