added more styling, and warning

DurbansPoison · Oct 30, 2023 · db08f7d · db08f7d
1 parent 4ca129e
commit db08f7d
Show file tree

Hide file tree

Showing 12 changed files with 138 additions and 121 deletions.
diff --git a/build/asset-manifest.json b/build/asset-manifest.json
@@ -1,15 +1,15 @@
 {
   "files": {
-    "main.css": "/readme-gen/static/css/main.7ab08ebf.css",
-    "main.js": "/readme-gen/static/js/main.0b2abd3b.js",
+    "main.css": "/readme-gen/static/css/main.e75766f7.css",
+    "main.js": "/readme-gen/static/js/main.392cadb0.js",
     "static/js/496.09765cf6.chunk.js": "/readme-gen/static/js/496.09765cf6.chunk.js",
     "index.html": "/readme-gen/index.html",
-    "main.7ab08ebf.css.map": "/readme-gen/static/css/main.7ab08ebf.css.map",
-    "main.0b2abd3b.js.map": "/readme-gen/static/js/main.0b2abd3b.js.map",
+    "main.e75766f7.css.map": "/readme-gen/static/css/main.e75766f7.css.map",
+    "main.392cadb0.js.map": "/readme-gen/static/js/main.392cadb0.js.map",
     "496.09765cf6.chunk.js.map": "/readme-gen/static/js/496.09765cf6.chunk.js.map"
   },
   "entrypoints": [
-    "static/css/main.7ab08ebf.css",
-    "static/js/main.0b2abd3b.js"
+    "static/css/main.e75766f7.css",
+    "static/js/main.392cadb0.js"
   ]
 }
diff --git a/build/index.html b/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/readme-gen/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><link rel="apple-touch-icon" href="/readme-gen/logo192.png"/><link rel="manifest" href="/readme-gen/manifest.json"/><title>README-Generator</title><script defer="defer" src="/readme-gen/static/js/main.0b2abd3b.js"></script><link href="/readme-gen/static/css/main.7ab08ebf.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/readme-gen/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><link rel="apple-touch-icon" href="/readme-gen/logo192.png"/><link rel="manifest" href="/readme-gen/manifest.json"/><title>README-Generator</title><script defer="defer" src="/readme-gen/static/js/main.392cadb0.js"></script><link href="/readme-gen/static/css/main.e75766f7.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/build/static/css/main.7ab08ebf.css.map b/build/static/css/main.7ab08ebf.css.map
diff --git a/build/static/css/main.7ab08ebf.css → build/static/css/main.e75766f7.css b/build/static/css/main.7ab08ebf.css → build/static/css/main.e75766f7.css
diff --git a/build/static/css/main.e75766f7.css.map b/build/static/css/main.e75766f7.css.map
diff --git a/build/static/js/main.0b2abd3b.js b/build/static/js/main.0b2abd3b.js
diff --git a/build/static/js/main.0b2abd3b.js.map b/build/static/js/main.0b2abd3b.js.map
diff --git a/build/static/js/main.392cadb0.js b/build/static/js/main.392cadb0.js
diff --git a/build/static/js/main.0b2abd3b.js.LICENSE.txt → build/static/js/main.392cadb0.js.LICENSE.txt b/build/static/js/main.0b2abd3b.js.LICENSE.txt → build/static/js/main.392cadb0.js.LICENSE.txt
diff --git a/build/static/js/main.392cadb0.js.map b/build/static/js/main.392cadb0.js.map
diff --git a/src/App.css b/src/App.css
@@ -53,3 +53,15 @@ Typography {
 	padding: 30px;
 
 }
+
+
+.warningStatement {
+	font-weight: bold;
+	font-size: 8pt;
+	padding: 2vh
+}
+
+#titleName {
+	justify-content: center;
+	padding-left: 2vh;
+}
diff --git a/src/App.js b/src/App.js
@@ -1,11 +1,12 @@
 import React, { useState } from 'react';
 import {
-	Button,
-	TextField,
-	Container,
-	Grid,
-	Typography,
-	Checkbox,
+  Button,
+  TextField,
+  Container,
+  Grid,
+	Box,
+  Typography,
+  Checkbox,
 } from '@mui/material';
 import { saveAs } from 'file-saver';
 import { PDFDocument, rgb, StandardFonts } from 'pdf-lib';
@@ -15,119 +16,123 @@ import './App.css';
 console.log('sanity-check');
 
 function App() {
-	const [formData, setFormData] = useState({
-		ProjectTitle: '',
-		Developer: '',
-		WithTheHelpOf: '',
-		Description: '',
-		PrintSettings: '',
-		AdditionalThanks: '',
-	});
-	const [showAdditionalFields, setShowAdditionalFields] = useState(false);
-	const [bomFields, setBomFields] = useState(['']);
+  const [formData, setFormData] = useState({
+    ProjectTitle: '',
+    Developer: '',
+    WithTheHelpOf: '',
+    Description: '',
+    PrintSettings: '',
+    AdditionalThanks: '',
+  });
+  const [showAdditionalFields, setShowAdditionalFields] = useState(false);
+  const [bomFields, setBomFields] = useState(['']);
 
-	const handleInputChange = (e) => {
-		const { name, value } = e.target;
-		setFormData({
-			...formData,
-			[name]: value,
-		});
-	};
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData({
+      ...formData,
+      [name]: value,
+    });
+  };
 
-	const handleBomInputChange = (index, value) => {
-		const updatedBomFields = [...bomFields];
-		updatedBomFields[index] = value;
-		setBomFields(updatedBomFields);
+  const handleBomInputChange = (index, value) => {
+    const updatedBomFields = [...bomFields];
+    updatedBomFields[index] = value;
+    setBomFields(updatedBomFields);
 
-		if (value && index === bomFields.length - 1) {
-			setBomFields([...updatedBomFields, '']);
-		}
-	};
+    if (value && index === bomFields.length - 1) {
+      // If the current field is filled out and is the last one, add a new one
+      setBomFields([...updatedBomFields, '']);
+    }
+  };
 
