From a865aa55327c747ebafa191114b4f858841c2079 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jozef=20Steinh=C3=BCbl?= <xhyrom.hyro@gmail.com>
Date: Tue, 20 Aug 2024 21:14:27 +0200
Subject: [PATCH] feat: multi step form

---
 .../src/components/preact/MultiStepForm.tsx   | 128 ++++++++++++++++++
 .../src/pages/api/guild/[id]/channels.ts      |  14 ++
 .../src/pages/dashboard/guilds/[id].astro     |  17 ++-
 3 files changed, 158 insertions(+), 1 deletion(-)
 create mode 100644 apps/website/src/components/preact/MultiStepForm.tsx
 create mode 100644 apps/website/src/pages/api/guild/[id]/channels.ts

diff --git a/apps/website/src/components/preact/MultiStepForm.tsx b/apps/website/src/components/preact/MultiStepForm.tsx
new file mode 100644
index 0000000..186ca47
--- /dev/null
+++ b/apps/website/src/components/preact/MultiStepForm.tsx
@@ -0,0 +1,128 @@
+import { useState, useEffect } from "preact/hooks";
+
+const steps = [
+  { id: 1, name: "Select Channel" },
+  { id: 2, name: "Add Buttons/Dropdowns" },
+  { id: 3, name: "Set Message Content" },
+  { id: 4, name: "Send" },
+];
+
+const MultiStepForm = ({ guildId }) => {
+  const [currentStep, setCurrentStep] = useState(1);
+  const [channels, setChannels] = useState([]);
+
+  useEffect(() => {
+    fetch(`/api/guild/${guildId}/channels`)
+      .then((response) => response.json())
+      .then((data) => setChannels(data));
+  }, [guildId]);
+
+  const nextStep = () => {
+    setCurrentStep((prevStep) => Math.min(prevStep + 1, steps.length));
+  };
+
+  const prevStep = () => {
+    setCurrentStep((prevStep) => Math.max(prevStep - 1, 1));
+  };
+
+  return (
+    <div className="mx-auto w-full max-w-lg rounded-lg bg-gray-800 p-6 text-white shadow-lg">
+      <div className="relative pt-1">
+        <div className="mb-2 flex items-center justify-between">
+          <div className="text-right">
+            <span className="inline-block text-xs font-semibold text-green-400">
+              Step {currentStep} of {steps.length}
+            </span>
+          </div>
+        </div>
+        <div className="mb-4 flex h-2 overflow-hidden rounded bg-gray-700 text-xs">
+          <div
+            style={{ width: `${(currentStep / steps.length) * 100}%` }}
+            className="flex flex-col justify-center whitespace-nowrap bg-green-500 text-center text-white shadow-none"
+          ></div>
+        </div>
+      </div>
+
+      {currentStep === 1 && (
+        <div>
+          <label className="mb-2 block">Select Channel:</label>
+          <select className="mb-4 w-full rounded border border-gray-600 bg-gray-700 p-2">
+            {channels.map((channel) => (
+              <option key={channel.id} value={channel.id}>
+                {channel.name}
+              </option>
+            ))}
+          </select>
+          <button
+            onClick={nextStep}
+            className="mt-4 w-full rounded bg-white px-4 py-2 text-gray-800 hover:bg-gray-200"
+          >
+            Next
+          </button>
+        </div>
+      )}
+
+      {currentStep === 2 && (
+        <div>
+          <label className="mb-2 block">Add Buttons/Dropdowns:</label>
+          {/* Add buttons or dropdowns here */}
+          <div className="flex justify-between">
+            <button
+              onClick={prevStep}
+              className="mt-4 w-full rounded bg-gray-600 px-4 py-2 text-white hover:bg-gray-700"
+            >
+              Back
+            </button>
+            <button
+              onClick={nextStep}
+              className="mt-4 w-full rounded bg-white px-4 py-2 text-gray-800 hover:bg-gray-200"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      )}
+
+      {currentStep === 3 && (
+        <div>
+          <label className="mb-2 block">Set Message Content:</label>
+          {/* Set message content, embed, etc. here */}
+          <div className="flex justify-between">
+            <button
+              onClick={prevStep}
+              className="mt-4 w-full rounded bg-gray-600 px-4 py-2 text-white hover:bg-gray-700"
+            >
+              Back
+            </button>
+            <button
+              onClick={nextStep}
+              className="mt-4 w-full rounded bg-white px-4 py-2 text-gray-800 hover:bg-gray-200"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      )}
+
+      {currentStep === 4 && (
+        <div>
+          <label className="mb-2 block">Review and Send:</label>
+          {/* Send message here */}
+          <div className="flex justify-between">
+            <button
+              onClick={prevStep}
+              className="mt-4 w-full rounded bg-gray-600 px-4 py-2 text-white hover:bg-gray-700"
+            >
+              Back
+            </button>
+            <button className="mt-4 w-full rounded bg-white px-4 py-2 text-gray-800 hover:bg-gray-200">
+              Send
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MultiStepForm;
diff --git a/apps/website/src/pages/api/guild/[id]/channels.ts b/apps/website/src/pages/api/guild/[id]/channels.ts
new file mode 100644
index 0000000..828ed55
--- /dev/null
+++ b/apps/website/src/pages/api/guild/[id]/channels.ts
@@ -0,0 +1,14 @@
+import type { APIRoute } from "astro";
+import { filterUserGuilds, getUserGuilds } from "~/lib/guilds";
+
+export const GET: APIRoute = async ({ locals }) => {
+  const user = locals.user;
+  if (!user) {
+    return new Response(null, {
+      status: 401,
+    });
+  }
+
+  console.log(user);
+  return Response.json([]);
+};
diff --git a/apps/website/src/pages/dashboard/guilds/[id].astro b/apps/website/src/pages/dashboard/guilds/[id].astro
index fa2a750..cac9cb2 100644
--- a/apps/website/src/pages/dashboard/guilds/[id].astro
+++ b/apps/website/src/pages/dashboard/guilds/[id].astro
@@ -1,6 +1,7 @@
 ---
 import GuildInfo from "~/components/dashboard/GuildInfo.astro";
 import UserInfo from "~/components/dashboard/UserInfo.astro";
+import MultiStepForm from "~/components/preact/MultiStepForm";
 import Layout from "~/layouts/Layout.astro";
 import { getGuild } from "~/lib/guilds";
 import { isUserEligible } from "~/lib/user";
@@ -32,5 +33,19 @@ if (!eligible) {
     <GuildInfo id={guild.id} name={guild.name} icon={guild.icon} />
   </div>
 
-  You can manage guild {guild.name} with id {guild.id}
+  <div class="mx-auto mt-8 w-full max-w-lg">
+    <MultiStepForm guildId={guild.id} client:load />
+  </div>
+
+  <style>
+    .step {
+      padding: 10px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+    }
+    .step.active {
+      background-color: #4caf50;
+      color: white;
+    }
+  </style>
 </Layout>