From 4c1dfb06387e8d78d45c826c61df4aedea6c124a Mon Sep 17 00:00:00 2001 From: Jaydip Sanghani <91427591+jellydeck@users.noreply.github.com> Date: Wed, 7 Jan 2026 16:32:55 +0530 Subject: [PATCH] chore: improve UX & chore work - export panel can be closed by clicking outside - icons are separate components --- src/components/editor/Navbar.tsx | 140 +++++++++---------------------- src/components/icons/Bluesky.tsx | 14 ++++ src/components/icons/Github.tsx | 21 +++++ src/components/icons/X.tsx | 16 ++++ src/components/ui/popover.tsx | 20 ++--- 5 files changed, 99 insertions(+), 112 deletions(-) create mode 100644 src/components/icons/Bluesky.tsx create mode 100644 src/components/icons/Github.tsx create mode 100644 src/components/icons/X.tsx diff --git a/src/components/editor/Navbar.tsx b/src/components/editor/Navbar.tsx index d5175d6..658e69a 100644 --- a/src/components/editor/Navbar.tsx +++ b/src/components/editor/Navbar.tsx @@ -16,16 +16,18 @@ import { Coffee, ExternalLink, Loader2, - QrCode, Heart, - Twitter, X, CheckCircle, - Github, } from "lucide-react"; +import { Github } from "@/components/icons/Github"; +import { Bluesky } from "@/components/icons/Bluesky"; +import { X as XIcon } from "@/components/icons/X"; + import { toast } from "sonner"; import { useMockupStore } from "@/contexts/MockupContext"; import html2canvas from "html2canvas"; +import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; export function Navbar() { const [showExportOptions, setShowExportOptions] = useState(false); @@ -36,8 +38,7 @@ export function Navbar() { 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) { @@ -56,9 +57,7 @@ export function Navbar() { if (!uploadedImage) return; try { - const mockupElement = document.querySelector( - "[data-mockup-canvas]", - ) as HTMLDivElement; + 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; @@ -130,16 +129,11 @@ export function Navbar() { const qualityMultiplier = quality[0]; try { - await Promise.all( - formats.map((format) => exportImage(format, qualityMultiplier)), - ); + await Promise.all(formats.map((format) => exportImage(format, qualityMultiplier))); - toast.success( - `Successfully exported all formats (${formats.join(", ")})!`, - { - icon: , - }, - ); + toast.success(`Successfully exported all formats (${formats.join(", ")})!`, { + icon: , + }); } catch (error) { console.error("Export all formats error:", error); toast.error("Failed to export some formats. Please try again."); @@ -259,7 +253,7 @@ export function Navbar() { rel="noopener noreferrer" className="inline-flex gap-2 w-full grid-cols-2" > - + Hey, You can also help us out at here @@ -320,9 +314,7 @@ export function Navbar() { - - Thanks so much! - + Thanks for contribution!
@@ -333,9 +325,7 @@ export function Navbar() { alt="QR code for making payment in Indian Rupees" />
-

- Scan with any UPI app -

+

Scan with any UPI app

 @@ -360,20 +350,7 @@ export function Navbar() { rel="noopener noreferrer" className="flex items-center gap-2" > - - - + Bluesky @@ -384,12 +361,12 @@ export function Navbar() { className="flex-1 border-primary/30 hover:border-primary/50" > - + Twitter @@ -418,11 +395,7 @@ export function Navbar() { {!isMobile && (
crafted by - {isMobile ? ( -
- - Export & Support - + Export & Support
) : ( -
- + + + - - Export - - - {showExportOptions && ( - + - )} -
+ + )}
diff --git a/src/components/icons/Bluesky.tsx b/src/components/icons/Bluesky.tsx new file mode 100644 index 0000000..f007e45 --- /dev/null +++ b/src/components/icons/Bluesky.tsx @@ -0,0 +1,14 @@ +export function Bluesky(props: React.SVGProps) { + return ( + + + + ); +} diff --git a/src/components/icons/Github.tsx b/src/components/icons/Github.tsx new file mode 100644 index 0000000..03af7e7 --- /dev/null +++ b/src/components/icons/Github.tsx @@ -0,0 +1,21 @@ +export function Github(props: React.SVGProps) { + return ( + + + + ); +} diff --git a/src/components/icons/X.tsx b/src/components/icons/X.tsx new file mode 100644 index 0000000..8d99e23 --- /dev/null +++ b/src/components/icons/X.tsx @@ -0,0 +1,16 @@ +export function X(props: React.SVGProps) { + return ( + + + + ); +} diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx index bacf736..2ff8157 100644 --- a/src/components/ui/popover.tsx +++ b/src/components/ui/popover.tsx @@ -1,11 +1,11 @@ -import * as React from "react" -import * as PopoverPrimitive from "@radix-ui/react-popover" +import * as React from "react"; +import * as PopoverPrimitive from "@radix-ui/react-popover"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; -const Popover = PopoverPrimitive.Root +const Popover = PopoverPrimitive.Root; -const PopoverTrigger = PopoverPrimitive.Trigger +const PopoverTrigger = PopoverPrimitive.Trigger; const PopoverContent = React.forwardRef< React.ElementRef, @@ -17,13 +17,13 @@ const PopoverContent = React.forwardRef< align={align} sideOffset={sideOffset} className={cn( - "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", - className + "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", + className, )} {...props} /> -)) -PopoverContent.displayName = PopoverPrimitive.Content.displayName +)); +PopoverContent.displayName = PopoverPrimitive.Content.displayName; -export { Popover, PopoverTrigger, PopoverContent } +export { Popover, PopoverTrigger, PopoverContent }; -- 2.51.2