improved LocalIndex

fiberinc · May 7, 2024 · a94173e · a94173e
1 parent 3ae4de7
commit a94173e
Showing 1 changed file with 42 additions and 25 deletions.
diff --git a/app/app/(index)/LocalIndex.tsx b/app/app/(index)/LocalIndex.tsx
@@ -8,44 +8,61 @@ export async function LocalIndex() {
 
   const els = handlers.map((handler) => {
     const base = `/auth/${handler.id}/redirect`;
-    let args = "state=1234567890&callback_uri=http://localhost:3000/done";
+    let args = "state=12345&callback_uri=http://localhost:3000/done";
 
     // Shopify redirection consumes a 'shop' field to identify the shop for its
     // own redirection.
     if (handler.id === "shopify") {
-      args += "&extras.shop=hahvaleu.myshopify.com";
+      args += "&extras.shop=example.myshopify.com";
     }
 
     return (
       <li
         key={handler.id}
-        className="flex flex-col gap-3 border bg-gray-50 p-5"
+        className="relative flex w-full flex-col gap-5 rounded-lg border bg-gray-50 p-5"
       >
-        <p className="flex flex-row items-center gap-3">
+        <p className="flex flex-row items-center gap-2">
           <img
             className="inline-block"
             src={handler.provider.logo}
-            width={18}
+            width={20}
             alt=""
           />
           <strong className="font-medium">{handler.provider.title}</strong>{" "}
-          <span
-            className={twMerge(
-              "italic",
-              handler.id === handler.provider.id && "opacity-30",
-            )}
-          >
-            id: {handler.id}
-          </span>
         </p>
-        <p className="group text-sm">
-          Example redirection URL:{" "}
-          <a href={`${base}?${args}`} target="blank">
-            <span>{base}</span>
-            <span className="opacity-10 transition group-hover:opacity-100">
-              ?{args}
-            </span>
-          </a>
+        <div
+          className={twMerge(
+            "absolute right-5 top-4",
+            "font-mono text-sm [word-spacing:-5px]",
+            handler.id === handler.provider.id && "opacity-30",
+          )}
+        >
+          id: {handler.id}
+        </div>
+        <p className="">
+          Send users to:
+          <br />
+          <code className="text-sm">
+            <a href={`${base}?${args}`} target="blank" className="group">
+              <span>https://YOUR_HANDSHAKE_INSTANCE{base}</span>
+              <br />
+              <div className="ml-6 block w-fit opacity-70 transition group-hover:opacity-100">
+                {args.split("&").map((arg, index) => (
+                  <div key={index}>
+                    {index > 0 ? "&" : "?"}
+                    {arg}
+                  </div>
+                ))}
+              </div>
+            </a>
+          </code>
+        </p>
+        <p>
+          Authorize this callback URL in the Notion console:
+          <br />
+          <code className="text-sm">
+            https://YOUR_HANDSHAKE_INSTANCE/auth/{handler.id}/callback
+          </code>
         </p>
       </li>
     );
@@ -56,12 +73,12 @@ export async function LocalIndex() {
     main = (
       <>
         <p>The following handlers are configured:</p>
-        <ul className="flex flex-col gap-5">{els}</ul>
+        <ul className="flex w-full flex-col gap-5">{els}</ul>
       </>
     );
   } else {
     main = (
-      <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-3 ">
         <h2 className="font-semibold">No providers are configured</h2>
         <h3 className="mb-3">
           Add the following code to your <code>app/options.ts</code>
@@ -82,12 +99,12 @@ export async function LocalIndex() {
 
   return (
     <main
-      className={`justify-top flex min-h-screen flex-col items-start gap-8 p-8`}
+      className={`justify-top flex min-h-screen w-full flex-col items-start gap-8 p-8`}
     >
       <section>
         <h2 className="text-lg font-semibold">Handshake is running</h2>
       </section>
-      <main className="flex flex-col gap-4">{main}</main>
+      <main className="flex w-[800px] max-w-full flex-col gap-4">{main}</main>
       <p>
         Stuck? Get help{" "}
         <a href={REPO_URL} target="_blank">