almost done

.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

README.md

@@ -1 +1 @@
-# palette
+# IU Palette Generator

components/AlbumArt.tsx

@@ -1,16 +1,52 @@
+import { useState, useCallback } from "react";
 import styles from "../styles/albumArt.module.css";
+import { useDropzone } from "react-dropzone";
+import Center from "./Center";
 
 export default function AlbumArt() {
+  const [imageBase64, setImageBase64] = useState(null);
+
+  const onDrop = useCallback((acceptedFiles) => {
+    acceptedFiles.forEach((file) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+
+      reader.onabort = () => console.log("file reading was aborted");
+      reader.onerror = () => console.log("file reading has failed");
+      reader.onload = () => {
+        // Do whatever you want with the file contents
+        const binaryStr = reader.result;
+        setImageBase64(binaryStr);
+      };
+    });
+  }, []);
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
+
   return (
     <div className={styles.palette}>
       <img src="frame.png" className={styles.frame}></img>
-      <img
-        src="http://cdn.cnn.com/cnnnext/dam/assets/181010131059-australia-best-beaches-cossies-beach-cocos3.jpg"
-        className={styles.picture}
-      ></img>
-      <div className={styles.caption}>
-        <span className={styles.captionPink}>IU</span>{" "}
-        <span className={styles.captionBlue}>Palette</span>
+      {imageBase64 && <img src={imageBase64} className={styles.picture} />}
+      <div {...getRootProps()} className={styles.upload}>
+        <input {...getInputProps()} />
+        {!imageBase64 && (
+          <Center>
+            {isDragActive ? (
+              <p>Drop the files here ...</p>
+            ) : (
+              <p>Drag 'n' drop some files here, or click to select files</p>
+            )}
+          </Center>
+        )}
+      </div>
+      <div className={styles.captionContainer}>
+        <div className={styles.caption}>
+          <span className={styles.captionPink} contentEditable="true">
+            Click me to edit.
+          </span>{" "}
+          <span className={styles.captionBlue} contentEditable="true">
+            Also click me.
+          </span>
+        </div>
       </div>
     </div>
   );

components/Editor.tsx

@@ -1,13 +1,34 @@
 import styles from "../styles/editor.module.css";
 import AlbumArt from "./AlbumArt";
+import * as domtoimage from "dom-to-image";
+import { saveAs } from "file-saver";
+import { useRef } from "react";
 
 export default function Editor() {
+  const palette = useRef(null);
+
+  const saveImage = () => {
+    domtoimage.toBlob(palette.current).then(function (blob) {
+      console.log("save?");
+      saveAs(blob, "my-node.png");
+    });
+  };
+
   return (
     <div className={styles.parent}>
-      <div className={styles.child}>
+      <div
+        className={styles.child}
+        ref={palette}
+        style={{
+          boxShadow:
+            "0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)",
+        }}
+      >
         <AlbumArt />
       </div>
-      <div className={styles.child}>test2</div>
+      <div className={styles.child} style={{ marginTop: "25px" }}>
+        <button onClick={saveImage}>download</button>
+      </div>
     </div>
   );
 }

package.json

@@ -8,9 +8,12 @@
     "start": "next start"
   },
   "dependencies": {
+    "dom-to-image": "^2.6.0",
+    "file-saver": "^2.0.5",
     "next": "10.0.6",
     "react": "17.0.1",
-    "react-dom": "17.0.1"
+    "react-dom": "17.0.1",
+    "react-dropzone": "^11.3.1"
   },
   "devDependencies": {
     "@types/node": "^14.14.25",

pages/index.tsx

@@ -13,7 +13,11 @@ export default function Index() {
           <Editor />
         </Center>
       </main>
-      <footer>by kylan</footer>
+      <footer>
+        <a href="https://github.com/kyleawayan/palette" target="_blank">
+          github
+        </a>
+      </footer>
     </div>
   );
 }

styles/albumArt.module.css

