Update

resources/js/modules/editor/partials/editor-header.tsx

@@ -1,26 +1,53 @@
-import { Button } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
-import CoinIcon from "@/reusables/coin-icon"
-import { Menu, Coins } from "lucide-react"
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { cn } from '@/lib/utils';
+import CoinIcon from '@/reusables/coin-icon';
+import useLocalSettingsStore from '@/stores/localSettingsStore';
+import { Menu } from 'lucide-react';
+import { useState } from 'react';
 
-const EditorHeader = (
-    {className = ''}
-) => {
-  return (
-      <div className={cn("bg-white rounded-xl p-2 flex items-center justify-between shadow-sm w-full", className)}>
-      <Button variant="outline" size="icon" className="rounded">
-        <Menu className="h-8 w-8" />
-      </Button>
+const EditorHeader = ({ className = '', onNavClick = () => {}, isNavActive = false }) => {
+    const { getSetting } = useLocalSettingsStore();
 
-        <h1 className="text-lg md:text-xl font-display tracking-wide ml-0 md:ml-3">MEMEAIGEN</h1>
+    const [openCoinDialog, setOpenCoinDialog] = useState(false);
 
-        <Button variant="outline" className="rounded inline-flex gap-1">
-        <span className="text-sm font-semibold">100</span>
-        <CoinIcon className="w-8 h-8" />
-        </Button>
+    return (
+        <div className={cn('flex w-full items-center justify-between rounded-xl bg-white p-2 shadow-sm', className)}>
+            <Button onClick={onNavClick} variant="outline" size="icon" className="rounded">
+                <Menu className="h-8 w-8" />
+            </Button>
 
-    </div>
-  )
-}
+            <h1 className="font-display ml-0 text-lg tracking-wide md:ml-3 md:text-xl">MEMEAIGEN</h1>
+
+            <Button variant="outline" className="inline-flex gap-1 rounded" onClick={() => setOpenCoinDialog(true)}>
+                <span className="text-sm font-semibold">0</span>
+                <CoinIcon className="h-8 w-8" />
+            </Button>
+
+            <Dialog open={openCoinDialog} onOpenChange={(open) => setOpenCoinDialog(open)}>
+                <DialogContent className="sm:max-w-[425px]">
+                    <DialogHeader>
+                        <DialogTitle>{getSetting('genAlphaSlang') ? 'Bruh' : 'Chill'}</DialogTitle>
+                        <DialogDescription>
+                            {getSetting('genAlphaSlang')
+                                ? "No cap, soon you'll be able to get AI cooking memes that absolutely slay! But lowkey fam, we gotta focus on making these core features bussin' first."
+                                : "Soon you'll be able to prompt AI to generate memes! Let us focus on nailing the core features first."}
+                        </DialogDescription>
+                    </DialogHeader>
+                    <DialogFooter>
+                        <div className="flex justify-between gap-1">
+                            <span class="text-muted-foreground text-xs italic">
+                                Note: You can turn {getSetting('genAlphaSlang') ? 'off' : 'on'} gen alpha slang in Settings.
+                            </span>
+                            <Button variant="outline" onClick={() => setOpenCoinDialog(false)}>
+                                {getSetting('genAlphaSlang') ? 'Bet' : 'Okay'}
+                            </Button>
+                        </div>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+        </div>
+    );
+};
 
 export default EditorHeader;