Skip to content

Commit 19d6d49

Browse files
cab-mikeecab-mikee
committed
chore: wip
1 parent ddf35bd commit 19d6d49

File tree

19 files changed

+679
-17
lines changed

19 files changed

+679
-17
lines changed

‎storage/framework/core/components/dialog/components.d.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,14 @@ export {}
77
/* prettier-ignore */
88
declare module 'vue' {
99
export interface GlobalComponents {
10+
'Carbon:cafe': typeof import('~icons/carbon/cafe')['default']
11+
'Carbon:logoTwitter': typeof import('~icons/carbon/logo-twitter')['default']
1012
Dialog: typeof import('./src/components/Dialog.vue')['default']
1113
DialogPanel: typeof import('./src/components/DialogPanel.vue')['default']
1214
Footer: typeof import('./src/components/Footer.vue')['default']
1315
Hero: typeof import('./src/components/Hero.vue')['default']
1416
Installation: typeof import('./src/components/Installation.vue')['default']
17+
'Mdi:heart': typeof import('~icons/mdi/heart')['default']
1518
Options: typeof import('./src/components/Options.vue')['default']
1619
RouterLink: typeof import('vue-router')['RouterLink']
1720
RouterView: typeof import('vue-router')['RouterView']

‎storage/framework/core/components/dialog/src/components/Installation.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,5 +40,6 @@ async function handleCopyCode() {
4040
button {
4141
border: 0px solid #000;
4242
}
43+
4344
/* @unocss-placeholder */
4445
</style>

‎storage/framework/core/components/notification/package.json

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,11 @@
3232
},
3333
"dependencies": {
3434
"@stacksjs/ui": "workspace:*",
35-
"highlight.js": "^11.10.0",
36-
"vue": "^3.5.13"
35+
"highlight.js": "^11.10.0"
3736
},
3837
"devDependencies": {
39-
"@iconify-json/ic": "^1.2.1",
40-
"@microsoft/api-extractor": "^7.48.0",
38+
"@iconify-json/heroicons": "^1.2.1",
39+
"@microsoft/api-extractor": "^7.47.12",
4140
"@stacksjs/alias": "workspace:*",
4241
"@stacksjs/development": "workspace:*",
4342
"@types/clean-css": "^4.2.11",

‎storage/framework/core/components/payment/components.d.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,32 @@ export {}
77
/* prettier-ignore */
88
declare module 'vue' {
99
export interface GlobalComponents {
10+
'Carbon:cafe': typeof import('~icons/carbon/cafe')['default']
11+
'Carbon:logoTwitter': typeof import('~icons/carbon/logo-twitter')['default']
1012
Checkout: typeof import('./src/components/Checkout.vue')['default']
13+
CheckoutUsage: typeof import('./src/components/CheckoutUsage.vue')['default']
14+
copy: typeof import('./src/components/Environment copy.vue')['default']
15+
Environment: typeof import('./src/components/Environment.vue')['default']
16+
Environtment: typeof import('./src/components/Environtment.vue')['default']
1117
Expand: typeof import('./src/components/Expand.vue')['default']
1218
Footer: typeof import('./src/components/Footer.vue')['default']
1319
HeadlessToast: typeof import('./src/components/HeadlessToast.vue')['default']
1420
HeadlessToastWithProps: typeof import('./src/components/HeadlessToastWithProps.vue')['default']
1521
Hero: typeof import('./src/components/Hero.vue')['default']
1622
Installation: typeof import('./src/components/Installation.vue')['default']
1723
Loader: typeof import('./src/components/icons/Loader.vue')['default']
24+
'Mdi:heart': typeof import('~icons/mdi/heart')['default']
1825
OneTimePayment: typeof import('./src/components/OneTimePayment.vue')['default']
1926
Others: typeof import('./src/components/Others.vue')['default']
27+
PaymentUsage: typeof import('./src/components/PaymentUsage.vue')['default']
2028
Position: typeof import('./src/components/Position.vue')['default']
2129
RouterLink: typeof import('vue-router')['RouterLink']
2230
RouterView: typeof import('vue-router')['RouterView']
2331
Starport: typeof import('vue-starport')['Starport']
2432
StarportCarrier: typeof import('vue-starport')['StarportCarrier']
2533
Styling: typeof import('./src/components/Styling.vue')['default']
2634
Subscription: typeof import('./src/components/Subscription.vue')['default']
35+
SubscriptionUsage: typeof import('./src/components/SubscriptionUsage.vue')['default']
2736
Theming: typeof import('./src/components/Theming.vue')['default']
2837
Toast: typeof import('./src/components/Toast.vue')['default']
2938
Toaster: typeof import('./src/components/Toaster.vue')['default']

‎storage/framework/core/components/payment/package.json

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,11 @@
3232
},
3333
"dependencies": {
3434
"@stacksjs/ui": "workspace:*",
35-
"highlight.js": "^11.10.0",
36-
"vue": "^3.5.13"
35+
"highlight.js": "^11.10.0"
3736
},
3837
"devDependencies": {
39-
"@iconify-json/ic": "^1.2.1",
40-
"@microsoft/api-extractor": "^7.48.0",
38+
"@iconify-json/heroicons": "^1.2.1",
39+
"@microsoft/api-extractor": "^7.47.12",
4140
"@stacksjs/alias": "workspace:*",
4241
"@stacksjs/development": "workspace:*",
4342
"@types/clean-css": "^4.2.11",

‎storage/framework/core/components/payment/src/App.vue

Lines changed: 42 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,49 @@
11
<script lang="ts" setup>
2-
import { ref } from 'vue'
2+
import Footer from './components/Footer.vue'
3+
import Hero from './components/Hero.vue'
4+
import Installation from './components/Installation.vue'
5+
import Environment from './components/Environment.vue'
36
4-
const products = ref([{
5-
name: 'iPhone Pro Max',
6-
price: 99900, // Price in cents ($999.00)
7-
images: 'https://store.storeimages.cdn-apple.com/1/as-images.apple.com/is/iphone-16-pro-model-unselect-gallery-2-202409?wid=5120&hei=2880&fmt=webp&qlt=70&.v=aWs5czA5aDFXU0FlMGFGRlpYRXk2UWFRQXQ2R0JQTk5udUZxTkR3ZVlpTDUwMGlYMEhQSTVNdkRDMFExUU1KbTBoUVhuTWlrY2hIK090ZGZZbk9HeE1xUVVnSHY5eU9CcGxDMkFhalkvT0FmZ0ROUGFSR25aOE5EM2xONlRwa09mbW94YnYxc1YvNXZ4emJGL0IxNFp3&traceId=1',
8-
}])
7+
import CheckoutUsage from './components/CheckoutUsage.vue'
8+
import SubscriptionUsage from './components/SubscriptionUsage.vue'
9+
10+
// import Styling from './components/Styling.vue'
11+
import { useSEOHeader } from './composables/useSEOHeader'
12+
13+
useSEOHeader()
914
</script>
1015

1116
<template>
12-
<div>
13-
<Checkout mode="subscription" :products="products" redirect-url="https://google.com" />
17+
<div class="payment-wrapper bg-neutral-100/66 px-4 dark:bg-neutral-900">
18+
<div class="relative mx-auto max-w-full container sm:max-w-2xl">
19+
<header class="flex-center flex-col py-20">
20+
<Hero />
21+
</header>
22+
23+
<main
24+
class="text-primary grid grid-cols-1 gap-8 pb-20 text-xs 2xl:text-sm"
25+
>
26+
<Installation />
27+
28+
<Environment />
29+
<!-- <Usage /> -->
30+
<SubscriptionUsage />
31+
<CheckoutUsage />
32+
<!-- <Styling /> -->
33+
</main>
34+
<Footer />
35+
</div>
1436
</div>
1537
</template>
38+
39+
<style scoped>
40+
.payment-wrapper {
41+
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
42+
Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
43+
Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
44+
}
45+
46+
button {
47+
border: 0px solid #000;
48+
}
49+
</style>

‎storage/framework/core/components/payment/src/components/CheckoutUsage.vue

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<script lang="ts" setup>
2+
import { ref } from 'vue'
3+
import { useCopyCode } from '../composables/useCopyCode'
4+
5+
const code = `STRIPE_SECRET_KEY=
6+
FRONTEND_STRIPE_PUBLIC_KEY=
7+
`
8+
9+
const showCheckIcon = ref(false)
10+
11+
async function handleCopyCode() {
12+
await useCopyCode({ code, checkIconRef: showCheckIcon })
13+
}
14+
</script>
15+
16+
<template>
17+
<div class="installation">
18+
<h1 class="my-3 text-lg font-semibold">
19+
Checkout
20+
</h1>
21+
<!-- <div class="code-block relative">
22+
<Highlight
23+
language="javascript"
24+
class-name="rounded-md text-xs"
25+
:autodetect="false"
26+
:code="code"
27+
/>
28+
<button
29+
aria-label="Copy code"
30+
title="Copy code"
31+
class="btn-border absolute right-2 top-2 p-1"
32+
@click="handleCopyCode"
33+
>
34+
<div v-if="showCheckIcon" class="i-heroicons-check text-gray-500" />
35+
<div v-else class="i-heroicons-document-duplicate text-gray-500" />
36+
</button>
37+
</div> -->
38+
</div>
39+
</template>

‎storage/framework/core/components/payment/src/components/Environment.vue

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<script lang="ts" setup>
2+
import { ref } from 'vue'
3+
import { useCopyCode } from '../composables/useCopyCode'
4+
5+
const code = `STRIPE_SECRET_KEY=
6+
FRONTEND_STRIPE_PUBLIC_KEY=
7+
`
8+
9+
const showCheckIcon = ref(false)
10+
11+
async function handleCopyCode() {
12+
await useCopyCode({ code, checkIconRef: showCheckIcon })
13+
}
14+
</script>
15+
16+
<template>
17+
<div class="installation">
18+
<h1 class="my-3 text-lg font-semibold">
19+
Environment Variables
20+
</h1>
21+
<div class="code-block relative">
22+
<Highlight
23+
language="javascript"
24+
class-name="rounded-md text-xs"
25+
:autodetect="false"
26+
:code="code"
27+
/>
28+
<button
29+
aria-label="Copy code"
30+
title="Copy code"
31+
class="btn-border absolute right-2 top-2 p-1"
32+
@click="handleCopyCode"
33+
>
34+
<div v-if="showCheckIcon" class="i-heroicons-check text-gray-500" />
35+
<div v-else class="i-heroicons-document-duplicate text-gray-500" />
36+
</button>
37+
</div>
38+
</div>
39+
</template>

‎storage/framework/core/components/payment/src/components/Footer.vue

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<template>
2+
<footer
3+
class="flex-center text-primary mt-16 w-full pb-4"
4+
text="slate-900 dark:slate-300 opacity-60"
5+
>
6+
<div class="copyright flex flex-col items-center justify-center">
7+
<p>
8+
With 💙 by
9+
<a class="text-neon" href="https://github.com/chrisbbreuer">
10+
@chrisbbreuer
11+
</a>
12+
&
13+
<a class="text-neon" href="https://github.com/stacksjs/stacks">
14+
@stacksjs
15+
</a>
16+
<span> © {{ new Date().getFullYear() }}</span>
17+
</p>
18+
<div class="mt-2 flex flex-col items-center sm:flex-row space-x-1 space-y-2 sm:space-y-0">
19+
<div class="flex items-center space-x-1">
20+
<carbon:logo-twitter class="text-emerald-500" />
21+
<span>
22+
<a
23+
href="https://twitter.com/chrisbbreuer"
24+
class="text-neon"
25+
target="_blank"
26+
>
27+
Follow me on Twitter
28+
</a>
29+
</span>
30+
</div>
31+
32+
<span class="hidden px-2 text-emerald-300 sm:block">|</span>
33+
34+
<div class="flex items-center space-x-1">
35+
<carbon:cafe class="text-emerald-500" />
36+
<span>
37+
<a
38+
href="https://www.buymeacoffee.com/xlbd"
39+
target="_blank"
40+
class="text-neon"
41+
>
42+
Buy me a coffee
43+
</a>
44+
</span>
45+
</div>
46+
<span class="hidden px-2 text-emerald-300 sm:block">|</span>
47+
<div class="flex items-center space-x-1">
48+
<mdi:heart class="text-emerald-500" />
49+
<span>
50+
<a
51+
href="https://github.com/sponsors/chrisbbreuer"
52+
target="_blank"
53+
class="text-neon"
54+
>
55+
Sponsor me on GitHub
56+
</a>
57+
</span>
58+
</div>
59+
</div>
60+
</div>
61+
</footer>
62+
</template>

0 commit comments

Comments
 (0)