diff --git a/src/App.js b/src/App.js index 70af10d..7b395d3 100644 --- a/src/App.js +++ b/src/App.js @@ -2,6 +2,7 @@ import { useState, useCallback } from 'react' import './App.css' import { useDropzone } from 'react-dropzone' import FrameChooser from './FrameChooser.js' +import HashtagChooser from './HashtagChooser.js' import Editor from './Editor.js' import HeaderImage from './HeaderImage.svg' import purpleBG from './purpleBG.png' @@ -67,6 +68,7 @@ function trigger_download(name, data){ function App() { const [frameURL, setFrameURL] = useState(null) + const [hashtagURL, setHashtagURL] = useState(null) const [originalPhoto, setOriginalPhoto] = useState(null) const [originalPhotoRation, setOriginalPhotoRation] = useState(1) const [orientation, set_orientation] = useState(null) @@ -83,6 +85,10 @@ function App() { setFrameURL(newFrameURL) }, [setFrameURL]) + const handleHashtagURL = useCallback(newHashtagURL => { + setHashtagURL(newHashtagURL) + }, [setHashtagURL]) + const handleCordsChange = useCallback(({x, y, scale}) => { setCords({ x, y, scale }) }, []) @@ -242,6 +248,7 @@ function App() { purpleBG, ...(pngUrl ? [pngUrl] : []), ...(frameURL ? [frameURL] : []), + ...(hashtagURL ? [hashtagURL] : []), ]) .then(b64 => { // set_combinedImage(b64) @@ -257,6 +264,7 @@ function App() { cords.scale, orientation, frameURL, + hashtagURL, height, width, ]) @@ -288,6 +296,7 @@ function App() { {!!originalPhoto ? (<> + ) : null} {!!originalPhoto && !!frameURL ? (<> diff --git a/src/HashtagChooser.js b/src/HashtagChooser.js new file mode 100644 index 0000000..2985101 --- /dev/null +++ b/src/HashtagChooser.js @@ -0,0 +1,63 @@ +import { useState, useEffect, useCallback } from 'react' + +function HashtagChooser({ onChange }) { + const [frames, setFrames] = useState([]) + const [choosenFrame, setChoosenFrame] = useState(null) + + useEffect(() => { + async function loadFrames() { + Promise.all( + [ + '', + 'DeineWahl', + 'Europa', + 'JetztBistDuDran', + 'paneuropäisch', + 'pragmatisch', + 'progressiv', + 'Volt', + 'Volt21', + 'VoltEuropa', + 'VoltRLP', + 'VoteVolt', + ] + .map(async frame_filename => { + return { + name: frame_filename, + src: frame_filename === '' ? '' : await import(`./hashtags/${frame_filename}.png`), + } + }) + ) + .then(new_frames => { + setFrames(new_frames) + setChoosenFrame(new_frames[0].src.default) + }) + } + loadFrames() + }, []) + + const handleImageChoosing = useCallback(event => { + setChoosenFrame(event.target.dataset.src) + }, [setChoosenFrame]) + + useEffect(() => { + onChange(choosenFrame) + }, [onChange, choosenFrame]) + + return ( +
+

Choose a Hashtag:

+ { + frames.map(frame => { + const frame_src_path = frame.src.default + const isChoosen = choosenFrame === frame_src_path + return + }) + } +
+ ) +} + +export default HashtagChooser diff --git a/src/hashtags/DeineWahl.png b/src/hashtags/DeineWahl.png new file mode 100644 index 0000000..314f737 Binary files /dev/null and b/src/hashtags/DeineWahl.png differ diff --git a/src/hashtags/Europa.png b/src/hashtags/Europa.png new file mode 100644 index 0000000..8d39810 Binary files /dev/null and b/src/hashtags/Europa.png differ diff --git a/src/hashtags/JetztBistDuDran.png b/src/hashtags/JetztBistDuDran.png new file mode 100644 index 0000000..8b61eb9 Binary files /dev/null and b/src/hashtags/JetztBistDuDran.png differ diff --git a/src/hashtags/Volt.png b/src/hashtags/Volt.png new file mode 100644 index 0000000..951cbab Binary files /dev/null and b/src/hashtags/Volt.png differ diff --git a/src/hashtags/Volt21.png b/src/hashtags/Volt21.png new file mode 100644 index 0000000..249423a Binary files /dev/null and b/src/hashtags/Volt21.png differ diff --git a/src/hashtags/VoltEuropa.png b/src/hashtags/VoltEuropa.png new file mode 100644 index 0000000..73a98c2 Binary files /dev/null and b/src/hashtags/VoltEuropa.png differ diff --git a/src/hashtags/VoltRLP.png b/src/hashtags/VoltRLP.png new file mode 100644 index 0000000..56fd7a4 Binary files /dev/null and b/src/hashtags/VoltRLP.png differ diff --git a/src/hashtags/VoteVolt.png b/src/hashtags/VoteVolt.png new file mode 100644 index 0000000..5cc96e0 Binary files /dev/null and b/src/hashtags/VoteVolt.png differ diff --git a/src/hashtags/paneuropäisch.png b/src/hashtags/paneuropäisch.png new file mode 100644 index 0000000..c51ba3c Binary files /dev/null and b/src/hashtags/paneuropäisch.png differ diff --git a/src/hashtags/pragmatisch.png b/src/hashtags/pragmatisch.png new file mode 100644 index 0000000..875c1e1 Binary files /dev/null and b/src/hashtags/pragmatisch.png differ diff --git a/src/hashtags/progressiv.png b/src/hashtags/progressiv.png new file mode 100644 index 0000000..43c1d1d Binary files /dev/null and b/src/hashtags/progressiv.png differ