mito-systems/sol-mem-gen
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

green

Browse Source
This commit is contained in:
zramsay 2024-12-20 08:23:57 -05:00
parent ac358c4cb6
commit c4eb9fbd13
1 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/app/page.tsx
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">
{/* Header */}
<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
</h1>
<p className="text-gray-400 text-lg">
@ -261,9 +261,9 @@ const processPaymentAndGenerate = async (): Promise<void> => {
{!walletState.connected ? (
<button
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
shadow-lg hover:shadow-purple-500/25"
shadow-lg hover:shadow-green-500/25"
>
Connect Solflare Wallet
</button>
@ -271,9 +271,9 @@ const processPaymentAndGenerate = async (): Promise<void> => {
<div className="space-y-6">
{/* Wallet Info */}
<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="px-3 py-1 bg-purple-500/20 rounded-full text-purple-300 text-sm">
{walletState.publicKey?.slice(0, 22)}...
<span className="text-gray-400">Connected Wallet</span>
<span className="px-3 py-1 bg-green-500/20 rounded-full text-green-300 text-sm">
{walletState.publicKey?.slice(0, 8)}...
</span>
</div>
@ -284,16 +284,16 @@ const processPaymentAndGenerate = async (): Promise<void> => {
onChange={(e) => setInputText(e.target.value)}
placeholder="Describe your meme idea here..."
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"
rows={4}
/>
<button
onClick={processPaymentAndGenerate}
disabled={generationState.processing || generationState.loading || !inputText}
className="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600
hover:to-pink-600 text-white font-semibold py-4 px-6 rounded-xl
transition-all duration-200 shadow-lg hover:shadow-purple-500/25
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 shadow-lg hover:shadow-green-500/25
disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-none"
>
{generationState.processing ? 'Processing Payment...' :
@ -319,9 +319,9 @@ const processPaymentAndGenerate = async (): Promise<void> => {
{(generationState.processing || generationState.loading) && (
<div className="flex justify-center items-center w-full mb-8">
<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-purple-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"></div>
<div className="w-3 h-3 bg-green-400 rounded-full animate-bounce delay-100"></div>
<div className="w-3 h-3 bg-green-400 rounded-full animate-bounce delay-200"></div>
</div>
</div>
)}