feat: SMTP server (#47)

* WIP: SMTP server

* Card and minor changes in Server

---------

Co-authored-by: KM Koushik <koushikmohan1996@gmail.com>

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

@@ -2,15 +2,43 @@
 
 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>
-      <div className="flex justify-between items-center">
-        <h1 className="font-bold text-lg">API Keys</h1>
-        <AddApiKey />
-      </div>
-      <ApiList />
+      <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)/api-keys/smtp.tsx

@@ -0,0 +1,54 @@
+"use client";
+import * as React from "react";
+import { Code } from "@unsend/ui/src/code";
+import { Button } from "@unsend/ui/src/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@unsend/ui/src/card";
+import { TextWithCopyButton } from "@unsend/ui/src/text-with-copy";
+
+export default function ExampleCard() {
+  const smtpDetails = {
+    smtp: "smtp.example.com",
+    port: "587",
+    user: "user@example.com",
+    password: "supersecretpassword"
+  };
+
+  return (
+    <Card className="mt-9">
+      <CardHeader>
+        <CardTitle>SMTP</CardTitle>
+        <CardDescription>
+          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>
+          </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>
+          </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>
+          </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>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}