Add basic classification model wizard

web/src/components/classification/ClassificationModelWizardDialog.tsx

@@ -0,0 +1,66 @@
+import { useTranslation } from "react-i18next";
+import StepIndicator from "../indicators/StepIndicator";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+import { useState } from "react";
+
+const STEPS = [
+  "classificationWizard.steps.nameAndDefine",
+  "classificationWizard.steps.stateArea",
+  "classificationWizard.steps.chooseExamples",
+  "classificationWizard.steps.train",
+];
+
+type ClassificationModelWizardDialogProps = {
+  open: boolean;
+  onClose: () => void;
+};
+export default function ClassificationModelWizardDialog({
+  open,
+  onClose,
+}: ClassificationModelWizardDialogProps) {
+  const { t } = useTranslation(["views/classificationModel"]);
+
+  // step management
+  const [currentStep, setCurrentStep] = useState(0);
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(open) => {
+        if (!open) {
+          onClose;
+        }
+      }}
+    >
+      <DialogContent
+        className="max-h-[90dvh] max-w-4xl overflow-y-auto"
+        onInteractOutside={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <StepIndicator
+          steps={STEPS}
+          currentStep={currentStep}
+          variant="dots"
+          className="mb-4 justify-start"
+        />
+        <DialogHeader>
+          <DialogTitle>{t("wizard.title")}</DialogTitle>
+          {currentStep === 0 && (
+            <DialogDescription>{t("wizard.description")}</DialogDescription>
+          )}
+        </DialogHeader>
+
+        <div className="pb-4">
+          <div className="size-full"></div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}