Task 3: React Frontend

task_3_react/src/client/components/CSVCard.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import "../Layout.css";
+
+const CSVCard = (props: { 
+  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+}) => {
+  return (
+    <article>
+        <header>
+            <h2>Select CSV data</h2>
+        </header>
+        <form>
+            <label htmlFor="file-input" className="custom-file-upload">
+                <i className="fa fa-file-csv"></i> Select CSV file to explore
+            </label>
+            <input id="file-input" type="file" aria-describedby="fileHelp" accept="text/csv" onChange={props.handleChange}/>
+            <small>Please upload a CSV file, where the first row is the header.</small>
+        </form>
+    </article>
+  );
+}
+
+export default CSVCard;