From b7f59a0e10be946482bac32b074f1d3be00384d2 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Mon, 14 Sep 2020 22:27:07 -0700
Subject: [PATCH] Add droptarget

---
 src/DropTarget.js | 39 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/DropTarget.js

diff --git a/src/DropTarget.js b/src/DropTarget.js
new file mode 100644
index 00000000..b305a8b2
--- /dev/null
+++ b/src/DropTarget.js
@@ -0,0 +1,39 @@
+import React from "react";
+
+function DropTarget({ getInputProps }) {
+  return (
+    <div
+      style={{
+        margin: 20,
+        flexGrow: 1,
+        border: "8px dashed grey",
+        borderRadius: 20,
+        color: "grey",
+        textAlign: "center",
+        vericalAlign: "middle",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        flexDirection: "column",
+      }}
+    >
+      <div style={{ fontSize: 30, color: "white" }}>Drop Skins Here</div>
+      <div
+        style={{
+          paddingTop: 30,
+          fontSize: 20,
+          paddingLeft: 25,
+          paddingRight: 25,
+          lineHeight: 1.3,
+          maxWidth: 400,
+        }}
+      >
+        We'll analyze them in your browser to find any that are missing from the
+        museum
+      </div>
+      <input {...getInputProps()} />
+    </div>
+  );
+}
+
+export default DropTarget;