update dependencies

notrab · Aug 14, 2024 · 154af29 · 154af29
1 parent 1fbd35e
commit 154af29
Show file tree

Hide file tree

Showing 11 changed files with 867 additions and 699 deletions.
diff --git a/app/(authenticated)/dashboard/dump.tsx b/app/(authenticated)/dashboard/dump.tsx
diff --git a/app/(authenticated)/dashboard/form.tsx b/app/(authenticated)/dashboard/form.tsx
@@ -16,7 +16,7 @@ export function Form() {
         await addTodo(formData);
         formRef.current?.reset();
       }}
-      className="flex items-center justify-between rounded-md bg-neutral-500 p-6 shadow-sm"
+      className="flex items-center justify-between rounded bg-brunswick-green p-6 shadow-sm"
       ref={formRef}
     >
       <div className="flex w-full items-center space-x-3">
@@ -25,7 +25,7 @@ export function Form() {
           id="description"
           name="description"
           placeholder="Insert new todo"
-          className="w-full text-white bg-neutral-500 placeholder:text-white outline-none"
+          className="w-full text-white bg-transparent placeholder:text-white/30 outline-none"
           required
           aria-label="Description of todo"
           type="text"

diff --git a/app/(authenticated)/dashboard/page.tsx b/app/(authenticated)/dashboard/page.tsx
@@ -4,6 +4,12 @@ import { Form } from "./form";
 export default async function Page() {
   return (
     <div className="space-y-3">
+      <div className="pb-6 text-center">
+        <h1 className="text-3xl font-black tracking-tight text-white">Todos</h1>
+        <p className="text-white/60">
+          The todos you add below are created inside your own database.
+        </p>
+      </div>
       <Todos />
       <Form />
     </div>

diff --git a/app/(authenticated)/dashboard/todo.tsx b/app/(authenticated)/dashboard/todo.tsx
@@ -11,7 +11,7 @@ export function Todo({ item }: { item: Todo }) {
   const [_, startTransition] = useTransition();
 
   return (
-    <li className="flex items-center justify-between rounded-md bg-neutral-800 p-6 text-white">
+    <li className="flex items-center justify-between rounded bg-white/5 p-6 text-white">
       <div className="flex w-full items-center space-x-3 ">
         <button
           className="p-1 text-3xl"
@@ -22,14 +22,27 @@ export function Todo({ item }: { item: Todo }) {
         <span className="flex-1">{item.description}</span>
       </div>
       <button
-        className="p-1 text-3xl"
+        className="p-1 flex items-center justify-between transition hover:bg-white/10 rounded"
         onClick={() => {
           startTransition(() => {
             removeTodo(item.id);
           });
         }}
       >
-        &times;
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="size-6"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M6 18 18 6M6 6l12 12"
+          />
+        </svg>
       </button>
     </li>
   );

diff --git a/app/(authenticated)/header.tsx b/app/(authenticated)/header.tsx
@@ -0,0 +1,30 @@
+import { UserButton } from "./user-button";
+
+export function Header() {
+  return (
+    <header className="border-b border-white/5">
+      <div className="max-w-2xl mx-auto px-6">
+        <div className="flex justify-between items-center h-20">
+          <div className="flex items-center gap-x-3">
+            <div className="flex items-center gap-3 text-aquamarine">
+              <svg
+                viewBox="0 0 201 170"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-6"
+                aria-hidden="true"
+              >
+                <path
+                  d="M200.035 48.61C195.365 20.67 170.875 0 170.875 0V30.78L156.335 34.53L147.225 23.56L142.415 33.02C132.495 30.32 118.835 28.58 100.045 28.58C81.2549 28.58 67.5949 30.33 57.6749 33.02L52.8649 23.56L43.7549 34.53L29.2149 30.78V0C29.2149 0 4.72493 20.67 0.0549316 48.61L32.1949 59.73C33.2449 79.16 41.9849 131.61 44.4849 136.37C47.1449 141.44 61.2649 155.93 72.3149 161.5C72.3149 161.5 76.3149 157.27 78.7549 153.54C81.8549 157.19 97.8649 169.99 100.055 169.99C102.245 169.99 118.255 157.2 121.355 153.54C123.795 157.27 127.795 161.5 127.795 161.5C138.845 155.93 152.965 141.44 155.625 136.37C158.125 131.61 166.865 79.16 167.915 59.73L200.055 48.61H200.035ZM153.845 93.35L132.095 95.29L134.005 121.96C134.005 121.96 120.775 132.91 100.045 132.91C79.3149 132.91 66.0849 121.96 66.0849 121.96L67.9949 95.29L46.2449 93.35L42.5249 63.31L78.5749 75.79L75.7749 113.18C82.4749 114.88 89.5249 116.57 100.055 116.57C110.585 116.57 117.625 114.88 124.325 113.18L121.525 75.79L157.575 63.31L153.855 93.35H153.845Z"
+                  fill="currentColor"
+                ></path>
+              </svg>
+            </div>
+          </div>
+
+          <UserButton />
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/app/(authenticated)/layout.tsx b/app/(authenticated)/layout.tsx
@@ -1,8 +1,7 @@
 import { redirect } from "next/navigation";
 
 import { checkDatabaseExists } from "../utils";
-import { UserButton } from "@clerk/nextjs";
-import { Dump } from "./dashboard/dump";
+import { Header } from "./header";
 
 export default async function Layout({
   children,
@@ -15,35 +14,8 @@ export default async function Layout({
 
   return (
     <>
-      <header>
-        <div className="max-w-5xl mx-auto px-6">
-          <div className="flex justify-between items-center h-32">
-            <div className="flex items-center gap-x-3">
-              <div className="flex items-center gap-3 text-[#4FF8D2]">
-                <svg
-                  viewBox="0 0 201 170"
-                  fill="none"
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-6"
-                  aria-hidden="true"
-                >
-                  <path
-                    d="M200.035 48.61C195.365 20.67 170.875 0 170.875 0V30.78L156.335 34.53L147.225 23.56L142.415 33.02C132.495 30.32 118.835 28.58 100.045 28.58C81.2549 28.58 67.5949 30.33 57.6749 33.02L52.8649 23.56L43.7549 34.53L29.2149 30.78V0C29.2149 0 4.72493 20.67 0.0549316 48.61L32.1949 59.73C33.2449 79.16 41.9849 131.61 44.4849 136.37C47.1449 141.44 61.2649 155.93 72.3149 161.5C72.3149 161.5 76.3149 157.27 78.7549 153.54C81.8549 157.19 97.8649 169.99 100.055 169.99C102.245 169.99 118.255 157.2 121.355 153.54C123.795 157.27 127.795 161.5 127.795 161.5C138.845 155.93 152.965 141.44 155.625 136.37C158.125 131.61 166.865 79.16 167.915 59.73L200.055 48.61H200.035ZM153.845 93.35L132.095 95.29L134.005 121.96C134.005 121.96 120.775 132.91 100.045 132.91C79.3149 132.91 66.0849 121.96 66.0849 121.96L67.9949 95.29L46.2449 93.35L42.5249 63.31L78.5749 75.79L75.7749 113.18C82.4749 114.88 89.5249 116.57 100.055 116.57C110.585 116.57 117.625 114.88 124.325 113.18L121.525 75.79L157.575 63.31L153.855 93.35H153.845Z"
-                    fill="currentColor"
-                  ></path>
-                </svg>
-                <span className="text-sm font-medium select-none">
-                  Turso Platforms Starter
-                </span>
-              </div>
-              <Dump />
-            </div>
-
-            <UserButton />
-          </div>
-        </div>
-      </header>
-      <div className="max-w-5xl mx-auto px-6 py-12">{children}</div>
+      <Header />
+      <div className="max-w-2xl mx-auto px-6 py-12">{children}</div>
     </>
   );
 }
diff --git a/app/(authenticated)/user-button.tsx b/app/(authenticated)/user-button.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { UserButton as ClerkUserButton } from "@clerk/nextjs";
+
+const DownloadIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+    >
+      <path
+        fillRule="evenodd"
+        d="M12 2.25a.75.75 0 0 1 .75.75v11.69l3.22-3.22a.75.75 0 1 1 1.06 1.06l-4.5 4.5a.75.75 0 0 1-1.06 0l-4.5-4.5a.75.75 0 1 1 1.06-1.06l3.22 3.22V3a.75.75 0 0 1 .75-.75Zm-9 13.5a.75.75 0 0 1 .75.75v2.25a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5V16.5a.75.75 0 0 1 1.5 0v2.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V16.5a.75.75 0 0 1 .75-.75Z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+const GithubIcon = () => {
+  return (
+    <svg viewBox="0 0 256 250" xmlns="http://www.w3.org/2000/svg">
+      <path d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46 6.397 1.185 8.746-2.777 8.746-6.158 0-3.052-.12-13.135-.174-23.83-35.61 7.742-43.124-15.103-43.124-15.103-5.823-14.795-14.213-18.73-14.213-18.73-11.613-7.944.876-7.78.876-7.78 12.853.902 19.621 13.19 19.621 13.19 11.417 19.568 29.945 13.911 37.249 10.64 1.149-8.272 4.466-13.92 8.127-17.116-28.431-3.236-58.318-14.212-58.318-63.258 0-13.975 5-25.394 13.188-34.358-1.329-3.224-5.71-16.242 1.24-33.874 0 0 10.749-3.44 35.21 13.121 10.21-2.836 21.16-4.258 32.038-4.307 10.878.049 21.837 1.47 32.066 4.307 24.431-16.56 35.165-13.12 35.165-13.12 6.967 17.63 2.584 30.65 1.255 33.873 8.207 8.964 13.173 20.383 13.173 34.358 0 49.163-29.944 59.988-58.447 63.157 4.591 3.972 8.682 11.762 8.682 23.704 0 17.126-.148 30.91-.148 35.126 0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002 256 57.307 198.691 0 128.001 0Zm-80.06 182.34c-.282.636-1.283.827-2.194.39-.929-.417-1.45-1.284-1.15-1.922.276-.655 1.279-.838 2.205-.399.93.418 1.46 1.293 1.139 1.931Zm6.296 5.618c-.61.566-1.804.303-2.614-.591-.837-.892-.994-2.086-.375-2.66.63-.566 1.787-.301 2.626.591.838.903 1 2.088.363 2.66Zm4.32 7.188c-.785.545-2.067.034-2.86-1.104-.784-1.138-.784-2.503.017-3.05.795-.547 2.058-.055 2.861 1.075.782 1.157.782 2.522-.019 3.08Zm7.304 8.325c-.701.774-2.196.566-3.29-.49-1.119-1.032-1.43-2.496-.726-3.27.71-.776 2.213-.558 3.315.49 1.11 1.03 1.45 2.505.701 3.27Zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033-1.448-.439-2.395-1.613-2.103-2.626.301-1.01 1.747-1.484 3.207-1.028 1.446.436 2.396 1.602 2.095 2.622Zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95-1.53.034-2.769-.82-2.786-1.86 0-1.065 1.202-1.932 2.733-1.958 1.522-.03 2.768.818 2.768 1.868Zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37-1.485.271-2.861-.365-3.05-1.386-.184-1.056.893-2.114 2.376-2.387 1.514-.263 2.868.356 3.061 1.403Z" />
+    </svg>
+  );
+};
+
+export function UserButton() {
+  return (
+    <header>
+      <ClerkUserButton>
+        <ClerkUserButton.MenuItems>
+          <ClerkUserButton.Link
+            labelIcon={<DownloadIcon />}
+            label="Download my data"
+            href="/dump.sql"
+          />
+          <ClerkUserButton.Link
+            labelIcon={<GithubIcon />}
+            label="Star repository"
+            href="https://github.com/notrab/turso-platforms-starter"
+          />
+        </ClerkUserButton.MenuItems>
+      </ClerkUserButton>
+    </header>
+  );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -4,7 +4,7 @@ import { ClerkProvider } from "@clerk/nextjs";
 
 import "./globals.css";
 
-const inter = Inter({ subsets: ["latin"] });
+const inter = Inter({ subsets: ["latin"], display: "swap" });
 
 export const metadata: Metadata = {
   title: "Turso Platforms Starter",
@@ -19,19 +19,8 @@ export default function RootLayout({
   return (
     <ClerkProvider>
       <html lang="en">
-        <body className={`bg-neutral-900 overscroll-none ${inter.className}`}>
+        <body className={`bg-rich-black overscroll-none ${inter.className}`}>
           {children}
-
-          <div className="text-center">
-            <a
-              href="https://github.com/notrab/turso-platforms-starter"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-white hover:text-[#4FF8D2] transition"
-            >
-              Get the code
-            </a>
-          </div>
         </body>
       </html>
     </ClerkProvider>