This commit is contained in:
zramsay 2024-12-20 08:23:57 -05:00
parent ac358c4cb6
commit c4eb9fbd13

View File

@ -247,7 +247,7 @@ const processPaymentAndGenerate = async (): Promise<void> => {
<div className="container max-w-2xl mx-auto px-4 py-8 flex flex-col items-center"> <div className="container max-w-2xl mx-auto px-4 py-8 flex flex-col items-center">
{/* Header */} {/* Header */}
<div className="w-full text-center mb-8"> <div className="w-full text-center mb-8">
<h1 className="text-4xl sm:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600"> <h1 className="text-4xl sm:text-5xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-emerald-600">
AI Meme Generator AI Meme Generator
</h1> </h1>
<p className="text-gray-400 text-lg"> <p className="text-gray-400 text-lg">
@ -261,9 +261,9 @@ const processPaymentAndGenerate = async (): Promise<void> => {
{!walletState.connected ? ( {!walletState.connected ? (
<button <button
onClick={connectWallet} onClick={connectWallet}
className="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 className="w-full bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600
text-white font-semibold py-4 px-6 rounded-xl transition-all duration-200 text-white font-semibold py-4 px-6 rounded-xl transition-all duration-200
shadow-lg hover:shadow-purple-500/25" shadow-lg hover:shadow-green-500/25"
> >
Connect Solflare Wallet Connect Solflare Wallet
</button> </button>
@ -271,9 +271,9 @@ const processPaymentAndGenerate = async (): Promise<void> => {
<div className="space-y-6"> <div className="space-y-6">
{/* Wallet Info */} {/* Wallet Info */}
<div className="flex items-center justify-between bg-gray-900/30 rounded-lg p-3"> <div className="flex items-center justify-between bg-gray-900/30 rounded-lg p-3">
<span className="text-gray-400">Connected Wallet: </span> <span className="text-gray-400">Connected Wallet</span>
<span className="px-3 py-1 bg-purple-500/20 rounded-full text-purple-300 text-sm"> <span className="px-3 py-1 bg-green-500/20 rounded-full text-green-300 text-sm">
{walletState.publicKey?.slice(0, 22)}... {walletState.publicKey?.slice(0, 8)}...
</span> </span>
</div> </div>
@ -284,16 +284,16 @@ const processPaymentAndGenerate = async (): Promise<void> => {
onChange={(e) => setInputText(e.target.value)} onChange={(e) => setInputText(e.target.value)}
placeholder="Describe your meme idea here..." placeholder="Describe your meme idea here..."
className="w-full bg-gray-900/50 text-gray-100 border border-gray-700 rounded-xl p-4 className="w-full bg-gray-900/50 text-gray-100 border border-gray-700 rounded-xl p-4
placeholder-gray-500 focus:border-purple-500 focus:ring-2 focus:ring-purple-500/20 placeholder-gray-500 focus:border-green-500 focus:ring-2 focus:ring-green-500/20
focus:outline-none min-h-[120px] transition-all duration-200" focus:outline-none min-h-[120px] transition-all duration-200"
rows={4} rows={4}
/> />
<button <button
onClick={processPaymentAndGenerate} onClick={processPaymentAndGenerate}
disabled={generationState.processing || generationState.loading || !inputText} disabled={generationState.processing || generationState.loading || !inputText}
className="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 className="w-full bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600
hover:to-pink-600 text-white font-semibold py-4 px-6 rounded-xl hover:to-emerald-600 text-white font-semibold py-4 px-6 rounded-xl
transition-all duration-200 shadow-lg hover:shadow-purple-500/25 transition-all duration-200 shadow-lg hover:shadow-green-500/25
disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-none" disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-none"
> >
{generationState.processing ? 'Processing Payment...' : {generationState.processing ? 'Processing Payment...' :
@ -319,9 +319,9 @@ const processPaymentAndGenerate = async (): Promise<void> => {
{(generationState.processing || generationState.loading) && ( {(generationState.processing || generationState.loading) && (
<div className="flex justify-center items-center w-full mb-8"> <div className="flex justify-center items-center w-full mb-8">
<div className="flex space-x-2"> <div className="flex space-x-2">
<div className="w-3 h-3 bg-purple-400 rounded-full animate-bounce"></div> <div className="w-3 h-3 bg-green-400 rounded-full animate-bounce"></div>
<div className="w-3 h-3 bg-purple-400 rounded-full animate-bounce delay-100"></div> <div className="w-3 h-3 bg-green-400 rounded-full animate-bounce delay-100"></div>
<div className="w-3 h-3 bg-purple-400 rounded-full animate-bounce delay-200"></div> <div className="w-3 h-3 bg-green-400 rounded-full animate-bounce delay-200"></div>
</div> </div>
</div> </div>
)} )}