-	const handleSubmit = async () => {
-		const pdfDoc = await PDFDocument.create();
-		const page = pdfDoc.addPage([600, 400]);
+  const handleSubmit = async () => {
+    const pdfDoc = await PDFDocument.create();
+    const page = pdfDoc.addPage([600, 400]);
 
-		const content = Object.keys(formData)
-			.map((key) => `${key}: ${formData[key]}`)
-			.concat(bomFields.map((value, index) => `BOM #${index + 1}: ${value}`))
-			.join('\n');
+    const content = Object.keys(formData)
+      .map((key) => `${key}: ${formData[key]}`)
+      .concat(bomFields.map((value, index) => `BOM #${index + 1}: ${value}`))
+      .join('\n');
 
-		page.drawText(content, {
-			x: 50,
-			y: 250,
-			size: 14,
-			font: await pdfDoc.embedFont(StandardFonts.Helvetica),
-			color: rgb(0, 0, 0),
-		});
+    page.drawText(content, {
+      x: 50,
+      y: 250,
+      size: 14,
+      font: await pdfDoc.embedFont(StandardFonts.Helvetica),
+      color: rgb(0, 0, 0),
+    });
 
-		const pdfBytes = await pdfDoc.save();
+    const pdfBytes = await pdfDoc.save();
 
-		const text = Object.keys(formData)
-			.map((key) => `${key}: ${formData[key]}`)
-			.concat(bomFields.map((value, index) => `BOM #${index + 1}: ${value}`))
-			.join('\n');
+    const text = Object.keys(formData)
+      .map((key) => `${key}: ${formData[key]}`)
+      .concat(bomFields.map((value, index) => `BOM #${index + 1}: ${value}`))
+      .join('\n');
 
-		const textBlob = new Blob([text], { type: 'text/plain' });
+    const textBlob = new Blob([text], { type: 'text/plain' });
 
-		const zip = new JSZip();
-		zip.file('project_data.pdf', pdfBytes);
-		zip.file('project_data.txt', textBlob);
+    const zip = new JSZip();
+    zip.file('project_data.pdf', pdfBytes);
+    zip.file('project_data.txt', textBlob);
 
-		zip.generateAsync({ type: 'blob' }).then((content) => {
-			saveAs(content, 'project_data.zip');
-		});
-	};
+    zip.generateAsync({ type: 'blob' }).then((content) => {
+      saveAs(content, 'project_data.zip');
+    });
+  };
 
-	return (
-		<Container
-			style={{
-				display: 'flex',
-				justifyContent: 'center',
-				alignItems: 'center',
-				height: '100vh',
-			}}>
-			<div>
-				<Typography variant='h4'>ReadMe Generator</Typography>
-				{showAdditionalFields &&
-					bomFields.map((value, index) => (
-						<TextField
-							key={index}
-							label={`BOM #${index + 1}`}
-							value={value}
-							onChange={(e) => handleBomInputChange(index, e.target.value)}
-							fullWidth
-							style={{ marginBottom: '16px' }}
-						/>
-					))}
-				<Grid item xs={12}>
-					<label>
-						<Checkbox
-							checked={showAdditionalFields}
-							onChange={(e) => setShowAdditionalFields(e.target.checked)}
-						/>
-						Bom Items?
-					</label>
-				</Grid>
-				{showAdditionalFields &&
-					bomFields.map((value, index) => (
-						<TextField
-							key={index}
-							label={`BOM #${index + 1}`}
-							value={value}
-							onChange={(e) => handleBomInputChange(index, e.target.value)}
-							fullWidth
-							style={{ marginBottom: '16px' }}
-						/>
-					))}
-				<Grid item xs={12}>
-					<Button variant='contained' color='primary' onClick={handleSubmit}>
-						Generate PDF and Text
-					</Button>
-				</Grid>
-			</div>
-		</Container>
-	);
+  return (
+    <Container className='formContainer' id='formContainer'>
+      <Grid container spacing={2}>
+			<Box display="flex" flexDirection="column" alignItems="center">
+        <Grid item xs={12} id='titleName'>
+          <Typography align="center" variant="h4">ReadMe Generator</Typography>
+						<p className='warningStatement'> This Is Unfinished, Please Use It With That In Mind.</p>
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          {Object.keys(formData).map((key) => (
+            <TextField
+              key={key}
+              name={key}
+              label={key}
+              value={formData[key]}
+              onChange={handleInputChange}
+              fullWidth
+            />
+          ))}
+        </Grid>
+        <Grid item xs={12}>
+          {/* Checkbox to show additional fields */}
+          <label>
+            <Checkbox
+              checked={showAdditionalFields}
+              onChange={(e) => setShowAdditionalFields(e.target.checked)}
+            />
+           Bom Items?
+          </label>
+        </Grid>
+        {showAdditionalFields && (
+          <Grid item xs={12} sm={6}>
+            {bomFields.map((value, index) => (
+              <TextField
+                key={index}
+                label={`BOM #${index + 1}`}
+                value={value}
+                onChange={(e) => handleBomInputChange(index, e.target.value)}
+                fullWidth
+              />
+            ))}
+          </Grid>
+        )}
+        <Grid item xs={12}>
+          <Button variant="contained" color="primary" onClick={handleSubmit}>
+            Generate PDF and Text
+          </Button>
+        </Grid>
+				</Box>
+      </Grid>
+    </Container>
+  );
 }
 
 export default App;