diff --git a/apps/website/pages/theme-generator/index.tsx b/apps/website/pages/theme-generator/configuration/index.tsx
similarity index 62%
rename from apps/website/pages/theme-generator/index.tsx
rename to apps/website/pages/theme-generator/configuration/index.tsx
index d5a0415ac..9d37a727a 100644
--- a/apps/website/pages/theme-generator/index.tsx
+++ b/apps/website/pages/theme-generator/configuration/index.tsx
@@ -1,5 +1,5 @@
import Head from "next/head";
-import ThemeGeneratorPage from "screens/theme-generator/ThemeGeneratorPage";
+import ThemeGeneratorConfigPage from "screens/theme-generator/ThemeGeneratorConfigPage";
const Index = () => {
return (
@@ -7,7 +7,7 @@ const Index = () => {
Theme generator — Halstack Design System
-
+
);
};
diff --git a/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx b/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx
new file mode 100644
index 000000000..e6191805d
--- /dev/null
+++ b/apps/website/screens/theme-generator/ThemeGeneratorConfigPage.tsx
@@ -0,0 +1,97 @@
+import { useState } from "react";
+import { DxcContainer, DxcFlex, DxcWizard } from "@dxc-technology/halstack-react";
+import StepHeading from "./components/StepHeading";
+import BottomButtons from "./components/BottomButtons";
+// import { FileData } from "../../../../packages/lib/src/file-input/types";
+
+export type Step = 0 | 1 | 2;
+
+const steps = [
+ {
+ label: "Configure theme",
+ description: "Branding details",
+ title: "Add your theme specifics",
+ subtitle: "Review your uploaded theme or define your brand colors and logos to preview them in real life. ",
+ },
+ {
+ label: "Preview",
+ description: "Components and templates",
+ title: "Preview how your theme applies",
+ subtitle: "Choose components or examples from Halstack catalogue to see how your theme behaves.",
+ },
+ {
+ label: "Export theme",
+ description: "Review and export",
+ title: "Review and export your theme",
+ subtitle: "Check your colors and branding assets before exporting your Halstack theme.",
+ },
+] as const;
+
+const wizardSteps = steps.map(({ label, description }) => ({
+ label,
+ description,
+}));
+
+const ThemeGeneratorConfigPage = () => {
+ const [currentStep, setCurrentStep] = useState(0);
+ // Uncomment when implementing the Branding details screen
+ /** const [colors, setColors] = useState({
+ primary: "#5f249f",
+ secondary: "#00b4d8",
+ tertiary: "#ffa500",
+ neutral: "#666666",
+ info: "#0095FF",
+ success: "#2FD05D",
+ error: "#FE0123",
+ warning: "#F38F20",
+ });
+ const [logos, setLogos] = useState({
+ mainLogo: [] as FileData[],
+ footerLogo: [] as FileData[],
+ footerReducedLogo: [] as FileData[],
+ favicon: [] as FileData[],
+ });
+ */
+
+ const handleChangeStep = (step: Step) => {
+ setCurrentStep(step);
+ };
+
+ return (
+
+
+
+ {
+ handleChangeStep(i as Step);
+ }}
+ />
+
+
+
+
+
+ {currentStep === 0 ? <> : currentStep === 1 ? <> : <>}
+
+
+
+
+
+
+ );
+};
+
+export default ThemeGeneratorConfigPage;
diff --git a/apps/website/screens/theme-generator/components/BottomButtons.tsx b/apps/website/screens/theme-generator/components/BottomButtons.tsx
new file mode 100644
index 000000000..571691c95
--- /dev/null
+++ b/apps/website/screens/theme-generator/components/BottomButtons.tsx
@@ -0,0 +1,54 @@
+import { DxcButton, DxcContainer, DxcFlex } from "@dxc-technology/halstack-react";
+import { Step } from "../ThemeGeneratorConfigPage";
+
+const MIN_STEP: Step = 0;
+const MAX_STEP: Step = 2;
+
+interface BottomButtonsProps {
+ currentStep: Step;
+ onChangeStep: (step: Step) => void;
+}
+
+const BottomButtons = ({ currentStep, onChangeStep }: BottomButtonsProps) => {
+ const goToStep = (step: number) => {
+ if (step >= MIN_STEP && step <= MAX_STEP) {
+ onChangeStep(step as Step);
+ }
+ };
+
+ return (
+
+
+ goToStep(currentStep - 1)}
+ disabled={currentStep === 0}
+ size={{ height: "medium", width: "fitContent" }}
+ />
+ {currentStep === 2 ? (
+ console.log("download theme")}
+ size={{ height: "medium", width: "fitContent" }}
+ />
+ ) : (
+ goToStep(currentStep + 1)}
+ size={{ height: "medium", width: "fitContent" }}
+ />
+ )}
+
+
+ );
+};
+
+export default BottomButtons;
diff --git a/apps/website/screens/theme-generator/components/StepHeading.tsx b/apps/website/screens/theme-generator/components/StepHeading.tsx
new file mode 100644
index 000000000..48b1db8fb
--- /dev/null
+++ b/apps/website/screens/theme-generator/components/StepHeading.tsx
@@ -0,0 +1,19 @@
+import { DxcFlex, DxcHeading, DxcContainer, DxcTypography } from "@dxc-technology/halstack-react";
+
+interface PageHeadingProps {
+ title: string;
+ subtitle: string;
+}
+
+const StepHeading = ({ title, subtitle }: PageHeadingProps) => (
+
+
+
+
+ {subtitle}
+
+
+
+);
+
+export default StepHeading;