feat: first pass at a plans page (#8)

Just get the embed working. Not super happy about how this behaves in a
responsive context, but a good start.

.env.tpl

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID=prctbl_1NzhdvF6A5ufQX5vKNZuRhie
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_51LO87hF6A5ufQX5viNsPTbuErzfavdrEFoBuaJJPfoIhzQXdOUdefwL70YewaXA32ZrSRbK4U4fqebC7SVtyeNcz00qmgNgueC

src/app/page.tsx

@@ -4,15 +4,11 @@ import { useState } from 'react'
 import { DIDKey } from '@ucanto/interface'
 import { useKeyring } from '@w3ui/react-keyring'
 
-import { AuthenticationEnsurer } from '../components/Authenticator'
-import { DefaultLayout } from '../components/Layout'
-import { SpaceEnsurer } from '../components/SpaceEnsurer'
 import { SpaceSection } from '../components/SpaceSection'
-import { SpaceSelector } from '../components/SpaceSelector'
 
 export default function Home (): JSX.Element {
   const [share, setShare] = useState(false)
-  const [{ space, spaces }, { setCurrentSpace }] = useKeyring()
+  const [, { setCurrentSpace }] = useKeyring()
 
   function viewSpace (did: DIDKey): void {
     setShare(false)

src/app/plans/page.tsx

@@ -0,0 +1,11 @@
+import Plans from '@/components/Plans'
+export default function PlansComponent () {
+  return (
+    <div className='flex flex-col items-center'>
+      <h1 className='text-4xl'>Plans</h1>
+      <div className='w-full overflow-x-scroll'>
+        <Plans />
+      </div>
+    </div>
+  )
+}

src/components/Plans.tsx

@@ -0,0 +1,15 @@
+import { createElement } from 'react'
+import Script from 'next/script'
+
+export default function Plans({className=''}) {
+  return (
+    <>
+      <Script async src="https://js.stripe.com/v3/pricing-table.js" />
+      {createElement('stripe-pricing-table', {
+        'pricing-table-id': process.env.NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID,
+        'publishable-key': process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,
+        className
+      }, '')}
+    </>
+  )
+}