From 64cc90095375ebd126603fc0303069a4e7810cd2 Mon Sep 17 00:00:00 2001
From: Aidan Honor <aidan@p0ntus.com>
Date: Wed, 12 Mar 2025 14:48:25 -0400
Subject: [PATCH] feat: add support page

---
 app/account/dashboard/support/page.tsx        | 61 +++++++++++++++++++
 .../cards/dashboard/overview/QuickLinks.tsx   |  2 +-
 components/pages/dashboard/SideMenu.tsx       |  2 +-
 3 files changed, 63 insertions(+), 2 deletions(-)
 create mode 100644 app/account/dashboard/support/page.tsx

diff --git a/app/account/dashboard/support/page.tsx b/app/account/dashboard/support/page.tsx
new file mode 100644
index 0000000..3433449
--- /dev/null
+++ b/app/account/dashboard/support/page.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import { motion } from "framer-motion"
+import { SideMenu } from "@/components/pages/dashboard/SideMenu"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Copy, ExternalLink, Mail } from "lucide-react"
+
+const fadeIn = {
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.4 },
+}
+
+export default function Support() {
+  return (
+    <div className="flex flex-1 overflow-hidden">
+      <SideMenu />
+      <main className="flex-1 w-full overflow-y-auto pl-0 lg:pl-64">
+        <div className="container mx-auto px-4 py-6 w-full">
+          <motion.div {...fadeIn}>
+            <h1 className="text-3xl font-bold mb-6 text-foreground">Support</h1>
+            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+              <Card className="col-span-full md:col-span-1">
+                <CardHeader>
+                  <CardTitle className="flex items-center text-2xl">
+                    <Mail size={24} className="mr-1.5" />
+                    Email
+                  </CardTitle>
+                  <CardDescription>Create a ticket by sending an email</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <span className="text-sm">You can either send a message to the address below, or click the button.</span>
+                  <div className="flex w-full max-w-sm items-center space-x-2 mt-2">
+                    <Input value="support@librecloud.cc" disabled />
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      onClick={() => navigator.clipboard.writeText(process.env.NEXT_PUBLIC_SUPPORT_EMAIL || "support@librecloud.cc") }
+                    >
+                      <Copy size={16} />
+                    </Button>
+                  </div>
+                  <Button
+                    className="mt-4"
+                    onClick={() => window.location.href = 'mailto:' + (process.env.NEXT_PUBLIC_SUPPORT_EMAIL || "support@librecloud.cc")}
+                  >
+                    <ExternalLink />
+                    Open in Email Client
+                  </Button>
+                </CardContent>
+              </Card>
+            </div>
+          </motion.div>
+        </div>
+      </main>
+    </div>
+  )
+}
+
diff --git a/components/cards/dashboard/overview/QuickLinks.tsx b/components/cards/dashboard/overview/QuickLinks.tsx
index 6e540cb..28aa2ff 100644
--- a/components/cards/dashboard/overview/QuickLinks.tsx
+++ b/components/cards/dashboard/overview/QuickLinks.tsx
@@ -14,7 +14,7 @@ export const QuickLinks = () => {
       </CardHeader>
       <CardContent>
         <Link
-          href="mailto:support@librecloud.cc"
+          href="/account/dashboard/support"
         >
           <Button
             className="w-full mb-2"
diff --git a/components/pages/dashboard/SideMenu.tsx b/components/pages/dashboard/SideMenu.tsx
index b9fd157..6a1e00b 100644
--- a/components/pages/dashboard/SideMenu.tsx
+++ b/components/pages/dashboard/SideMenu.tsx
@@ -149,7 +149,7 @@ export const SideMenu: React.FC = () => {
 
                 <SidebarMenuItem>
                   <SidebarMenuButton asChild>
-                    <Link href="mailto:support@librecloud.cc">
+                    <Link href="/account/dashboard/support">
                       <Headset />
                       <span>Support</span>
                     </Link>