Merge pull request #10 from lemredd/user_friendly_interface

User friendly interface

src/App.css

@@ -1,19 +1,72 @@
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0");
+
+*, *::before, *::after {
+	box-sizing: border-box;
+}
+
 img {
 	width: 100%;
 	max-width: inherit;
 }
 
+.container {
+	margin: 0 auto;
+	display: flex;
+	flex-direction: column;
+}
+.container > div {
+	flex: 1;
+}
+
+.editor-container {
+	position: relative;
+}
+.editor-container .toggle-expand-btn {
+	position: absolute;
+	right: 0;
+	top: .5rem;
+
+	border: none;
+	cursor: pointer;
+}
+.editor-container textarea {
+	resize: none;
+	display: block;
+	width: 100%;
+}
+
+.preview-container {
+	height: 100vh;
+	overflow-y: scroll;
+}
 /* https://github.com/sindresorhus/github-markdown-css#usage */
 .markdown-body {
 	box-sizing: border-box;
 	min-width: 200px;
 	max-width: 980px;
 	margin: 0 auto;
-	padding: 45px;
+}
+
+@media screen and (min-width: 640px) {
+	.editor-container {
+		gap: 1rem;
+	}
+	.editor-container textarea {
+		height: calc(100vh - 4px);
+		border: none;
+	}
+	.editor-container .toggle-expand-btn {
+		display: none;
+	}
+
+	.container {
+		flex-direction: row;
+		gap: 1rem;
+	}
 }
 
 @media (max-width: 767px) {
 	.markdown-body {
-		padding: 15px;
+		padding: 1rem;
 	}
 }

src/App.tsx

@@ -18,10 +18,10 @@ function App(): ReactElement {
 	const handle_change = (event: ChangeEvent<HTMLTextAreaElement>): void => set_content(event.target.value);
 
 	return (
-		<>
+		<div className="container">
 			<Editor content={content} on_change={handle_change} />
 			<Preview content={content} />
-		</>
+		</div>
 	);
 }
 

src/components/Editor.tsx

@@ -9,6 +9,7 @@ export default function Editor({ content, on_change }: Props): ReactElement {
 	return (
 		<div className="editor-container">
 			<textarea value={content} id="editor" onChange={on_change}></textarea>
+			<button className="toggle-expand-btn material-symbols-outlined">chevron_right</button>
 		</div>
 	);
 }

src/components/Preview.tsx

@@ -16,9 +16,10 @@ interface Props {
 export default function Preview({ content }: Props): ReactElement {
 	const sanitized_content = DOMPurify.sanitize(marked.parse(content));
 	return (
-		<div className="preview-container markdown-body">
+		<div className="preview-container">
 			<div
 				id="preview"
+				className=" markdown-body"
 				dangerouslySetInnerHTML={{ "__html": sanitized_content }}
 			/>
 		</div>