AWS Cloudscape Design System.

import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import Wizard from "@cloudscape-design/components/wizard";
import Container from "@cloudscape-design/components/container";
import Header from "@cloudscape-design/components/header";
import FormField from "@cloudscape-design/components/form-field";
import Input from "@cloudscape-design/components/input";
import Select from "@cloudscape-design/components/select";
import SpaceBetween from "@cloudscape-design/components/space-between";
import ColumnLayout from "@cloudscape-design/components/column-layout";
import Box from "@cloudscape-design/components/box";
import Button from "@cloudscape-design/components/button";
import Alert from "@cloudscape-design/components/alert";
import Toggle from "@cloudscape-design/components/toggle";
import { applyMode, Mode } from "@cloudscape-design/global-styles";
import "@cloudscape-design/global-styles/index.css";
import "./cloudscape.css";
const sizes = [
  { label: "Development · 2 vCPU / 4 GiB", value: "dev" },
  { label: "Standard · 4 vCPU / 8 GiB", value: "standard" },
  { label: "Compute · 8 vCPU / 16 GiB", value: "compute" },
];
function App() {
  const [name, setName] = useState("analytics-sandbox"),
    [size, setSize] = useState(sizes[0]),
    [step, setStep] = useState(0),
    [error, setError] = useState(""),
    [complete, setComplete] = useState(false),
    [dark, setDark] = useState(false);
  function next(index) {
    if (index > 0 && !/^[a-z][a-z0-9-]{2,29}$/.test(name)) {
      setError(
        "Use 3–30 lowercase letters, numbers or hyphens, starting with a letter.",
      );
      return;
    }
    setError("");
    setStep(index);
  }
  function reset() {
    setStep(0);
    setComplete(false);
    setError("");
    setName("analytics-sandbox");
    setSize(sizes[0]);
  }
  return (
    <main className="awsui-typography cloudscape-example">
      <div className="appearance">
        <span>CLOUDSCAPE · RESOURCE CONFIGURATION</span>
        <Toggle
          checked={dark}
          onChange={({ detail }) => {
            setDark(detail.checked);
            applyMode(detail.checked ? Mode.Dark : Mode.Light);
          }}
        >
          Dark mode
        </Toggle>
      </div>
      <Header
        variant="h1"
        description="Configure a fictional compute workspace. This example does not create a cloud resource."
      >
        Create a workspace
      </Header>
      <div className="wizard-content">
        {complete ? (
          <SpaceBetween size="l">
            <Alert type="success" header="Configuration confirmed locally">
              The {name} recipe is ready for review. No cloud API was called and
              no resource was provisioned.
            </Alert>
            <Container header={<Header variant="h2">Workspace recipe</Header>}>
              <ColumnLayout columns={2} variant="text-grid">
                <div>
                  <Box variant="awsui-key-label">Name</Box>
                  {name}
                </div>
                <div>
                  <Box variant="awsui-key-label">Capacity</Box>
                  {size.label}
                </div>
              </ColumnLayout>
            </Container>
            <Button onClick={reset}>Start another example</Button>
          </SpaceBetween>
        ) : (
          <Wizard
            activeStepIndex={step}
            onNavigate={({ detail }) => next(detail.requestedStepIndex)}
            onCancel={reset}
            onSubmit={() => setComplete(true)}
            i18nStrings={{
              stepNumberLabel: (stepNumber) => `Step ${stepNumber}`,
              collapsedStepsLabel: (stepNumber, stepsCount) =>
                `Step ${stepNumber} of ${stepsCount}`,
              skipToButtonLabel: (step) => `Skip to ${step.title}`,
              navigationAriaLabel: "Configuration steps",
              cancelButton: "Reset",
              previousButton: "Previous",
              nextButton: "Next",
              submitButton: "Confirm locally",
              optional: "optional",
            }}
            steps={[
              {
                title: "Configure workspace",
                description: "Choose the identity and capacity.",
                content: (
                  <Container
                    header={<Header variant="h2">Workspace settings</Header>}
                  >
                    <SpaceBetween size="l">
                      <FormField
                        label="Workspace name"
                        constraintText="3–30 characters; lowercase letters, numbers and hyphens."
                        errorText={error}
                      >
                        <Input
                          value={name}
                          onChange={({ detail }) => {
                            setName(detail.value);
                            setError("");
                          }}
                        />
                      </FormField>
                      <FormField
                        label="Capacity profile"
                        description="These profiles are sample application data, not real cloud products or prices."
                      >
                        <Select
                          selectedOption={size}
                          onChange={({ detail }) =>
                            setSize(detail.selectedOption)
                          }
                          options={sizes}
                        />
                      </FormField>
                    </SpaceBetween>
                  </Container>
                ),
              },
              {
                title: "Review configuration",
                description:
                  "Check the values before confirming the local example.",
                content: (
                  <SpaceBetween size="l">
                    <Container
                      header={
                        <Header
                          variant="h2"
                          actions={
                            <Button onClick={() => setStep(0)}>
                              Edit settings
                            </Button>
                          }
                        >
                          Workspace settings
                        </Header>
                      }
                    >
                      <ColumnLayout columns={2} variant="text-grid">
                        <div>
                          <Box variant="awsui-key-label">Workspace name</Box>
                          {name}
                        </div>
                        <div>
                          <Box variant="awsui-key-label">Capacity profile</Box>
                          {size.label}
                        </div>
                      </ColumnLayout>
                    </Container>
                    <Alert type="info">
                      Confirmation changes the preview only. Production
                      provisioning would require a real service, permissions and
                      a verified response.
                    </Alert>
                  </SpaceBetween>
                ),
              },
            ]}
          />
        )}
      </div>
      <footer>
        Native Cloudscape components 3.0.1390 · configuration, validation,
        review and local confirmation.
      </footer>
    </main>
  );
}
createRoot(document.getElementById("root")).render(<App />);

body {
  margin: 0;
}
.cloudscape-example {
  padding: 24px;
  max-width: 1200px;
  margin: auto;
}
.appearance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.appearance > span {
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.wizard-content {
  margin-top: 32px;
}
.cloudscape-example footer {
  font-size: 12px;
  margin-top: 32px;
  color: #5f6b7a;
}
@media (max-width: 600px) {
  .cloudscape-example {
    padding: 16px;
  }
  .appearance {
    align-items: start;
  }
  .appearance > span {
    max-width: 180px;
  }
  .wizard-content {
    margin-top: 24px;
  }
}