From 81c38dd9e3bd41ff8f0a1caab8b77bad09c9ba7d Mon Sep 17 00:00:00 2001
From: ct <charlesteh90@gmail.com>
Date: Fri, 4 Jul 2025 03:16:48 +0800
Subject: [PATCH] Update

---
 .../editor/partials/editor-ai-sheet.jsx       | 55 +++++++++++--------
 1 file changed, 32 insertions(+), 23 deletions(-)

diff --git a/resources/js/modules/editor/partials/editor-ai-sheet.jsx b/resources/js/modules/editor/partials/editor-ai-sheet.jsx
index 4142b44..b98a27c 100644
--- a/resources/js/modules/editor/partials/editor-ai-sheet.jsx
+++ b/resources/js/modules/editor/partials/editor-ai-sheet.jsx
@@ -18,7 +18,7 @@ const EditorAISheet = () => {
     const emitter = useMitt();
     const { generateMeme, isGeneratingMeme, keywords, isLoadingAIHints, fetchAIHints } = useMediaStore();
 
-    const { user } = useUserStore();
+    const { credits } = useUserStore();
     const { auth } = usePage().props;
 
     useEffect(() => {
@@ -66,7 +66,7 @@ const EditorAISheet = () => {
                             placeholder="Make a meme for e.g. work life stress"
                             value={prompt}
                             onChange={(e) => setPrompt(e.target.value)}
-                            className="bg-muted/30 max-h-20 min-h-12 resize-none rounded-3xl border-0 p-4 text-base"
+                            className="bg-muted/30 max-h-20 min-h-12 resize-none rounded-3xl border-0 p-4 text-center text-base"
                         />
 
                         {/* AI Keywords */}
@@ -89,27 +89,36 @@ const EditorAISheet = () => {
                             </div>
                         )}
                         <div className={cn('space-y-2', !prompt.trim() && 'invisible')}>
-                            <Button
-                                onClick={handleSend}
-                                className={cn('w-full rounded-full')}
-                                size="lg"
-                                variant="outline"
-                                disabled={!prompt.trim() || isGeneratingMeme}
-                            >
-                                {isGeneratingMeme ? (
-                                    <Spinner className="text-primary h-4 w-4" />
-                                ) : (
-                                    <>
-                                        Generate Meme
-                                        <div className="flex items-center gap-1">
-                                            <CoinIcon></CoinIcon> 2
-                                        </div>
-                                    </>
-                                )}
-                            </Button>
-                            <div className="text-muted-foreground text-center text-xs">
-                                A new meme costs 1 credit for AI captions & 1 credit for AI background.{' '}
-                            </div>
+                            {auth.user ? (
+                                <>
+                                    <Button
+                                        onClick={handleSend}
+                                        className={cn('w-full rounded-full')}
+                                        size="lg"
+                                        variant="outline"
+                                        disabled={!prompt.trim() || isGeneratingMeme}
+                                    >
+                                        {isGeneratingMeme ? (
+                                            <Spinner className="text-primary h-4 w-4" />
+                                        ) : (
+                                            <>
+                                                Generate Meme
+                                                <div className="flex items-center gap-1">
+                                                    <CoinIcon></CoinIcon> 2
+                                                </div>
+                                            </>
+                                        )}
+                                    </Button>
+                                    <div className="text-muted-foreground text-center text-xs">
+                                        A new meme costs 1 credit for AI captions & 1 credit for AI background.{' '}
+                                    </div>
+                                    <div className="text-muted-foreground text-center text-xs">You have {credits} credits remaining.</div>
+                                </>
+                            ) : (
+                                <>
+                                    <div className="text-muted-foreground text-center text-xs">Login / Signup to use AI features.</div>
+                                </>
+                            )}
                         </div>
                     </div>
                 </div>