refactor: decompose stepper into smaller components

components/InstallStepper/CloudAccountContent.tsx

@@ -0,0 +1,52 @@
+import {
+  Accordion,
+  AccordionHeader,
+  AccordionBody,
+} from "@material-tailwind/react";
+import {
+  AWSInstallerFormFields,
+  AzureInstallerFormFields,
+  StepOneAWS,
+  StepOneAzure,
+  Card,
+} from "@/components";
+
+export const CloudAccountContent = ({
+  app = { cloud_platform: "aws" },
+  open = false,
+  onClick = () => {},
+  searchParams = {},
+  regions = [],
+}) => (
+  <Accordion open={open}>
+    {app.cloud_platform === "aws" && (
+      <>
+        <AccordionHeader onClick={onClick}>AWS IAM Role</AccordionHeader>
+        <AccordionBody className="grid grid-cols-2 gap-4">
+          <StepOneAWS app={app} />
+          <Card>
+            <AWSInstallerFormFields
+              searchParams={searchParams}
+              regions={regions}
+            />
+          </Card>
+        </AccordionBody>
+      </>
+    )}
+
+    {app?.cloud_platform === "azure" && (
+      <>
+        <AccordionHeader onClick={onClick}>Azure Account</AccordionHeader>
+        <AccordionBody className="grid grid-cols-2 gap-4">
+          <StepOneAzure />
+          <Card>
+            <AzureInstallerFormFields
+              searchParams={searchParams}
+              regions={regions}
+            />
+          </Card>
+        </AccordionBody>
+      </>
+    )}
+  </Accordion>
+);

components/InstallStepper/CompanyContent.tsx

@@ -0,0 +1,34 @@
+import {
+  Accordion,
+  AccordionHeader,
+  AccordionBody,
+  Card,
+} from "@material-tailwind/react";
+
+export const CompanyContent = ({
+  open = false,
+  onClick = () => {},
+  searchParams = {},
+}) => (
+  <Accordion open={open}>
+    <AccordionHeader onClick={onClick}>Company Info</AccordionHeader>
+    <AccordionBody>
+      <Card>
+        <fieldset className="p-4 w-full">
+          <label className="flex flex-col flex-auto gap-2">
+            <span className="text-sm font-medium">Name</span>
+            <input
+              className="border bg-inherit rounded px-4 py-1.5 shadow-inner"
+              defaultValue={
+                Object.hasOwn(searchParams, "name") ? searchParams?.name : ""
+              }
+              name="name"
+              type="text"
+              required
+            />
+          </label>
+        </fieldset>
+      </Card>
+    </AccordionBody>
+  </Accordion>
+);

components/InstallStepper/ErrorAlert.tsx

@@ -0,0 +1,7 @@
+import { Alert } from "@material-tailwind/react";
+
+export const ErrorAlert = ({ children }) => (
+  <div className="fixed w-full right-0 bottom-0 left-0 p-4">
+    <Alert color="red">{children}</Alert>
+  </div>
+);

components/InstallStepper/GroupContent.tsx

@@ -0,0 +1,25 @@
+import {
+  Accordion,
+  AccordionHeader,
+  AccordionBody,
+} from "@material-tailwind/react";
+import { InputFields, Card } from "@/components";
+
+export const GroupContent = ({
+  group = { display_name: "" },
+  idx = 0,
+  activeStep = 0,
+  setActiveStep = (idx = 0) => {},
+  searchParams = {},
+}) => (
+  <Accordion key={idx} open={activeStep === idx + 2}>
+    <AccordionHeader onClick={() => setActiveStep(idx + 2)}>
+      {group.display_name}
+    </AccordionHeader>
+    <AccordionBody>
+      <Card>
+        <InputFields group={group} searchParams={searchParams} />
+      </Card>
+    </AccordionBody>
+  </Accordion>
+);

components/InstallStepper/InstallButton.tsx

@@ -0,0 +1,19 @@
+import { Button } from "@material-tailwind/react";
+
+export const InstallButton = ({ install }) => {
+  const loading = install.status === "provisioning";
+
+  let label = "Create Install";
+  if (install.id.length > 0) label = "Update Install";
+  if (loading) label = "Provisioning";
+
+  return (
+    <Button
+      loading={loading}
+      type="submit"
+      className="block mr-0 ml-auto rounded text-sm text-gray-50 bg-primary-600 hover:bg-primary-700 focus:bg-primary-700 active:bg-primary-800 px-4 py-1.5 mt-4"
+    >
+      {label}
+    </Button>
+  );
+};

components/InstallStepper/InstallStatusContent.tsx

@@ -0,0 +1,48 @@
+import {
+  Accordion,
+  AccordionHeader,
+  AccordionBody,
+} from "@material-tailwind/react";
+import showdown from "showdown";
+import { InstallStatus } from "./InstallStatus";
+import { StatusIcon } from "@/components";
+import { InstallButton } from "./InstallButton";
+
+const markdown = new showdown.Converter();
+
+export const InstallStatusContent = ({
+  open = false,
+  onClick = () => {},
+  install = {
+    status: "",
+    status_description: "",
+  },
+  post_install_markdown = "",
+}) => (
+  <Accordion open={open}>
+    <AccordionHeader onClick={onClick}>
+      <span>
+        Install Status <StatusIcon status={install.status} />{" "}
+        <span className="text-sm font-medium">
+          {install.status_description}
+        </span>
+      </span>
+    </AccordionHeader>
+    <AccordionBody>
+      <div className="grid grid-cols-2 gap-2">
+        <div>
+          <div
+            dangerouslySetInnerHTML={{
+              __html: markdown.makeHtml(post_install_markdown),
+            }}
+          />
+        </div>
+
+        <div>
+          <InstallStatus install={install} />
+          <InstallButton install={install} />
+        </div>
+      </div>
+    </AccordionBody>
+  </Accordion>
+);

components/InstallStepper/NavArrows.tsx

@@ -0,0 +1,51 @@
+import { IconButton } from "@material-tailwind/react";
+
+export const NavArrows = ({
+  handlePrev = () => {},
+  isFirstStep = false,
+  handleNext = () => {},
+  isLastStep = () => {},
+}) => (
+  <div className="absolute -left-8 -right-8 top-1/2 flex justify-between">
+    <IconButton
+      className="rounded-full"
+      onClick={handlePrev}
+      disabled={isFirstStep}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        stroke="currentColor"
+        className="size-6"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M15.75 19.5 8.25 12l7.5-7.5"
+        />
+      </svg>
+    </IconButton>
+    <IconButton
+      className="rounded-full"
+      onClick={handleNext}
+      disabled={isLastStep}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        stroke="currentColor"
+        className="size-6"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="m8.25 4.5 7.5 7.5-7.5 7.5"
+        />
+      </svg>
+    </IconButton>
+  </div>
+);