basic context

package.json

@@ -25,6 +25,7 @@
     "sass": "^1.80.5",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.10"
+    "vite": "^5.4.10",
+    "vite-plugin-svgr": "^4.2.0"
   }
 }

src/App.scss

@@ -16,6 +16,13 @@
   --bg-300: #efefef;
 }
 
+@mixin font($fw: normal, $fz: 16, $lh: 1.5) {
+  font-family: Satoshi-Regular, sans-serif;
+  font-weight: $fw;
+  font-size: $fz + px;
+  line-height: $lh;
+}
+
 body {
   font-family: Satoshi-Regular;
   line-height: 1.5;

src/App.tsx

@@ -1,10 +1,13 @@
 import './App.scss'
 import ConfigWrapper from './components/ConfigWrapper'
+import Page from './components/layout/Page'
 
 function App() {
   return (
     <>
-      <ConfigWrapper />
+      <Page>
+        <ConfigWrapper />
+      </Page>
     </>
   )
 }

src/components/ConfigWrapper.tsx

@@ -1,23 +1,56 @@
-import Intro from './Intro'
+import Info from './Info'
 import useMultiStep from '../hooks/useMultiStep'
 import Form from './Form'
 import FormConfirmation from './FormConfirmation'
-import ThankYou from './ThankYou'
+import styles from './configWrapper.module.scss'
+import { ConfiguratorProvider } from '../context/ConfiguratorContext'
+
+import Success from '../assets/icons/success-icon.svg?react'
+import Tools from '../assets/icons/tools-icon.svg?react'
 
 function ConfigWrapper() {
+  function test() {
+    return true
+  }
+
   const { step, buttons, currentElement } = useMultiStep([
-    <Intro />,
-    <Form />,
-    <FormConfirmation />,
-    <ThankYou />,
+    {
+      component: (
+        <Info
+          icon={<Tools />}
+          title='Konfigurator servisa'
+          content='Pošaljite upit za servis svog vozila pomoću našeg konfiguratora i naš stručan tim će vam se javiti u najkraćem mogućem roku.'
+        />
+      ),
+      nextButton: 'Pokreni konfigurator',
+    },
+    { component: <Form />, nextButton: 'Započni', handleBeforeNext: test },
+    { component: <FormConfirmation />, nextButton: 'Dalje' },
+    {
+      component: (
+        <Info
+          icon={<Success />}
+          title='Vaša prijava je uspješno poslana'
+          content='Vaša prijava je uspješno poslana i zaprimljena. Kontaktirat ćemo vas u najkraćem mogućem roku. Hvala vam!'
+        />
+      ),
+    },
   ])
 
+  const isCentered = step === 0 || step === 3
+
   return (
-    <>
-      <div>{step}</div>
-      <div>{buttons()}</div>
-      {currentElement}
-    </>
+    <ConfiguratorProvider>
+      <div
+        className={`${styles.wrapper} ${
+          isCentered && styles['wrapper--center']
+        }`}
+      >
+        <div>{step}</div>
+        {currentElement}
+        <div>{buttons()}</div>
+      </div>
+    </ConfiguratorProvider>
   )
 }
 

src/components/Form.tsx

@@ -1,8 +1,71 @@
+import { useConfiguratorContext } from '../context/ConfiguratorContext'
+
 function Form() {
+  const { configurator, setConfigurator } = useConfiguratorContext()
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { name, value } = e.target
+
+    setConfigurator((prev) => ({
+      ...prev,
+      [name]: value,
+    }))
+  }
+
   return (
     <form>
-      <input type='text' />
-      <button type='submit'>Submit</button>
+      <h4>Odaberite proizvođaća vašeg vozila</h4>
+      <h4>Odaberite jednu ili više usluga koju trebate</h4>
+      <div>
+        <div>ukupno: 0 €</div>
+        <div>imam kupon</div>
+      </div>
+      <h4>Vaši podaci</h4>
+      <div>
+        <label>
+          Ime i prezime:
+          <input
+            type='text'
+            name='name'
+            value={configurator.name}
+            onChange={handleChange}
+          />
+        </label>
+      </div>
+      <div>
+        <label>
+          Broj telefona:
+          <input
+            type='tel'
+            name='telephone'
+            value={configurator.telephone}
+            onChange={handleChange}
+          />
+        </label>
+      </div>
+      <div>
+        <label>
+          Email adresa:
+          <input
+            type='email'
+            name='email'
+            value={configurator.email}
+            onChange={handleChange}
+          />
+        </label>
+      </div>
+      <div>
+        <label>
+          Napomena (opcionalno):
+          <textarea
+            name='note'
+            value={configurator.note}
+            onChange={handleChange}
+          ></textarea>
+        </label>
+      </div>
     </form>
   )
 }

