\n {}\n

\n {showInstructions && !uploadedImage ?

\n \n \n

Upload Your Meme Template

\n Start by clicking the Upload button or drop an image here\n

\n fileInputRef.current?.click()}>\n Choose Image\n \n \n

\n {uploadedImage && $\"Meme$ }\n {uploadedImage && <>\n handleDragStart('top')} onDrag={e => handleDrag(e, 'top')} onDragEnd={handleDragEnd}>\n {memeText.top.toUpperCase()}\n \n handleDragStart('bottom')} onDrag={e => handleDrag(e, 'bottom')} onDragEnd={handleDragEnd}>\n {memeText.bottom.toUpperCase()}\n \n }\n

}\n

\n \n {uploadedImage &&

\n fileInputRef.current?.click()}>\n \n Change Template\n \n \n {downloadingMeme ? : }\n {downloadingMeme ? 'Downloading...' : 'Download Meme'}\n \n

}\n

\n \n {}\n

\n \n Generate Meme Text\n

\n \n

\n \n Meme Topic\n \n

\n setTopic(e.target.value)} placeholder=\"cats, exams, mondays, relationships...\" className=\"flex-1 px-4 py-2 bg-gray-700 rounded-lg focus:ring-2 focus:ring-purple-500 outline-none\" />\n \n {isLoading || generating ? : }\n Generate\n \n

\n \n {(memeText.top || memeText.bottom) && \n

\n \n Top Text\n \n \n \n Regenerate\n \n

\n setMemeText({\n ...memeText,\n top: e.target.value\n })} className=\"w-full px-4 py-2 bg-gray-700 rounded-lg\" />\n \n \n Bottom Text\n \n setMemeText({\n ...memeText,\n bottom: e.target.value\n })} className=\"w-full px-4 py-2 bg-gray-700 rounded-lg\" />\n }\n

\n \n {(memeText.top || memeText.bottom) && \n

Text Styling

\n \n

\n \n Font Size\n \n setTextStyles({\n ...textStyles,\n fontSize: parseInt(e.target.value)\n })} className=\"w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-purple-500\" />\n

\n Small\n Large\n

\n \n

\n \n Text Color\n \n

\n setTextStyles({\n ...textStyles,\n color: e.target.value\n })} className=\"w-10 h-10 rounded cursor-pointer\" />\n {textStyles.color}\n

\n \n

\n \n Outline Color\n \n

\n setTextStyles({\n ...textStyles,\n stroke: e.target.value\n })} className=\"w-10 h-10 rounded cursor-pointer\" />\n {textStyles.stroke}\n

\n \n

\n \n Font Style\n \n \n

\n }\n \n \n {uploadedImage && !memeText.top && !memeText.bottom && \n

\n \n Pro Tip\n

\n Enter a topic like \"cats,\" \"dating fails,\" or \"work life\" and click Generate for instant meme magic! Then drag the text to position it perfectly.\n

\n }\n \n

say something