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 (
+
+
+
+
+
+ Step {currentStep} of {steps.length}
+
+
+
+
+
+
+ {currentStep === 1 && (
+
+
+
+
+
+ )}
+
+ {currentStep === 2 && (
+
+
+ {/* Add buttons or dropdowns here */}
+
+
+
+
+
+ )}
+
+ {currentStep === 3 && (
+
+
+ {/* Set message content, embed, etc. here */}
+
+
+
+
+
+ )}
+
+ {currentStep === 4 && (
+
+
+ {/* Send message here */}
+
+
+
+
+
+ )}
+
+ );
+};
+
+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) {
- You can manage guild {guild.name} with id {guild.id}
+
+
+
+
+