From 0d45c9b1deaf71131742b86b28e2a3cbe8f81de7 Mon Sep 17 00:00:00 2001
From: MrLetsplay <mr@cringe-studios.com>
Date: Mon, 30 Oct 2023 23:24:37 +0100
Subject: [PATCH] Unify pages

---
 src/pages/ConvertBase.tsx | 10 ++++------
 src/pages/LoremIpsum.tsx  | 10 +++-------
 src/pages/Page.tsx        | 22 ++++++++++++++++++++++
 src/pages/StrLen.tsx      | 10 +++-------
 src/pages/StrNoise.tsx    |  9 +++------
 src/pages/StrRev.tsx      | 10 +++-------
 6 files changed, 38 insertions(+), 33 deletions(-)
 create mode 100644 src/pages/Page.tsx

diff --git a/src/pages/ConvertBase.tsx b/src/pages/ConvertBase.tsx
index a262842..6f0e98d 100644
--- a/src/pages/ConvertBase.tsx
+++ b/src/pages/ConvertBase.tsx
@@ -1,7 +1,7 @@
 import { Component, Setter, createEffect, createSignal, on } from 'solid-js';
 
 import styles from './Page.module.css';
-import Navigation from '../Navigation';
+import Page from './Page';
 
 function group(str: string, groupSize: number) {
 	const subs = [];
@@ -70,8 +70,7 @@ const ConvertBase: Component = () => {
 	createEffect(on(hexPairs, () => setHex(hexPairs() ? group(value().toString(16), 2) : value().toString(16))));
 
 	return (
-		<div class={styles.page}>
-			<h1>Convert Base</h1>
+		<Page title={'Convert Base'}>
 			<span>{error()}</span>
 			<h2>Decimal</h2>
 			<textarea value={decimal()} oninput={e => updateExcept(e.currentTarget.value, 10, setDecimal)} />
@@ -87,14 +86,13 @@ const ConvertBase: Component = () => {
 				<input id={'triplets'} type={'checkbox'} checked={octalTriplets()} onchange={e => setOctalTriplet(e.currentTarget.checked)} />
 				<label for={'triplets'}>Triplets</label>
 			</div>
+			<h2>Hex</h2>
 			<textarea value={hex()} oninput={e => updateExcept(e.currentTarget.value, 16, setHex)} />
 			<div class={styles.checkbox}>
 				<input id={'pairs'} type={'checkbox'} checked={hexPairs()} onchange={e => setHexPairs(e.currentTarget.checked)} />
 				<label for={'pairs'}>Pairs</label>
 			</div>
-			<h1>All Tools</h1>
-			<Navigation />
-		</div>
+		</Page >
 	);
 };
 
diff --git a/src/pages/LoremIpsum.tsx b/src/pages/LoremIpsum.tsx
index e9831d0..dfc9bd4 100644
--- a/src/pages/LoremIpsum.tsx
+++ b/src/pages/LoremIpsum.tsx
@@ -1,8 +1,7 @@
 import { Component, createEffect, createSignal, on } from 'solid-js';
 
-import styles from './Page.module.css';
-import Navigation from '../Navigation';
 import { createRandomGenerator } from '../random';
+import Page from './Page';
 
 const LOREM_IPSUM = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vestibulum velit nec vehicula viverra. Cras fermentum neque id faucibus mollis. Maecenas malesuada tellus vitae turpis maximus tempus. Donec sit amet ipsum lorem. Fusce vel eleifend elit, vel maximus mauris. Nam sed erat euismod, consectetur lorem vitae, lobortis est. Cras convallis tempus dapibus. Praesent convallis ac dui quis ultrices. Integer porta semper purus id placerat. Aliquam sed enim ut lorem dapibus luctus. Nulla ultrices ullamcorper ex in cursus. Maecenas augue libero, rhoncus ac porttitor id, dignissim at velit. Praesent pellentesque nec augue sit amet luctus. Nam finibus ultricies ligula ac pharetra. Aliquam pretium congue diam fringilla fermentum. Sed non lorem vel velit feugiat dignissim. Phasellus ultricies, eros at suscipit condimentum, dui tellus pretium libero, sed consectetur sapien mi ut ipsum. Ut mollis convallis ex sed aliquam. Sed sed lacus eu lectus ultrices ultrices. Quisque tincidunt leo non risus vehicula, eu congue ipsum molestie. Suspendisse laoreet ac mauris a fermentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum varius sem nec sagittis viverra. Mauris facilisis neque turpis, quis ultricies nisl mollis eget. Donec et leo id lectus vulputate maximus. Nullam bibendum ex massa, non tempus tortor molestie ac. Sed euismod libero libero, et consectetur sapien sagittis at. Etiam posuere, erat eu accumsan tempor, urna urna tempus purus, eu commodo odio erat nec tortor. Proin hendrerit, elit in pharetra efficitur, enim nunc facilisis felis, nec faucibus elit sem ut est. Morbi fermentum, arcu et venenatis aliquam, ex enim luctus purus, in elementum mauris turpis molestie ante. In hac habitasse platea dictumst. Curabitur sit amet ante arcu. Quisque ut fringilla ipsum. Fusce aliquet lorem quis sem maximus ultricies. Sed ex magna, euismod non faucibus at, maximus viverra risus. Curabitur eu nulla viverra, congue nisl eu, consequat odio. Mauris a posuere augue. Morbi lectus sem, iaculis sed orci sed, mollis pharetra nisl. Donec dolor felis, dictum id nibh quis, fringilla vulputate tellus. Suspendisse non nisi blandit, placerat tellus at, laoreet magna. Nam dignissim sollicitudin feugiat. Sed mattis diam quis erat gravida, quis auctor tellus varius. Maecenas commodo consequat interdum. Aenean pulvinar dictum tempus. Praesent pulvinar nibh ut auctor vestibulum. Morbi hendrerit nulla enim, ac sodales massa ornare id. Aenean quis pharetra nunc. Praesent sed hendrerit ex. Vestibulum faucibus sapien et tellus cursus, eget auctor lorem venenatis. Vestibulum porttitor turpis eget neque pretium, imperdiet sagittis quam posuere. Nullam cursus semper sodales. Nunc ante ante, volutpat vel felis lobortis, congue cursus purus. In sit amet felis ut felis fringilla imperdiet. In hac habitasse platea dictumst.';
 const LOREM_WORDS = LOREM_IPSUM.replaceAll(/[,.]/g, '').split(' ').filter(i => i != '').map(w => w.toLowerCase());
@@ -86,8 +85,7 @@ const LoremIpsum: Component = () => {
 	};
 
 	return (
-		<div class={styles.page}>
-			<h1>Lorem Ipsum</h1>
+		<Page title={'Lorem Ipsum'}>
 			<h2>Input</h2>
 			<h3>Length</h3>
 			<input type={'range'} min={0} max={5000} value={length()} oninput={e => setLength(parseInt(e.currentTarget.value))} />
@@ -102,9 +100,7 @@ const LoremIpsum: Component = () => {
 			<h2>Output</h2>
 			<textarea value={output()} ref={outputField} />
 			<button onclick={copy}>Copy Output</button>
-			<h1>All Tools</h1>
-			<Navigation />
-		</div>
+		</Page>
 	);
 };
 
diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx
new file mode 100644
index 0000000..11a66a2
--- /dev/null
+++ b/src/pages/Page.tsx
@@ -0,0 +1,22 @@
+import { ParentComponent, children } from 'solid-js';
+
+import styles from './Page.module.css';
+import Navigation from '../Navigation';
+
+interface PageProps {
+	title: string;
+}
+
+const Page: ParentComponent<PageProps> = (props) => {
+	const ch = children(() => props.children);
+	return (
+		<div class={styles.page}>
+			<h1>{props.title}</h1>
+			{ch()}
+			<h1>All Tools</h1>
+			<Navigation />
+		</div>
+	);
+};
+
+export default Page;
diff --git a/src/pages/StrLen.tsx b/src/pages/StrLen.tsx
index 1228df7..9343006 100644
--- a/src/pages/StrLen.tsx
+++ b/src/pages/StrLen.tsx
@@ -1,8 +1,7 @@
 import { Component, createSignal } from 'solid-js';
 
-import styles from './Page.module.css';
 import { JSX } from 'solid-js';
-import Navigation from '../Navigation';
+import Page from './Page';
 
 function copy(field: HTMLInputElement) {
 	field.select();
@@ -22,8 +21,7 @@ const StrLen: Component = () => {
 	let outputWordsField: HTMLInputElement | undefined;
 
 	return (
-		<div class={styles.page}>
-			<h1>String Length</h1>
+		<Page title={'String Length'}>
 			<h2>Input</h2>
 			<textarea oninput={onChange} />
 			<h2>Output</h2>
@@ -33,9 +31,7 @@ const StrLen: Component = () => {
 			<h3>Word Count</h3>
 			<input value={outputWords()} ref={outputWordsField} />
 			<button onclick={() => copy(outputWordsField!)}>Copy Output</button>
-			<h1>All Tools</h1>
-			<Navigation />
-		</div>
+		</Page>
 	);
 };
 
diff --git a/src/pages/StrNoise.tsx b/src/pages/StrNoise.tsx
index 4d7d3d1..6dc671c 100644
--- a/src/pages/StrNoise.tsx
+++ b/src/pages/StrNoise.tsx
@@ -1,8 +1,8 @@
 import { Component, createEffect, createSignal, on } from 'solid-js';
 
 import styles from './Page.module.css';
-import Navigation from '../Navigation';
 import { createRandomGenerator } from '../random';
+import Page from './Page';
 
 const SYMBOLS = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 _#+';
 
@@ -52,8 +52,7 @@ const StrNoise: Component = () => {
 	};
 
 	return (
-		<div class={styles.page}>
-			<h1>String Noise</h1>
+		<Page title={'String Noise'}>
 			<h2>Input</h2>
 			<textarea value={input()} oninput={e => setInput(e.currentTarget.value)} />
 			<h3>Noise Level</h3>
@@ -76,9 +75,7 @@ const StrNoise: Component = () => {
 			<h2>Output</h2>
 			<input value={output()} ref={outputField} />
 			<button onclick={copy}>Copy Output</button>
-			<h1>All Tools</h1>
-			<Navigation />
-		</div>
+		</Page>
 	);
 };
 
diff --git a/src/pages/StrRev.tsx b/src/pages/StrRev.tsx
index cd3d650..a8c2510 100644
--- a/src/pages/StrRev.tsx
+++ b/src/pages/StrRev.tsx
@@ -1,8 +1,7 @@
 import { Component, createSignal } from 'solid-js';
 
-import styles from './Page.module.css';
 import { JSX } from 'solid-js';
-import Navigation from '../Navigation';
+import Page from './Page';
 
 const StrRev: Component = () => {
 	const [output, setOutput] = createSignal('');
@@ -19,16 +18,13 @@ const StrRev: Component = () => {
 	};
 
 	return (
-		<div class={styles.page}>
-			<h1>String Reverse</h1>
+		<Page title={'String Noise'}>
 			<h2>Input</h2>
 			<textarea oninput={onChange} />
 			<h2>Output</h2>
 			<input value={output()} ref={outputField} />
 			<button onclick={copy}>Copy Output</button>
-			<h1>All Tools</h1>
-			<Navigation />
-		</div>
+		</Page>
 	);
 };