wip: create preview components

apps/client/src/common/components/import-preview/PreviewColumn.module.scss

@@ -0,0 +1,23 @@
+@use "../../../theme/_ontimeColours" as *;
+
+@mixin pad-item {
+  padding-left: 0.5rem;
+  padding-right: 1rem;
+}
+
+.previewTable {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: repeat(6, auto);
+  gap: 1px;
+}
+
+.field {
+  @include pad-item;
+  background-color: $gray-100;
+}
+
+.value {
+  @include pad-item;
+  background-color: $gray-50;
+}

apps/client/src/common/components/import-preview/PreviewProjectData.tsx

@@ -0,0 +1,26 @@
+import { ProjectData } from 'ontime-types';
+
+import style from './PreviewColumn.module.scss';
+
+interface PreviewProjectDataProps {
+  project: ProjectData;
+}
+
+export default function PreviewProjectData({ project }: PreviewProjectDataProps) {
+  return (
+    <div className={style.previewTable}>
+      <span className={style.field}>Title</span>
+      <span className={style.value}>{project.title}</span>
+      <span className={style.field}>Description</span>
+      <span className={style.value}>{project.description}</span>
+      <span className={style.field}>Public URL</span>
+      <span className={style.value}>{project.publicUrl}</span>
+      <span className={style.field}>Public info</span>
+      <span className={style.value}>{project.publicInfo}</span>
+      <span className={style.field}>Backstage URL</span>
+      <span className={style.value}>{project.backstageUrl}</span>
+      <span className={style.field}>Backstage info</span>
+      <span className={style.value}>{project.backstageInfo}</span>
+    </div>
+  );
+}

apps/client/src/common/components/import-preview/PreviewUserFields.tsx

@@ -0,0 +1,34 @@
+import { UserFields } from 'ontime-types';
+
+import style from './PreviewColumn.module.scss';
+
+interface PreviewUserFieldProps {
+  userFields: UserFields;
+}
+
+export default function PreviewUserField({ userFields }: PreviewUserFieldProps) {
+  return (
+    <div className={style.previewTable}>
+      <span className={style.field}>user0</span>
+      <span className={style.value}>{userFields.user0}</span>
+      <span className={style.field}>user1</span>
+      <span className={style.value}>{userFields.user1}</span>
+      <span className={style.field}>user2</span>
+      <span className={style.value}>{userFields.user2}</span>
+      <span className={style.field}>user3</span>
+      <span className={style.value}>{userFields.user3}</span>
+      <span className={style.field}>user4</span>
+      <span className={style.value}>{userFields.user4}</span>
+      <span className={style.field}>user5</span>
+      <span className={style.value}>{userFields.user5}</span>
+      <span className={style.field}>user6</span>
+      <span className={style.value}>{userFields.user6}</span>
+      <span className={style.field}>user7</span>
+      <span className={style.value}>{userFields.user7}</span>
+      <span className={style.field}>user8</span>
+      <span className={style.value}>{userFields.user8}</span>
+      <span className={style.field}>user9</span>
+      <span className={style.value}>{userFields.user9}</span>
+    </div>
+  );
+}

apps/client/src/features/modals/upload-modal/UploadModal.tsx

@@ -25,6 +25,11 @@ import ModalSplitInput from '../ModalSplitInput';
 import { validateFile } from './utils';
 
 import style from './UploadModal.module.scss';
+import PreviewProjectData from '../../../common/components/import-preview/PreviewProjectData';
+import { projectDataPlaceholder } from '../../../common/models/ProjectData';
+import CollapsableInfo from '../../info/CollapsableInfo';
+import PreviewUserField from '../../../common/components/import-preview/PreviewUserFields';
+import { userFieldsPlaceholder } from '../../../common/models/UserFields';
 
 interface UploadModalProps {
   onClose: () => void;
@@ -154,6 +159,8 @@ export default function UploadModal({ onClose, isOpen }: UploadModalProps) {
               <Switch variant='ontime-on-light' ref={overrideOptionRef} />
             </ModalSplitInput>
           </div>
+          <PreviewProjectData project={projectDataPlaceholder} />
+          <PreviewUserField userFields={userFieldsPlaceholder} />
         </ModalBody>
         <ModalFooter className={`${style.buttonSection} ${style.pad}`}>
           <Button onClick={handleClose} isDisabled={isSubmitting} variant='ontime-ghost-on-light' size='sm'>