From 41f6a6778e77a817551574fa8fe4c9dc831087e1 Mon Sep 17 00:00:00 2001
From: Adrian Stobbe <stobbe.adrian@gmail.com>
Date: Fri, 24 Mar 2023 17:13:45 +0100
Subject: [PATCH] Add version selector for PHP and WP (#166)

---
 .../browser-chrome/style.module.css           |  2 +-
 .../src/components/version-select/index.tsx   | 34 +++++++++++++++++++
 .../version-select/style.module.css           |  7 ++++
 packages/playground/website/src/main.tsx      | 24 ++++++++-----
 4 files changed, 57 insertions(+), 10 deletions(-)
 create mode 100644 packages/playground/website/src/components/version-select/index.tsx
 create mode 100644 packages/playground/website/src/components/version-select/style.module.css

diff --git a/packages/playground/website/src/components/browser-chrome/style.module.css b/packages/playground/website/src/components/browser-chrome/style.module.css
index fda9ac84..e0288995 100644
--- a/packages/playground/website/src/components/browser-chrome/style.module.css
+++ b/packages/playground/website/src/components/browser-chrome/style.module.css
@@ -24,7 +24,7 @@ body.is-embedded .fake-window-wrapper {
 }
 
 .wrapper {
-	padding: 55px 60px;
+	padding: 15px 60px 55px 60px;
 	height: 100%;
 }
 
diff --git a/packages/playground/website/src/components/version-select/index.tsx b/packages/playground/website/src/components/version-select/index.tsx
new file mode 100644
index 00000000..8b04a4b3
--- /dev/null
+++ b/packages/playground/website/src/components/version-select/index.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import css from './style.module.css';
+
+type SelectorProps = {
+	name: string;
+	versions: string[];
+};
+
+export default function VersionSelector(props: SelectorProps) {
+	const selectedVersion = new URL(window.location.toString()).searchParams.get(
+		props.name
+	);
+	return (
+		<select
+			className={css.btn}
+			defaultValue={selectedVersion ? selectedVersion : props.versions[0] }
+			id={props.name + '-version'}
+			onChange={(event) => {
+				const url = new URL(window.location.toString());
+				url.searchParams.set(props.name, event.target.value);
+				window.location.assign(url);
+			}}
+		>
+			{props.versions.map((value) => (
+				<option
+					value={value}
+					key={value}
+				>
+					{props.name.toString().toUpperCase() + ' ' + value}
+				</option>
+			))}
+		</select>
+	);
+}
diff --git a/packages/playground/website/src/components/version-select/style.module.css b/packages/playground/website/src/components/version-select/style.module.css
new file mode 100644
index 00000000..1f45781f
--- /dev/null
+++ b/packages/playground/website/src/components/version-select/style.module.css
@@ -0,0 +1,7 @@
+.btn {
+	cursor: pointer;
+	border: none;
+	margin: 0px 5px;
+	box-shadow: 0px 0px 10px -4px rgba(0, 0, 0, 0.75);
+	border-radius: 6px;
+}
diff --git a/packages/playground/website/src/main.tsx b/packages/playground/website/src/main.tsx
index f9dd982a..55ee30e7 100644
--- a/packages/playground/website/src/main.tsx
+++ b/packages/playground/website/src/main.tsx
@@ -1,22 +1,28 @@
 import { createRoot } from 'react-dom/client';
-
 import PlaygroundViewport from './components/playground-viewport';
 import ExportButton from './components/export-button';
 import ImportButton from './components/import-button';
+import VersionSelector from './components/version-select';
+import './styles.css';
 
 import { setupPlayground } from './lib/setup-playground';
 
+const phpVersions = ['8.2', '8.1', '8.0', '7.4', '7.3', '7.2', '7.1', '7.0','5.6'];
+const wpVersions = ['5.9', '6.0', '6.1'];
 const query = new URL(document.location.href).searchParams;
 const isSeamless = (query.get('mode') || 'browser') === 'seamless';
 
 const root = createRoot(document.getElementById('root')!);
 root.render(
-	<PlaygroundViewport
-		isSeamless={isSeamless}
-		setupPlayground={setupPlayground}
-		toolbarButtons={[
-			<ImportButton key="export" />,
-			<ExportButton key="export" />,
-		]}
-	/>
+
+		<PlaygroundViewport
+			isSeamless={isSeamless}
+			setupPlayground={setupPlayground}
+			toolbarButtons={[
+				<VersionSelector name="php" versions={phpVersions} />,
+				<VersionSelector name="wp" versions={wpVersions} />,
+				<ImportButton key="export" />,
+				<ExportButton key="export" />,
+			]}
+		/>
 );