admin-aaw/snapify-authentik
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

remove checkout component

Browse source
This commit is contained in:
MarconLP 2023-04-20 19:26:12 +02:00
parent 200c9c2612
commit db1268ebb9
No known key found for this signature in database
GPG key ID: A08A9C8B623F5EA5
1 changed files with 0 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
src/components/Checkout.tsx
View file

@ -1,94 +0,0 @@
import { useRouter } from "next/router";
import { api } from "~/utils/api";
export default function Checkout() {
const { mutateAsync: createCheckoutSession } =
api.stripe.createCheckoutSession.useMutation();
const { push } = useRouter();
return (
<div className="flex h-full w-full items-center justify-center">
<div className="mx-auto max-w-7xl px-6 pb-14 lg:px-8">
<div className="mx-auto max-w-2xl sm:text-center">
<h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Simple no-tricks pricing
</h2>
</div>
<div className="mx-auto mt-16 max-w-2xl rounded-3xl ring-1 ring-gray-200 sm:mt-20 lg:mx-0 lg:flex lg:max-w-none">
<div className="p-8 sm:p-10 lg:flex-auto">
<h3 className="text-2xl font-bold tracking-tight text-gray-900">
Pro plan
</h3>
<p className="mt-6 text-base leading-7 text-gray-600">
Record and share unlimited videos. With this plan, you&apos;ll
have access to all powerful features that help you create and
share high-quality videos with ease.
</p>
<div className="mt-10 flex items-center gap-x-4">
<h4 className="flex-none text-sm font-semibold leading-6 text-indigo-600">
What’s included
</h4>
<div className="h-px flex-auto bg-gray-100"></div>
</div>
<ul
role="list"
className="mt-8 grid grid-cols-1 gap-4 text-sm leading-6 text-gray-600 sm:grid-cols-2 sm:gap-6"
>
{[
"Versatile screen recording: Tab, desktop, any app, camera.",
"Secure video sharing: Automatic link expiry.",
"Powerful annotation tools: Text, drawing, arrows.",
"Effortless editing: Trimming, removal of unwanted sections.",
].map((x) => (
<li key={x} className="flex gap-x-3">
<svg
className="h-6 w-5 flex-none text-indigo-600"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fillRule="evenodd"
d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
clipRule="evenodd"
/>
</svg>
{x}
</li>
))}
</ul>
</div>
<div className="-mt-2 p-2 lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0">
<div className="h-full rounded-2xl bg-gray-50 py-10 text-center ring-1 ring-inset ring-gray-900/5 lg:flex lg:flex-col lg:justify-center lg:py-16">
<div className="mx-auto max-w-xs px-8">
<p className="mt-6 flex items-baseline justify-center gap-x-2">
<span className="text-5xl font-bold tracking-tight text-gray-900">
$5
</span>
<span className="text-sm font-semibold leading-6 tracking-wide text-gray-600">
USD / mo
</span>
</p>
<button
onClick={() => {
void createCheckoutSession().then(({ checkoutUrl }) => {
if (checkoutUrl) {
void push(checkoutUrl);
}
});
}}
className="mt-10 block w-full rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
Get access
</button>
<p className="mt-6 text-xs leading-5 text-gray-600">
Invoices and receipts available for easy company reimbursement
</p>
</div>
</div>
</div>
</div>
</div>
</div>
);
}