Update

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

@@ -1,15 +1,18 @@
 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 { useMitt } from '@/plugins/MittContext';
+import CartIcon from '@/reusables/cart-icon';
 import useLocalSettingsStore from '@/stores/localSettingsStore';
 import { Menu } from 'lucide-react';
-import { useState } from 'react';
 
 const EditorHeader = ({ className = '', onNavClick = () => {}, isNavActive = false }) => {
     const { getSetting } = useLocalSettingsStore();
 
-    const [openCoinDialog, setOpenCoinDialog] = useState(false);
+    const emitter = useMitt();
+
+    const openUpgradeSheet = () => {
+        emitter.emit('openUpgradeSheet');
+    };
 
     return (
         <div className={cn('flex w-full items-center justify-between rounded-xl bg-white p-2 shadow-sm dark:bg-neutral-700', className)}>
@@ -19,33 +22,16 @@ const EditorHeader = ({ className = '', onNavClick = () => {}, isNavActive = fal
 
             <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
+                variant="outline"
+                className="inline-flex gap-1 rounded"
+                onClick={() => {
+                    openUpgradeSheet();
+                }}
+            >
+                {/* <span className="text-sm font-semibold">0</span> */}
+                <CartIcon className="h-8 w-8" />
             </Button>
-
-            <Dialog open={openCoinDialog} onOpenChange={(open) => setOpenCoinDialog(open)}>
-                <DialogContent className="sm:max-w-[425px]">
-                    <DialogHeader>
-                        <DialogTitle>{getSetting('genAlphaSlang') ? 'Bruh' : 'Feature coming soon'}</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>
     );
 };