ui: Redesign the settings page and move it to its own layout

1 files changed, 55 insertions, 0 deletions

diff --git a/apps/web/components/settings/DeleteApiKey.tsx b/apps/web/components/settings/DeleteApiKey.tsx
new file mode 100644
index 00000000..e2334c44
--- /dev/null
+++ b/apps/web/components/settings/DeleteApiKey.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { ActionButton } from "@/components/ui/action-button";
+import ActionConfirmingDialog from "@/components/ui/action-confirming-dialog";
+import { Button } from "@/components/ui/button";
+import { toast } from "@/components/ui/use-toast";
+import { api } from "@/lib/trpc";
+import { Trash } from "lucide-react";
+
+export default function DeleteApiKey({
+  name,
+  id,
+}: {
+  name: string;
+  id: string;
+}) {
+  const router = useRouter();
+  const mutator = api.apiKeys.revoke.useMutation({
+    onSuccess: () => {
+      toast({
+        description: "Key was successfully deleted",
+      });
+      router.refresh();
+    },
+  });
+
+  return (
+    <ActionConfirmingDialog
+      title={"Delete API Key"}
+      description={
+        <p>
+          Are you sure you want to delete the API key &quot;{name}&quot;? Any
+          service using this API key will lose access.
+        </p>
+      }
+      actionButton={(setDialogOpen) => (
+        <ActionButton
+          type="button"
+          variant="destructive"
+          loading={mutator.isPending}
+          onClick={() =>
+            mutator.mutate({ id }, { onSuccess: () => setDialogOpen(false) })
+          }
+        >
+          Delete
+        </ActionButton>
+      )}
+    >
+      <Button variant="outline">
+        <Trash size={18} color="red" />
+      </Button>
+    </ActionConfirmingDialog>
+  );
+}