add basic ProductConfigurator component with typings and productpreview

src/components/preview.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { Item } from "..";
+import style from "../styles/ProductPreview.scss";
+
+interface props {
+    currentSelection: { [keys: string]: Item };
+}
+
+export class ProductPreview extends React.Component<props, any> {
+    render() {
+        const selection: { [keys: string]: Item } = this.props.currentSelection;
+        const images = Object.keys(selection)
+            .sort(
+                (a: string, b: string) =>
+                    (selection[a].layer ?? 0) - (selection[b].layer ?? 0)
+            )
+            .map((key: string) => {
+                return (
+                    <img
+                        className={style.images}
+                        key={`preview-image-${key}`}
+                        src={selection[key].image}
+                        alt={selection[key].name}
+                    />
+                );
+            });
+
+        return <div className={style.preview}>{images}</div>;
+    }
+}

src/index.tsx

@@ -1,10 +1,55 @@
-import * as React from 'react'
-import styles from './styles.module.css'
+import * as React from "react";
+import { ProductPreview } from "./components/preview";
 
-interface Props {
-  text: string
+export type ItemConfiguration = { [keys: string]: string | number };
+
+export interface Item {
+    name: string;
+    price: number;
+    image: string;
+    thumbnail?: string;
+    color?: string;
+    default?: boolean;
+    layer?: number;
+}
+
+export interface Category {
+    name: string;
+    thumbnail: string;
+    layer?: number;
+    items: Item[];
+}
+
+interface props {
+    name: string;
+    onBack?: () => any;
+    onBuy?: (items: ItemConfiguration[]) => any;
+    categories: Category[];
+}
+
+interface state {
+    currentSelection: { [keys: string]: Item };
 }
 
-export const ExampleComponent = ({ text }: Props) => {
-  return <div className={styles.test}>Example Component: {text}</div>
+export class ProductConfigurator extends React.Component<props, state> {
+    constructor(props: props) {
+        super(props);
+        const currentSelection = {};
+        this.props.categories.forEach((val) => {
+            val.items.forEach((item) => {
+                if (!item.default) return;
+                if (!item.layer && val.layer) item.layer = val.layer;
+                currentSelection[val.name] = item;
+            });
+        });
+        this.state = {
+            currentSelection: currentSelection,
+        };
+    }
+
+    render() {
+        return (
+            <ProductPreview currentSelection={this.state.currentSelection} />
+        );
+    }
 }

src/styles/ProductPreview.scss

@@ -0,0 +1,16 @@
+.preview {
+    height: 100%;
+    flex: 2;
+    position: relative;
+
+    .images {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: grid;
+        max-width: 100%;
+        max-height: 100%;
+        transition: .4s ease;
+    }
+}