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