From a7622d2df0c3a0229c9b19b710a081abce6af2fc Mon Sep 17 00:00:00 2001 From: Kyle Awayan <56655579+kyleawayan@users.noreply.github.com> Date: Tue, 9 Feb 2021 00:09:53 -0800 Subject: [PATCH] almost done --- .gitignore | 34 +++++++++++++++++++++++++ README.md | 2 +- components/AlbumArt.tsx | 50 +++++++++++++++++++++++++++++++------ components/Editor.tsx | 25 +++++++++++++++++-- package.json | 5 +++- pages/index.tsx | 6 ++++- public/test.jpg | Bin 0 -> 51055 bytes styles/albumArt.module.css | 20 ++++++++++++--- styles/center.module.css | 2 -- styles/globals.css | 32 ++++++++++++++++++++++++ yarn.lock | 38 +++++++++++++++++++++++++++- 11 files changed, 196 insertions(+), 18 deletions(-) create mode 100644 .gitignore create mode 100644 public/test.jpg diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..1437c53 --- /dev/null +++ b/.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 diff --git a/README.md b/README.md index 0dabc23..a01920d 100644 --- a/README.md +++ b/README.md @@ -1 +1 @@ -# palette +# IU Palette Generator diff --git a/components/AlbumArt.tsx b/components/AlbumArt.tsx index dd7217e..886c2cc 100644 --- a/components/AlbumArt.tsx +++ b/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 (
Drop the files here ...
+ ) : ( +Drag 'n' drop some files here, or click to select files
+ )} +k<`h=5WIK0i195xkPL=nwEfkdYj_RcL1FAe}JEXJ${e5
z>I=^vhp8n)N^#=`aT9Jom14$Iz}n 3U%0{&ra7aAW&&jx=-4E$KAX1v~n9|2USHbL!K6zS5fgVI-)%
z=K8M3X=9e<`-Z^D&n$m&ZdQmmjj3s8-j@ckTeu_`C{f7p4U-s37ZM(V))aOL_aYIb
zP*AWmIqNjQRW8hMr-}AcV(r}V)`^{GY;63H!KCnlpWAG1o^Y*gxBn5TYwM;5^No}=eLm(tAoEzVCWZvWhtFEK+V72?}+ZoWI7O0
z`qmk=yQw*%(s_0Cn{Prs`Wi9y;{R^i56;r@xluO-%gK0FjU7+uAjq=4*8%ZkO~
zO)5kCwWe05&2D)7`pAbO{IiMZS7p9c3^L!|t-m
ztZM*sB*sDr+uzamc3=1LN_uQq&s_hQUo=5xM6Aw3gc2uOf`JM{qKVA;1`UsdTEE48
znmV{DTCA5-cuJ?6W*{G|1?H39;Cs1q`JvUng|ZncsOcl)8rUMIO@B*>sY04Ub*=yL
z*T(aHRwoI)4!s&b71Qp3BC-$b3oXY0L%|dB`I2EHMGg!*_>ezIkkNej=eR?nQTr~A
z*p4E8h7zF;821M#%spE}LY<8pGZIf{=JjHFx&F?~^R>WJUyhug{`=QkRyVBP@;Zk^
zcd)1gW}|}Ew5lO%bW!i!8jvXE4%Cg@q#jG{=ro8u`wuWpUP#IlE?6U1fHFChW`1MP
z)T43xC`cufau+#Pz;7{V9N($l00%)!6lNgv-m>&IeG~)*=mpW?$(liJ^m=kSbQgxn
z^O<~#eu-Z