@@ -8,6 +8,8 @@
 
 .palette {
   position: relative;
+  max-height: 50vh;
+  max-width: 50vh;
 }
 
 .frame {
@@ -27,12 +29,12 @@
 
 .caption {
   position: absolute;
-  bottom: 21%;
-  right: 44%;
+  bottom: 19.6%;
   z-index: 2;
   font-size: 1.5vh;
   text-align: center;
-  transform: rotate(0.5deg);
+  width: 100%;
+  transform: rotate(0.05deg);
 }
 
 .captionPink {
@@ -42,3 +44,15 @@
 .captionBlue {
   color: rgb(32, 184, 205);
 }
+
+.upload {
+  position: absolute;
+  top: 14.3%;
+  left: 21.8%;
+  z-index: 2;
+  font-size: 1.2vh;
+  text-align: center;
+  width: 55.5%;
+  height: 57%;
+  transform: rotate(-0.02deg);
+}

styles/center.module.css

@@ -2,13 +2,11 @@
   display: grid;
   place-items: center;
   height: 100%;
-  resize: both;
   overflow: auto;
 }
 
 .childCenter {
   padding: 0.5rem;
   border-radius: 10px;
-  font-size: 2rem;
   text-align: center;
 }

styles/globals.css

@@ -5,6 +5,7 @@ body {
   font-family: ltc-bodoni-175, serif;
   font-weight: 400;
   font-style: italic;
+  background-color: #f5f5f5;
 }
 
 .pancake {
@@ -21,3 +22,34 @@ footer {
   padding: 2rem;
   text-align: center;
 }
+
+/* https://codepen.io/sdthornton/pen/wBZdXq */
+
+button {
+  font-family: ltc-bodoni-175, serif;
+  font-weight: 400;
+  font-style: italic;
+  border: none;
+  outline: none;
+  background-color: rgb(187, 61, 65);
+  color: white;
+  padding: 10px;
+  font-size: 15px;
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+  transition: 0.1s;
+}
+
+button:hover {
+  background-color: rgb(230, 69, 74);
+  transition: 0.1s;
+  cursor: pointer;
+}
+
+button:active {
+  transform: scale(0.98);
+  transition: 0.1s;
+}
+
+a {
+  color: black;
+}

yarn.lock

@@ -269,6 +269,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.13.2.tgz#df39b677a911a83f3a049644fb74fdded23cea48"
   integrity sha512-uWMHxJxtfj/1oZClOxDEV1sQ1HCDkA4MG8Gr69KKeBjEVH0R84WlejZ0y2DcwyBlpAEMltmVYkVgqfLFb2oyiA==
 
+attr-accept@^2.2.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b"
+  integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==
+
 [email protected]:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
@@ -757,6 +762,11 @@ dom-serializer@^1.0.1:
     domhandler "^4.0.0"
     entities "^2.0.0"
 
+dom-to-image@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/dom-to-image/-/dom-to-image-2.6.0.tgz#8a503608088c87b1c22f9034ae032e1898955867"
+  integrity sha1-ilA2CAiMh7HCL5A0rgMuGJiVWGc=
+
 domain-browser@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
@@ -877,6 +887,18 @@ expand-template@^2.0.3:
   resolved "https://registry.yarnpkg.com/expand-template/-/expand-template-2.0.3.tgz#6e14b3fcee0f3a6340ecb57d2e8918692052a47c"
   integrity sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==
 
+file-saver@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-2.0.5.tgz#d61cfe2ce059f414d899e9dd6d4107ee25670c38"
+  integrity sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==
+
+file-selector@^0.2.2:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.2.4.tgz#7b98286f9dbb9925f420130ea5ed0a69238d4d80"
+  integrity sha512-ZDsQNbrv6qRi1YTDOEWzf5J2KjZ9KMI1Q2SGeTkCJmNNW25Jg4TW4UMcmoqcg4WrAyKRcpBXdbWRxkfrOzVRbA==
+  dependencies:
+    tslib "^2.0.3"
+
 fill-range@^7.0.1:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
@@ -1569,7 +1591,7 @@ [email protected], process@^0.11.10:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
 
-[email protected]:
+[email protected], prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -1667,6 +1689,15 @@ [email protected]:
     object-assign "^4.1.1"
     scheduler "^0.20.1"
 
+react-dropzone@^11.3.1:
+  version "11.3.1"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.3.1.tgz#a3115e728b32b33e89f03d691b5b3b44b7f9072f"
+  integrity sha512-gPyw524T6dYZW81aQoBGmBG90cVNs+YJreh3HaN45Yw09Bm6m4aA6IF9ergHZQAWGeDSJ+DUhDKKAAaDdTj3RQ==
+  dependencies:
+    attr-accept "^2.2.1"
+    file-selector "^0.2.2"
+    prop-types "^15.7.2"
+
 [email protected], react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -2088,6 +2119,11 @@ ts-pnp@^1.1.6:
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
   integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
 
+tslib@^2.0.3:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.1.0.tgz#da60860f1c2ecaa5703ab7d39bc05b6bf988b97a"
+  integrity sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==
+
 [email protected]:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"