Unify pages

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}>
+		<Page title={'Convert Base'}>
-			<h1>Convert Base</h1>
 			<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>
+		</Page >
-			<Navigation />
-		</div>
 	);
 };
 

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}>
+		<Page title={'Lorem Ipsum'}>
-			<h1>Lorem Ipsum</h1>
 			<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>
+		</Page>
-			<Navigation />
-		</div>
 	);
 };
 

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;

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}>
+		<Page title={'String Length'}>
-			<h1>String Length</h1>
 			<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>
+		</Page>
-			<Navigation />
-		</div>
 	);
 };
 

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}>
+		<Page title={'String Noise'}>
-			<h1>String Noise</h1>
 			<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>
+		</Page>
-			<Navigation />
-		</div>
 	);
 };
 

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}>
+		<Page title={'String Noise'}>
-			<h1>String Reverse</h1>
 			<h2>Input</h2>
 			<textarea oninput={onChange} />
 			<h2>Output</h2>
 			<input value={output()} ref={outputField} />
 			<button onclick={copy}>Copy Output</button>
-			<h1>All Tools</h1>
+		</Page>
-			<Navigation />
-		</div>
 	);
 };