feat: create chapter aside (#6)

Clement-Muth · Feb 28, 2024 · b1f83a6 · b1f83a6
1 parent 1e0a7e2
commit b1f83a6
Show file tree

Hide file tree

Showing 5 changed files with 156 additions and 81 deletions.
diff --git a/src/app/(stripe)/add-payment-methods/page.tsx b/src/app/(stripe)/add-payment-methods/page.tsx
@@ -2,78 +2,115 @@ import { Button, Divider, Link } from "@nextui-org/react";
 import { cookies } from "next/headers";
 import AddPaymentMethods from "~/app/(stripe)/add-payment-methods/views";
 import getClient from "~/app/api/getClient";
+import Chapter from "~/app/views/Chapter/Chapter";
+import PageContainer from "~/components/PageContainer/PageContainer";
 import ElementsProvider from "~/libraries/stripe/ElementsProvider";
+import onDark from "react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus";
+import { Prism } from "react-syntax-highlighter";
 
 const AddPaymentMethodPage = async () => {
   const clientId = await getClient(cookies().get("clientId")?.value);
 
   return (
     <>
-      <h1 className="font-bold text-4xl">Add your payment method</h1>
-      <p>Create a payment method to a customer.</p>
-      <div className="flex gap-4">
-        <Button
-          startContent={
-            <svg
-              height={20}
-              viewBox="0 0 24 24"
-              width={20}
-              aria-hidden="true"
-              focusable="false"
-              tabIndex={-1}
-            >
-              <title>Github</title>
-              <path
-                clip-rule="evenodd"
-                d="M12.026 2c-5.509 0-9.974 4.465-9.974 9.974 0 4.406 2.857 8.145 6.821 9.465.499.09.679-.217.679-.481 0-.237-.008-.865-.011-1.696-2.775.602-3.361-1.338-3.361-1.338-.452-1.152-1.107-1.459-1.107-1.459-.905-.619.069-.605.069-.605 1.002.07 1.527 1.028 1.527 1.028.89 1.524 2.336 1.084 2.902.829.091-.645.351-1.085.635-1.334-2.214-.251-4.542-1.107-4.542-4.93 0-1.087.389-1.979 1.024-2.675-.101-.253-.446-1.268.099-2.64 0 0 .837-.269 2.742 1.021a9.582 9.582 0 0 1 2.496-.336 9.554 9.554 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021.545 1.372.203 2.387.099 2.64.64.696 1.024 1.587 1.024 2.675 0 3.833-2.33 4.675-4.552 4.922.355.308.675.916.675 1.846 0 1.334-.012 2.41-.012 2.737 0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974 22 6.465 17.535 2 12.026 2z"
-                fill="currentColor"
-                fill-rule="evenodd"
-              />
-            </svg>
-          }
-          size="sm"
-          radius="sm"
-          as={Link}
-          href="https://github.com/Clement-Muth/nextjs-stripe/blob/master/src/app/api/attachPaymentMethod.ts"
-          isExternal
-        >
-          Source
-        </Button>
-        <Button
-          startContent={
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              height={20}
-              width={20}
-              viewBox="0 0 28.87 28.87"
-              id="stripe"
-            >
-              <title>Stripe</title>
-              <g data-name="Layer 2">
-                <g data-name="Layer 1">
-                  <rect width="28.87" height="28.87" fill="#6772e5" rx="6.48" ry="6.48" />
-                  <path
-                    fill="#fff"
-                    fill-rule="evenodd"
-                    d="M13.3 11.2c0-.69.57-1 1.49-1a9.84 9.84 0 0 1 4.37 1.13V7.24a11.6 11.6 0 0 0-4.36-.8c-3.56 0-5.94 1.86-5.94 5 0 4.86 6.68 4.07 6.68 6.17 0 .81-.71 1.07-1.68 1.07A11.06 11.06 0 0 1 9 17.25v4.19a12.19 12.19 0 0 0 4.8 1c3.65 0 6.17-1.8 6.17-5 .03-5.21-6.67-4.27-6.67-6.24z"
-                  />
+      <PageContainer>
+        <h1 className="font-bold text-4xl">Add your payment method</h1>
+        <p>Create a payment method to a customer.</p>
+        <div className="flex gap-4">
+          <Button
+            startContent={
+              <svg
+                height={20}
+                viewBox="0 0 24 24"
+                width={20}
+                aria-hidden="true"
+                focusable="false"
+                tabIndex={-1}
+              >
+                <title>Github</title>
+                <path
+                  clip-rule="evenodd"
+                  d="M12.026 2c-5.509 0-9.974 4.465-9.974 9.974 0 4.406 2.857 8.145 6.821 9.465.499.09.679-.217.679-.481 0-.237-.008-.865-.011-1.696-2.775.602-3.361-1.338-3.361-1.338-.452-1.152-1.107-1.459-1.107-1.459-.905-.619.069-.605.069-.605 1.002.07 1.527 1.028 1.527 1.028.89 1.524 2.336 1.084 2.902.829.091-.645.351-1.085.635-1.334-2.214-.251-4.542-1.107-4.542-4.93 0-1.087.389-1.979 1.024-2.675-.101-.253-.446-1.268.099-2.64 0 0 .837-.269 2.742 1.021a9.582 9.582 0 0 1 2.496-.336 9.554 9.554 0 0 1 2.496.336c1.906-1.291 2.742-1.021 2.742-1.021.545 1.372.203 2.387.099 2.64.64.696 1.024 1.587 1.024 2.675 0 3.833-2.33 4.675-4.552 4.922.355.308.675.916.675 1.846 0 1.334-.012 2.41-.012 2.737 0 .267.178.577.687.479C19.146 20.115 22 16.379 22 11.974 22 6.465 17.535 2 12.026 2z"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            }
+            size="sm"
+            radius="sm"
+            as={Link}
+            href="https://github.com/Clement-Muth/nextjs-stripe/blob/master/src/app/api/attachPaymentMethod.ts"
+            isExternal
+          >
+            Source
+          </Button>
+          <Button
+            startContent={
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                height={20}
+                width={20}
+                viewBox="0 0 28.87 28.87"
+                id="stripe"
+              >
+                <title>Stripe</title>
+                <g data-name="Layer 2">
+                  <g data-name="Layer 1">
+                    <rect width="28.87" height="28.87" fill="#6772e5" rx="6.48" ry="6.48" />
+                    <path
+                      fill="#fff"
+                      fill-rule="evenodd"
+                      d="M13.3 11.2c0-.69.57-1 1.49-1a9.84 9.84 0 0 1 4.37 1.13V7.24a11.6 11.6 0 0 0-4.36-.8c-3.56 0-5.94 1.86-5.94 5 0 4.86 6.68 4.07 6.68 6.17 0 .81-.71 1.07-1.68 1.07A11.06 11.06 0 0 1 9 17.25v4.19a12.19 12.19 0 0 0 4.8 1c3.65 0 6.17-1.8 6.17-5 .03-5.21-6.67-4.27-6.67-6.24z"
+                    />
+                  </g>
                 </g>
-              </g>
-            </svg>
-          }
-          size="sm"
-          radius="sm"
-          as={Link}
-          href="https://docs.stripe.com/api/payment_methods/create"
-          isExternal
-        >
-          Docs
-        </Button>
-      </div>
-      <Divider />
-      <ElementsProvider>
-        <AddPaymentMethods clientId={clientId.id} />
-      </ElementsProvider>
+              </svg>
+            }
+            size="sm"
+            radius="sm"
+            as={Link}
+            href="https://docs.stripe.com/api/payment_methods/create"
+            isExternal
+          >
+            Docs
+          </Button>
+        </div>
+        <Divider />
+        <ElementsProvider>
+          <AddPaymentMethods clientId={clientId.id} />
+        </ElementsProvider>
+        <section>
+          <h3 id="attach" data-id="attach" data-level={1} data-name="Attach" className="mb-4">
+            <Link href="#attach" className="text-xl font-semibold">
+              Attach
+            </Link>
+          </h3>
+          <Prism language="typescript" className="h-fit rounded-lg !bg-[rgb(14_12_12)]" style={onDark}>
+            {`await stripeClient().paymentMethods.attach(params.paymentMethodId, {
+    customer: params.customerId
+  });`}
+          </Prism>
+        </section>
+        <section>
+          <h3 id="retrieve" data-id="retrieve" data-level={1} data-name="Retrieve" className="mb-4">
+            <Link href="#retrieve" className="text-xl font-semibold">
+              Retrieve
+            </Link>
+          </h3>
+          <Prism language="typescript" className="h-fit rounded-lg !bg-[rgb(14_12_12)]" style={onDark}>
+            {`await stripeClient().paymentMethods.attach(params.paymentMethodId, {
+    customer: params.customerId
+  });`}
+          </Prism>
+        </section>
+      </PageContainer>
+      <Chapter
+        items={[
+          { href: "#attach", label: "Attach" },
+          { href: "#retrieve", label: "Retrieve" },
+          { href: "#dettach", label: "Dettach" }
+        ]}
+      />
     </>
   );
 };

diff --git a/src/app/(stripe)/layout.tsx b/src/app/(stripe)/layout.tsx
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   color: rgb(var(--foreground-rgb));
   background: linear-gradient(to bottom,
@@ -15,10 +19,6 @@ body {
   }
 }
 
-main {
-  @apply !h-[calc(100dvh-64px)]
-}
-
 .StripeElement {
   @apply px-4 py-3 bg-[rgb(244_244_245)] rounded-xl w-full shadow-sm;
 }

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -26,7 +26,6 @@ export default function RootLayout({
             <div className="grid grid-cols-[256px_1fr_256px] max-w-[1280px] px-6 w-full">
               <Aside />
               {children}
-              <Aside />
             </div>
           </div>
         </ApplicationKernel>

diff --git a/src/app/views/Chapter/Chapter.tsx b/src/app/views/Chapter/Chapter.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+import { Accordion, AccordionItem, Link, ScrollShadow } from "@nextui-org/react";
+import { ReactNode } from "react";
+import LinkNext from "next/link";
+
+export interface ChapterProps {
+  items: { href: string; label: string }[];
+}
+
+const Chapter = ({ items }: ChapterProps) => {
+  return (
+    <ScrollShadow
+      orientation="vertical"
+      className="flex flex-col h-[calc(100dvh-128px)] sticky top-[64px] w-[256px] pt-5"
+    >
+      <nav className="pl-2 pb-2">
+        <ul className="flex flex-col gap-y-4">
+          <li>
+            <Link as={LinkNext} href="/add-payment-methods" className="text-black opacity-80" scroll>
+              Introduction
+            </Link>
+          </li>
+        </ul>
+      </nav>
+      <Accordion showDivider={false} isCompact className="w-full" defaultExpandedKeys="0">
+        <AccordionItem key={0} aria-label="Accordion 0" title="Usage">
+          <nav className="pl-6 pb-2">
+            <ul className="flex flex-col gap-y-4">
+              {items.map((item) => (
+                <li>
+                  <Link
+                    as={LinkNext}
+                    href={item.href}
+                    className="text-black opacity-80"
+                    key={item.label}
+                    scroll
+                  >
+                    {item.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </AccordionItem>
+      </Accordion>
+    </ScrollShadow>
+  );
+};
+
+export default Chapter;