From f158367eb2ca052c5ef980e1c7c26508aac12fe3 Mon Sep 17 00:00:00 2001
From: Jaydip Sanghani <91427591+jellydeck@users.noreply.github.com>
Date: Thu, 30 Oct 2025 22:22:03 +0530
Subject: [PATCH] chore: fixed QR code image, cleanup of unused imports

---
 src/components/editor/Navbar.tsx | 211 +++++++++++++++++++------------
 1 file changed, 130 insertions(+), 81 deletions(-)

diff --git a/src/components/editor/Navbar.tsx b/src/components/editor/Navbar.tsx
index 8175385..5243744 100644
--- a/src/components/editor/Navbar.tsx
+++ b/src/components/editor/Navbar.tsx
@@ -1,10 +1,15 @@
-import { useState } from 'react';
-import { Button } from '@/components/ui/button';
-import { Slider } from '@/components/ui/slider';
-import { Card, CardContent, CardHeader } from '@/components/ui/card';
-import { Dialog, DialogContent, DialogTrigger, DialogHeader, DialogTitle } from '@/components/ui/dialog';
-import { Badge } from '@/components/ui/badge';
-import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogTrigger,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import upiQR from "/assets/upiQR.png";
 import {
   Download,
   ChevronDown,
@@ -16,29 +21,34 @@ import {
   Twitter,
   X,
   CheckCircle,
-  Github
-} from 'lucide-react';
-import { toast } from 'sonner';
-import { useMockupStore } from '@/contexts/MockupContext';
-import html2canvas from 'html2canvas';
+  Github,
+} from "lucide-react";
+import { toast } from "sonner";
+import { useMockupStore } from "@/contexts/MockupContext";
+import html2canvas from "html2canvas";
 
 export function Navbar() {
   const [showExportOptions, setShowExportOptions] = useState(false);
-  const [exportFormat, setExportFormat] = useState('PNG');
+  const [exportFormat, setExportFormat] = useState("PNG");
   const [quality, setQuality] = useState([2]);
   const [isExporting, setIsExporting] = useState(false);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
 
   const { uploadedImage, imageBorder, fixedMargin, margin } = useMockupStore();
 
-  const isMobile = typeof window !== 'undefined' ? window.innerWidth < 768 : false;
+  const isMobile =
+    typeof window !== "undefined" ? window.innerWidth < 768 : false;
 
   const getQualityLabel = (value) => {
     switch (value) {
-      case 1: return 'Standard (1x)';
-      case 2: return 'High (2x)';
-      case 3: return 'Ultra (3x)';
-      default: return `${value}x`;
+      case 1:
+        return "Standard (1x)";
+      case 2:
+        return "High (2x)";
+      case 3:
+        return "Ultra (3x)";
+      default:
+        return `${value}x`;
     }
   };
 
@@ -46,11 +56,13 @@ export function Navbar() {
     if (!uploadedImage) return;
 
     try {
-      const mockupElement = document.querySelector('[data-mockup-canvas]') as HTMLDivElement;
-      if (!mockupElement) throw new Error('Mockup canvas not found');
+      const mockupElement = document.querySelector(
+        "[data-mockup-canvas]",
+      ) as HTMLDivElement;
+      if (!mockupElement) throw new Error("Mockup canvas not found");
 
-      const imgElement = mockupElement.querySelector('img') as HTMLImageElement;
-      if (!imgElement) throw new Error('Image element not found');
+      const imgElement = mockupElement.querySelector("img") as HTMLImageElement;
+      if (!imgElement) throw new Error("Image element not found");
 
       // For fixed margin mode: capture the entire canvas (image + background margins)
       const canvas = await html2canvas(mockupElement, {
@@ -62,13 +74,13 @@ export function Navbar() {
       });
 
       const mimeType = `image/${format.toLowerCase()}`;
-      const imageQuality = format === 'JPEG' ? 1 : undefined;
+      const imageQuality = format === "JPEG" ? 1 : undefined;
 
       canvas.toBlob(
         (blob) => {
           if (blob) {
             const url = URL.createObjectURL(blob);
-            const a = document.createElement('a');
+            const a = document.createElement("a");
             a.href = url;
             a.download = `mockup-${Date.now()}.${format.toLowerCase()}`;
             document.body.appendChild(a);
@@ -76,23 +88,21 @@ export function Navbar() {
             document.body.removeChild(a);
             URL.revokeObjectURL(url);
           } else {
-            throw new Error('Failed to create blob');
+            throw new Error("Failed to create blob");
           }
         },
         mimeType,
-        imageQuality
+        imageQuality,
       );
-
-
     } catch (error) {
-      console.error('Export error:', error);
+      console.error("Export error:", error);
       throw error;
     }
   };
 
   const handleSingleExport = async () => {
     if (!uploadedImage) {
-      toast.error('Please upload an image first');
+      toast.error("Please upload an image first");
       return;
     }
 
@@ -100,10 +110,10 @@ export function Navbar() {
     try {
       await exportImage(exportFormat, quality[0]);
       toast.success(`Successfully exported as ${exportFormat}!`, {
-        icon: <CheckCircle className="w-4 h-4" />
+        icon: <CheckCircle className="w-4 h-4" />,
       });
     } catch (error) {
-      toast.error('Failed to export image. Please try again.');
+      toast.error("Failed to export image. Please try again.");
     } finally {
       setIsExporting(false);
     }
@@ -111,38 +121,40 @@ export function Navbar() {
 
   const handleAllFormatsExport = async () => {
     if (!uploadedImage) {
-      toast.error('Please upload an image first');
+      toast.error("Please upload an image first");
       return;
     }
 
     setIsExporting(true);
-    const formats = ['PNG', 'JPEG', 'WebP'];
+    const formats = ["PNG", "JPEG", "WebP"];
     const qualityMultiplier = quality[0];
 
     try {
       await Promise.all(
-        formats.map(format => exportImage(format, qualityMultiplier))
+        formats.map((format) => exportImage(format, qualityMultiplier)),
       );
 
-      toast.success(`Successfully exported all formats (${formats.join(', ')})!`, {
-        icon: <CheckCircle className="w-4 h-4" />
-      });
+      toast.success(
+        `Successfully exported all formats (${formats.join(", ")})!`,
+        {
+          icon: <CheckCircle className="w-4 h-4" />,
+        },
+      );
     } catch (error) {
-      console.error('Export all formats error:', error);
-      toast.error('Failed to export some formats. Please try again.');
+      console.error("Export all formats error:", error);
+      toast.error("Failed to export some formats. Please try again.");
     } finally {
       setIsExporting(false);
     }
   };
 
   const ExportOptionsContent = () => (
-    <div className={`
-        ${isMobile
-        ? 'flex flex-col gap-2'
-        : 'grid grid-cols-2 gap-6'
-      }
-      `}>
-      <div className={`${!isMobile ? 'order-2' : 'order-1'}`}>
+    <div
+      className={`
+        ${isMobile ? "flex flex-col gap-2" : "grid grid-cols-2 gap-6"}
+      `}
+    >
+      <div className={`${!isMobile ? "order-2" : "order-1"}`}>
         <div>
           <h3 className="text-xl font-semibold text-foreground mb-6 flex items-center gap-2">
             <Download className="w-5 h-5 text-primary" />
@@ -158,7 +170,7 @@ export function Navbar() {
               onValueChange={(value) => value && setExportFormat(value)}
               className="flex gap-1 bg-sidebar/80 rounded-full ring-2 ring-secondary p-1"
             >
-              {['PNG', 'JPEG', 'WebP'].map((format) => (
+              {["PNG", "JPEG", "WebP"].map((format) => (
                 <ToggleGroupItem
                   key={format}
                   value={format}
@@ -205,7 +217,7 @@ export function Navbar() {
           <Button
             onClick={handleSingleExport}
             className="w-full h-12 font-medium shadow-md"
-            variant='secondary'
+            variant="secondary"
             disabled={isExporting || !uploadedImage}
           >
             {isExporting ? (
@@ -240,18 +252,22 @@ export function Navbar() {
           </Button>
         </div>
 
-        <Button
-          variant="link"
-          className="w-full"
-        >
-          <a href='https://github.com/jellydeck/moocup' target="_blank" rel="noopener noreferrer" className='inline-flex gap-2 w-full grid-cols-2'>
+        <Button variant="link" className="w-full">
+          <a
+            href="https://github.com/jellydeck/moocup"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex gap-2 w-full grid-cols-2"
+          >
             <Github />
             Hey, You can also help us out at here
           </a>
         </Button>
       </div>
 
-      <Card className={`rounded-xl border-2 border-dashed border-primary/20 ${!isMobile ? 'order-1' : 'order-2'} group`}>
+      <Card
+        className={`rounded-xl border-2 border-dashed border-primary/20 ${!isMobile ? "order-1" : "order-2"} group`}
+      >
         <CardHeader className="pb-4">
           <div className="flex items-center gap-2">
             <Heart className="w-5 h-5 text-primary fill-primary/20 group-hover:fill-primary/50 transition-colors group-hover:animate-pulse group-hover:scale-110" />
@@ -271,21 +287,18 @@ export function Navbar() {
                 <ExternalLink className="w-3 h-3" />
               </a>
             </p>
-            <p className='text-sm text-muted-foreground leading-relaxed'>
+            <p className="text-sm text-muted-foreground leading-relaxed">
               moocup is a simple offline tool.
             </p>
-            <p className='text-sm text-muted-foreground leading-relaxed'>
+            <p className="text-sm text-muted-foreground leading-relaxed">
               focus on your craft, we'll take care of rest.
             </p>
-            <p className='text-sm text-muted-foreground leading-relaxed'>
+            <p className="text-sm text-muted-foreground leading-relaxed">
               you can show your support by sponsoring my work!
             </p>
           </div>
           <div className="space-y-3">
-            <Button
-              asChild
-              className="w-full h-12 hover:primary/10 shadow-md"
-            >
+            <Button asChild className="w-full h-12 hover:primary/10 shadow-md">
               <a
                 href="https://ko-fi.com/jaydipsanghani"
                 target="_blank"
@@ -302,17 +315,23 @@ export function Navbar() {
                   variant="outline"
                   className="w-full h-12 border-primary/30 hover:bg-primary/5 hover:border-primary/50 inline-flex items-center"
                 >
-                  <QrCode className="w-5 h-5" />
                   <span className="font-medium">UPI (India)</span>
                 </Button>
               </DialogTrigger>
               <DialogContent className="max-w-xs">
                 <DialogHeader>
-                  <DialogTitle className="text-center">Thanks so much!</DialogTitle>
+                  <DialogTitle className="text-center">
+                    Thanks so much!
+                  </DialogTitle>
                 </DialogHeader>
                 <div className="flex flex-col items-center gap-4 py-4">
                   <div className="w-48 h-48 bg-muted rounded-xl flex items-center justify-center border-2 border-dashed border-muted-foreground/20">
-                    <QrCode className="w-16 h-16 text-muted-foreground/50" />
+                    <img
+                      src={upiQR}
+                      className="size-full"
+                      fetchPriority="auto"
+                      alt="QR code for making payment in Indian Rupees"
+                    />
                   </div>
                   <p className="text-sm text-muted-foreground text-center">
                     Scan with any UPI app
@@ -322,13 +341,19 @@ export function Navbar() {
             </Dialog>
           </div>
           <div className="space-y-2">
-            <h4 className="text-sm font-medium text-muted-foreground">Say Hi!
-              <span className='ml-2 text-sm text-muted-foreground leading-relaxed'>
+            <h4 className="text-sm font-medium text-muted-foreground">
+              Say Hi!
+              <span className="ml-2 text-sm text-muted-foreground leading-relaxed">
                 I'm always up for quick chat :)
               </span>
             </h4>
             <div className="flex gap-2">
-              <Button variant="secondary" size="sm" asChild className="flex-1 border-primary/30 hover:border-primary/50">
+              <Button
+                variant="secondary"
+                size="sm"
+                asChild
+                className="flex-1 border-primary/30 hover:border-primary/50"
+              >
                 <a
                   href="https://bsky.app/profile/jellydeck.bsky.social"
                   target="_blank"
@@ -338,14 +363,26 @@ export function Navbar() {
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 24 24"
-                    className='w-4 h-4'
+                    className="w-4 h-4"
                   >
-                    <path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 10Q2-2 2 6t5 8q-5 3-1 6t6-3q2 6 6 3t-1-6q5 0 5-8t-10 4" />
+                    <path
+                      fill="none"
+                      stroke="currentColor"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      d="M12 10Q2-2 2 6t5 8q-5 3-1 6t6-3q2 6 6 3t-1-6q5 0 5-8t-10 4"
+                    />
                   </svg>
                   <span>Bluesky</span>
                 </a>
               </Button>
-              <Button variant="secondary" size="sm" asChild className="flex-1 border-primary/30 hover:border-primary/50">
+              <Button
+                variant="secondary"
+                size="sm"
+                asChild
+                className="flex-1 border-primary/30 hover:border-primary/50"
+              >
                 <a
                   href="https://twitter.com/JellyDeck"
                   target="_blank"
@@ -381,7 +418,11 @@ export function Navbar() {
           {!isMobile && (
             <div className="flex items-center gap-2 text-sm text-muted-foreground">
               <span>crafted by</span>
-              <Button variant="link" className="h-auto p-0 text-primary" asChild>
+              <Button
+                variant="link"
+                className="h-auto p-0 text-primary"
+                asChild
+              >
                 <a
                   href="https://jaydip.me"
                   target="_blank"
@@ -395,13 +436,17 @@ export function Navbar() {
           )}
         </div>
         <div className="flex items-center gap-2">
-          <a href='https://github.com/jellydeck/moocup' target="_blank" rel="noopener noreferrer"
+          <a
+            href="https://github.com/jellydeck/moocup"
+            target="_blank"
+            rel="noopener noreferrer"
           >
-            <Button
-              variant="outline"
-              className="gap-2 mr-2"
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" stroke="#000" viewBox="0 0 20 20">
+            <Button variant="outline" className="gap-2 mr-2">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                stroke="#000"
+                viewBox="0 0 20 20"
+              >
                 <g id="SVGRepo_iconCarrier">
                   <g
                     id="Page-1"
@@ -441,7 +486,9 @@ export function Navbar() {
               </DialogTrigger>
               <DialogContent className="w-[95vw] max-w-md h-[90vh] max-h-[90vh] flex flex-col p-0 [&>button:first-of-type]:hidden">
                 <div className="flex items-center justify-between p-4 border-b shrink-0">
-                  <DialogTitle className="text-lg font-semibold">Export & Support</DialogTitle>
+                  <DialogTitle className="text-lg font-semibold">
+                    Export & Support
+                  </DialogTitle>
                   <Button
                     variant="ghost"
                     size="icon"
@@ -468,7 +515,9 @@ export function Navbar() {
               >
                 <Download className="w-4 h-4" />
                 Export
-                <ChevronDown className={`w-4 h-4 transition-transform ${showExportOptions ? 'rotate-180' : ''}`} />
+                <ChevronDown
+                  className={`w-4 h-4 transition-transform ${showExportOptions ? "rotate-180" : ""}`}
+                />
               </Button>
               {showExportOptions && (
                 <Card className="absolute right-0 top-full mt-2 w-[900px] shadow-lg z-50 bg-background border rounded-2xl">
@@ -483,4 +532,4 @@ export function Navbar() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
-- 
2.51.2