src/components/FormConfirmation.tsx

@@ -1,7 +1,46 @@
+import { useConfiguratorContext } from '../context/ConfiguratorContext'
+
 function FormConfirmation() {
+  const { configurator } = useConfiguratorContext()
+  const { manufacturer, name, note, telephone, email } = configurator
+
   return (
     <div>
-      <h1>Form data before sending</h1>
+      <h4>Pregled i potvrda vašeg odabira</h4>
+      <p>
+        Molimo vas da još jednom pregledate i potvrdite podatke. Ukoliko želite
+        promijeniti neki od podataka, vratite se na prethodni korak. Kada ste
+        provjerili ispravnost svojih podataka, za slanje upita na servis
+        pritisnite gumb “Pošalji”.
+      </p>
+      <div>
+        <h4>Model vozila</h4>
+        <p>{manufacturer}</p>
+        <h4>Odabrane usluge</h4>
+        <ul>
+          <li>
+            <p>Zamjena ulja i filtera</p> <p>65,00 €</p>
+          </li>
+          <li>
+            <p>Servis klima uređaja</p> <p>40,00 €</p>
+          </li>
+          <li>
+            <p>
+              <span>Popust 20%:</span> -21,00 €
+            </p>
+          </li>
+          <li>
+            <p>
+              <span>Ukupno:</span>84,00 €
+            </p>
+          </li>
+        </ul>
+        <h4>Kontakt podaci</h4>
+        <p>Ime i prezime: {name}</p>
+        <p>Email adresa: {email}</p>
+        <p>Broj telefona: {telephone}</p>
+        <p>Napomena: {note}</p>
+      </div>
     </div>
   )
 }

src/components/Info.tsx

@@ -0,0 +1,17 @@
+type InfoProps = {
+  title: string
+  content: string
+  icon: JSX.Element
+}
+
+function Info({ title, content, icon }: InfoProps) {
+  return (
+    <div>
+      {icon}
+      <h1>{title}</h1>
+      <p>{content}</p>
+    </div>
+  )
+}
+
+export default Info

src/components/configWrapper.module.scss

@@ -0,0 +1,11 @@
+.wrapper {
+  margin: 0 auto;
+  width: 600px;
+  min-height: 100%;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  &--center {
+    justify-content: center;
+  }
+}

src/components/layout/Header.tsx

@@ -0,0 +1,18 @@
+import styles from './header.module.scss'
+
+function Header() {
+  return (
+    <div className={styles.header}>
+      <h1>Konfigurator servisa</h1>
+      <nav>
+        <ul>
+          <li>
+            <a href='#'>Izračunajte trošak servisa</a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  )
+}
+
+export default Header

src/components/layout/Page.tsx

@@ -0,0 +1,17 @@
+import Header from './Header'
+import styles from './page.module.scss'
+
+type PageProps = {
+  children: React.ReactNode
+}
+
+function Page({ children }: PageProps) {
+  return (
+    <div className={styles.page}>
+      <Header />
+      {children}
+    </div>
+  )
+}
+
+export default Page

src/components/layout/header.module.scss

@@ -0,0 +1,18 @@
+@use '../../App.scss' as *;
+
+.header {
+  background: var(--primary-100);
+  color: var(--base-600);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 15px 50px;
+  h1 {
+    @include font(700, 32, 1.3);
+  }
+  a {
+    @include font(400, 16, 1.5);
+    color: var(--base-600);
+    text-decoration: none;
+  }
+}

src/components/layout/page.module.scss

@@ -0,0 +1,5 @@
+.page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}