diff --git a/frontend/components/theming/Theme.tsx b/frontend/components/theming/Theme.tsx
new file mode 100644
index 0000000..38a2899
--- /dev/null
+++ b/frontend/components/theming/Theme.tsx
@@ -0,0 +1,9 @@
+export class Theme {
+ constructor(
+ public readonly name: string,
+ public readonly primary: string,
+ public readonly secondary?: string,
+ public readonly tertiary?: string
+ ) {
+ }
+}
\ No newline at end of file
diff --git a/frontend/components/theming/ThemePreview.tsx b/frontend/components/theming/ThemePreview.tsx
new file mode 100644
index 0000000..4c61827
--- /dev/null
+++ b/frontend/components/theming/ThemePreview.tsx
@@ -0,0 +1,19 @@
+import {Theme} from "Frontend/components/theming/Theme";
+import {Typography} from "@material-tailwind/react";
+
+export default function ThemePreview({theme}: { theme: Theme }) {
+ return (
+
+
+
+
+ {theme.name}
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/components/theming/Themes.tsx b/frontend/components/theming/Themes.tsx
new file mode 100644
index 0000000..5bbe033
--- /dev/null
+++ b/frontend/components/theming/Themes.tsx
@@ -0,0 +1,18 @@
+import {Theme} from "Frontend/components/theming/Theme";
+
+export class Themes {
+ public static LIGHT_DEFAULT = new Theme(
+ "Light default",
+ "#000000"
+ )
+
+ public static DARK_DEFAULT = new Theme(
+ "Dark default",
+ "#ffffff"
+ )
+
+ public static all = [
+ Themes.LIGHT_DEFAULT,
+ Themes.DARK_DEFAULT
+ ];
+}
\ No newline at end of file
diff --git a/frontend/components/wizard/Wizard.tsx b/frontend/components/wizard/Wizard.tsx
index d50e13b..22c9dff 100644
--- a/frontend/components/wizard/Wizard.tsx
+++ b/frontend/components/wizard/Wizard.tsx
@@ -1,9 +1,13 @@
-import React, {useState} from "react";
+import React, {ReactNode, useState} from "react";
import {Form, Formik, FormikBag, FormikHelpers} from "formik";
import {Button, Spinner, Step, Stepper} from "@material-tailwind/react";
import {ArrowLeft, ArrowRight, Check} from "@phosphor-icons/react";
-const Wizard = ({children, initialValues, onSubmit}: { children: any, initialValues: any, onSubmit: any }) => {
+const Wizard = ({children, initialValues, onSubmit}: {
+ children: ReactNode,
+ initialValues: any,
+ onSubmit: (values: any, bag: FormikHelpers | FormikBag) => Promise
+}) => {
const [stepNumber, setStepNumber] = useState(0);
const steps = React.Children.toArray(children);
const [snapshot, setSnapshot] = useState(initialValues);
@@ -73,7 +77,7 @@ const Wizard = ({children, initialValues, onSubmit}: { children: any, initialVal
type="submit"
>
{formik.isSubmitting ?
- : isLastStep ? :
+ : isLastStep ? :
}
diff --git a/frontend/components/wizard/WizardStep.tsx b/frontend/components/wizard/WizardStep.tsx
index c34c99d..dcf8250 100644
--- a/frontend/components/wizard/WizardStep.tsx
+++ b/frontend/components/wizard/WizardStep.tsx
@@ -1,3 +1,14 @@
-const WizardStep = ({children}: { children: any }) => children;
+import {JSX, ReactNode} from "react";
+import * as Yup from 'yup';
-export default WizardStep;
\ No newline at end of file
+export default function WizardStep({children, icon, validationSchema}: {
+ children: ReactNode,
+ icon: JSX.Element,
+ validationSchema?: Yup.Schema,
+ onSubmit?: (...values: any) => Promise
+}) {
+ return children;
+}
+
+//const WizardStep = ({children}: { children: Component }) => children;
+//export default WizardStep;
\ No newline at end of file
diff --git a/frontend/views/SetupView.tsx b/frontend/views/SetupView.tsx
index 840c3a3..2fc8e95 100644
--- a/frontend/views/SetupView.tsx
+++ b/frontend/views/SetupView.tsx
@@ -1,58 +1,74 @@
import React from 'react';
-import {useFormikContext} from 'formik';
import * as Yup from 'yup';
import Wizard from "Frontend/components/wizard/Wizard";
import WizardStep from "Frontend/components/wizard/WizardStep";
import {Card, Typography} from "@material-tailwind/react";
import Input from "Frontend/components/Input";
-import {GearFine, HandWaving, User} from "@phosphor-icons/react";
+import {GearFine, HandWaving, Palette, User} from "@phosphor-icons/react";
+import {Themes} from "Frontend/components/theming/Themes";
+import ThemePreview from "Frontend/components/theming/ThemePreview";
const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
function WelcomeStep() {
return (
-
- Welcome to Gameyfin 👋
-
- Gameyfin is a cutting-edge software tailored for gamers seeking efficient management of their
- video
- game collections.
With its intuitive interface and comprehensive features, Gameyfin
- simplifies the organization of game libraries. Users can effortlessly add games through manual
- input
- or
- automated recognition, categorize them based on various criteria like genre or platform, track
- in-game
- progress, and share achievements with friends.
Notably, Gameyfin stands out for its
- user-friendly
- design and adaptability, offering ample customization options to meet diverse user preferences.
-
- Let's get started!
+
+
+ Welcome to Gameyfin 👋
+
+ Gameyfin is a cutting-edge software tailored for gamers seeking efficient management of their
+ video
+ game collections.
With its intuitive interface and comprehensive features, Gameyfin
+ simplifies the organization of game libraries. Users can effortlessly add games through manual
+ input
+ or
+ automated recognition, categorize them based on various criteria like genre or platform, track
+ in-game
+ progress, and share achievements with friends.
Notably, Gameyfin stands out for its
+ user-friendly
+ design and adaptability, offering ample customization options to meet diverse user preferences.
+