Add smtp settings ui (#56)

apps/web/src/app/(dashboard)/api-keys/page.tsx

@@ -1,44 +0,0 @@
-"use client";
-
-import ApiList from "./api-list";
-import AddApiKey from "./add-api-key";
-import Smtp from "./smtp";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@unsend/ui/src/tabs";
-import { useState } from 'react';
-
-export default function ApiKeysPage() {
-  const [activeTab, setActiveTab] = useState("apiKeys");
-  const disableSmtp = true;
-  const handleTabChange = (value: any) => {
-    if (value === "smtp" && disableSmtp) {
-      return;
-    }
-    setActiveTab(value);
-  };
-
-  return (
-    <div>
-      <Tabs defaultValue="apiKeys" value={activeTab} onValueChange={handleTabChange}>
-        <TabsList>
-          <TabsTrigger value="apiKeys">API keys</TabsTrigger>
-          <TabsTrigger
-            value="smtp"
-            className={`cursor-pointer ${disableSmtp ? 'opacity-50 pointer-events-none' : ''}`}
-          >
-            SMTP
-          </TabsTrigger>
-        </TabsList>
-        <TabsContent value="apiKeys">      
-          <div className="flex justify-between items-center">
-            <h1 className="font-bold text-lg">API Keys</h1>
-            <AddApiKey />
-          </div>
-          <ApiList />
-        </TabsContent>
-        <TabsContent value="smtp">
-          <Smtp />
-        </TabsContent>
-      </Tabs>
-    </div>
-  );
-}

apps/web/src/app/(dashboard)/dasboard-layout.tsx

@@ -76,7 +76,7 @@ export function DashboardLayout({ children }: { children: React.ReactNode }) {
                   Campaigns
                 </NavButton>
 
-                <NavButton href="/api-keys">
+                <NavButton href="/dev-settings">
                   <Code className="h-4 w-4" />
                   Developer settings
                 </NavButton>

apps/web/src/app/(dashboard)/dev-settings/api-keys/page.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import AddApiKey from "./add-api-key";
+import ApiList from "./api-list";
+
+export default function ApiKeysPage() {
+  return (
+    <div>
+      <div className="flex justify-between items-center">
+        <h2 className="font-medium">API Keys</h2>
+        <AddApiKey />
+      </div>
+      <ApiList />
+    </div>
+  );
+}

apps/web/src/app/(dashboard)/dev-settings/layout.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@unsend/ui/src/tabs";
+import { useState } from "react";
+import { SettingsNavButton } from "./settings-nav-button";
+
+export const dynamic = "force-static";
+
+export default function ApiKeysPage({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div>
+      <h1 className="font-bold text-lg">Developer settings</h1>
+      <div className="flex gap-4 mt-4">
+        <SettingsNavButton href="/dev-settings/api-keys">
+          API Keys
+        </SettingsNavButton>
+        <SettingsNavButton href="/dev-settings/smtp">SMTP</SettingsNavButton>
+      </div>
+      <div className="mt-8">{children}</div>
+    </div>
+  );
+}

apps/web/src/app/(dashboard)/dev-settings/page.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import AddApiKey from "./api-keys/add-api-key";
+import ApiList from "./api-keys/api-list";
+
+export default function ApiKeysPage() {
+  return (
+    <div>
+      <div className="flex justify-between items-center">
+        <h2 className="font-medium">API Keys</h2>
+        <AddApiKey />
+      </div>
+      <ApiList />
+    </div>
+  );
+}

apps/web/src/app/(dashboard)/dev-settings/settings-nav-button.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { LogOut } from "lucide-react";
+import { signOut } from "next-auth/react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import React from "react";
+
+export const SettingsNavButton: React.FC<{
+  href: string;
+  children: React.ReactNode;
+  comingSoon?: boolean;
+}> = ({ href, children, comingSoon }) => {
+  const pathname = usePathname();
+
+  const isActive = pathname?.startsWith(href);
+
+  if (comingSoon) {
+    return (
+      <div className="flex items-center justify-between hover:text-primary cursor-not-allowed mt-1">
+        <div
+          className={`flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary cursor-not-allowed ${isActive ? " bg-secondary" : "text-muted-foreground"}`}
+        >
+          {children}
+        </div>
+        <div className="text-muted-foreground px-4 py-0.5 text-xs bg-muted rounded-full">
+          soon
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <Link
+      href={href}
+      className={`flex text-sm items-center mt-1 gap-3 rounded px-2 py-1 transition-all hover:text-primary ${isActive ? " bg-accent" : "text-muted-foreground"}`}
+    >
+      {children}
+    </Link>
+  );
+};

apps/web/src/app/(dashboard)/dev-settings/smtp/page.tsx

@@ -17,35 +17,51 @@ export default function ExampleCard() {
     smtp: "smtp.example.com",
     port: "587",
     user: "user@example.com",
-    password: "supersecretpassword"
+    password: "supersecretpassword",
   };
 
   return (
-    <Card className="mt-9">
+    <Card className="mt-9 max-w-xl">
       <CardHeader>
         <CardTitle>SMTP</CardTitle>
         <CardDescription>
-          Send emails using SMTP instead of the REST API. See documentation for more information.
+          Send emails using SMTP instead of the REST API. See documentation for
+          more information.
         </CardDescription>
       </CardHeader>
       <CardContent>
         <div className="space-y-4">
           <div>
             <strong>Host:</strong>
-            <TextWithCopyButton className="ml-1 text-zinc-500 rounded-lg mt-1 p-2 w-full bg-gray-900" value={"smtp.unsend.dev"}></TextWithCopyButton>
+            <TextWithCopyButton
+              className="ml-1 text-zinc-500 rounded-lg mt-1 p-2 w-full bg-gray-900"
+              value={"smtp.unsend.dev"}
+            ></TextWithCopyButton>
           </div>
           <div>
             <strong>Port:</strong>
-            <TextWithCopyButton className="ml-1 text-zinc-500 rounded-lg mt-1 p-2 w-full bg-gray-900" value={"465"}></TextWithCopyButton>
-            <p className="ml-1 mt-1 text-zinc-500 ">For encrypted/TLS connections use <strong>2465</strong>, <strong>587</strong> or <strong>2587</strong></p>
+            <TextWithCopyButton
+              className="ml-1 text-zinc-500 rounded-lg mt-1 p-2 w-full bg-gray-900"
+              value={"465"}
+            ></TextWithCopyButton>
+            <p className="ml-1 mt-1 text-zinc-500 ">
+              For encrypted/TLS connections use <strong>2465</strong>,{" "}
+              <strong>587</strong> or <strong>2587</strong>
+            </p>
           </div>
           <div>
             <strong>User:</strong>
-            <TextWithCopyButton className="ml-1 text-zinc-500 rounded-lg mt-1 p-2 w-full bg-gray-900" value={"unsend"}></TextWithCopyButton>
+            <TextWithCopyButton
+              className="ml-1 text-zinc-500 rounded-lg mt-1 p-2 w-full bg-gray-900"
+              value={"unsend"}
+            ></TextWithCopyButton>
           </div>
           <div>
             <strong>Password:</strong>
-            <TextWithCopyButton className="ml-1 text-zinc-500 rounded-lg mt-1 p-2 w-full bg-gray-900" value={"YOUR_API_KEY"}></TextWithCopyButton>
+            <TextWithCopyButton
+              className="ml-1 text-zinc-500 rounded-lg mt-1 p-2 w-full bg-gray-900"
+              value={"YOUR_API_KEY"}
+            ></TextWithCopyButton>
           </div>
         </div>
       </CardContent>