fix(nextjs): Z-Index issue with loader & editor solved
This commit is contained in:
shiva raj badu
parent
817abf9b2e
commit
343fd970e7
8 changed files with 48 additions and 40 deletions
|
|
@ -59,9 +59,11 @@ const TiptapText: React.FC<TiptapTextProps> = ({
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="relative z-50 w-full">
|
||||
<BubbleMenu editor={editor} tippyOptions={{ duration: 100 }}>
|
||||
<div className="flex text-black bg-white rounded-lg shadow-lg p-2 gap-1 border border-gray-200 z-50">
|
||||
<>
|
||||
<BubbleMenu editor={editor} className='z-50' tippyOptions={{ duration: 100 }}>
|
||||
<div style={{
|
||||
zIndex: 100
|
||||
}} className="flex text-black bg-white rounded-lg shadow-lg p-2 gap-1 border border-gray-200 z-50">
|
||||
<button
|
||||
onClick={() => editor?.chain().focus().toggleBold().run()}
|
||||
className={`p-1 rounded hover:bg-gray-100 transition-colors ${editor?.isActive("bold") ? "bg-blue-100 text-blue-600" : ""
|
||||
|
|
@ -116,9 +118,10 @@ const TiptapText: React.FC<TiptapTextProps> = ({
|
|||
fontFamily: 'inherit',
|
||||
color: 'inherit',
|
||||
textAlign: 'inherit',
|
||||
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -162,7 +162,9 @@ const Header = ({
|
|||
|
||||
{/* Desktop Export Button with Popover */}
|
||||
|
||||
<div className="hidden lg:block relative z-10">
|
||||
<div style={{
|
||||
zIndex: 100
|
||||
}} className="hidden lg:block relative ">
|
||||
<Popover open={open} onOpenChange={setOpen} >
|
||||
<PopoverTrigger asChild>
|
||||
<Button className={`border py-5 text-[#5146E5] font-bold rounded-[32px] transition-all duration-500 hover:border hover:bg-[#5146E5] hover:text-white w-full ${mobile ? "" : "bg-white"}`}>
|
||||
|
|
@ -170,7 +172,7 @@ const Header = ({
|
|||
Export
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent align="end" className="w-[250px] space-y-2 py-3 px-2 z-50">
|
||||
<PopoverContent align="end" className="w-[250px] space-y-2 py-3 px-2 ">
|
||||
<ExportOptions mobile={false} />
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
|
@ -184,44 +186,47 @@ const Header = ({
|
|||
);
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
zIndex: 1000,
|
||||
}} className="bg-[#5146E5] w-full shadow-lg sticky top-0">
|
||||
<>
|
||||
<OverlayLoader
|
||||
show={false}
|
||||
show={showLoader}
|
||||
text="Exporting presentation..."
|
||||
showProgress={true}
|
||||
duration={40}
|
||||
/>
|
||||
<Announcement />
|
||||
<Wrapper className="flex items-center justify-between py-1">
|
||||
<Link href="/dashboard" className="min-w-[162px]">
|
||||
<img
|
||||
className="h-16"
|
||||
src="/logo-white.png"
|
||||
alt="Presentation logo"
|
||||
/>
|
||||
</Link>
|
||||
<div
|
||||
|
||||
{/* Desktop Menu */}
|
||||
<div className="hidden lg:flex items-center gap-4 2xl:gap-6">
|
||||
{isStreaming && (
|
||||
<Loader2 className="animate-spin text-white font-bold w-6 h-6" />
|
||||
)}
|
||||
className="bg-[#5146E5] w-full shadow-lg sticky top-0 ">
|
||||
|
||||
<Announcement />
|
||||
<Wrapper className="flex items-center justify-between py-1">
|
||||
<Link href="/dashboard" className="min-w-[162px]">
|
||||
<img
|
||||
className="h-16"
|
||||
src="/logo-white.png"
|
||||
alt="Presentation logo"
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Menu */}
|
||||
<div className="hidden lg:flex items-center gap-4 2xl:gap-6">
|
||||
{isStreaming && (
|
||||
<Loader2 className="animate-spin text-white font-bold w-6 h-6" />
|
||||
)}
|
||||
|
||||
|
||||
<MenuItems mobile={false} />
|
||||
<HeaderNav />
|
||||
</div>
|
||||
<MenuItems mobile={false} />
|
||||
<HeaderNav />
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
<div className="lg:hidden flex items-center gap-4">
|
||||
<HeaderNav />
|
||||
{/* Mobile Menu */}
|
||||
<div className="lg:hidden flex items-center gap-4">
|
||||
<HeaderNav />
|
||||
|
||||
</div>
|
||||
</Wrapper>
|
||||
</div>
|
||||
</Wrapper>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -125,12 +125,12 @@ const AboutUsSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
<div className="w-2/5 relative">
|
||||
{/* Yellow Square - Top Right */}
|
||||
{showAccentSquare && (
|
||||
<div className="absolute bottom-0 right-0 w-24 h-24 bg-yellow-300 z-20"></div>
|
||||
<div className="absolute bottom-0 right-0 w-24 h-24 bg-yellow-300 z-10"></div>
|
||||
)}
|
||||
|
||||
{/* Decorative Circle - On Yellow Square */}
|
||||
{showVisualAccents && (
|
||||
<div className="absolute top-6 right-6 w-6 h-6 border-2 border-teal-600 rounded-full z-30"></div>
|
||||
<div className="absolute top-6 right-6 w-6 h-6 border-2 border-teal-600 rounded-full z-20"></div>
|
||||
)}
|
||||
|
||||
{/* Business Image - Left positioned */}
|
||||
|
|
|
|||
|
|
@ -122,7 +122,7 @@ const HelloFriendsSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
|
||||
{/* Overlapping Circular Office Image */}
|
||||
{speakerImage?.__image_url__ && (
|
||||
<div className="absolute top-1/2 left-72 transform -translate-x-1/2 -translate-y-1/2 z-30">
|
||||
<div className="absolute top-1/2 left-72 transform -translate-x-1/2 -translate-y-1/2 ">
|
||||
<div className="w-96 h-96 rounded-full overflow-hidden bg-white p-2 shadow-2xl">
|
||||
<img
|
||||
src={speakerImage.__image_url__}
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@ const MarketSizeSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
|
||||
{/* Visual Representation */}
|
||||
{visualRepresentation?.__image_url__ && (
|
||||
<div className="absolute inset-8 z-15 shadow-lg">
|
||||
<div className="absolute inset-8 shadow-lg">
|
||||
<img
|
||||
src={visualRepresentation.__image_url__}
|
||||
alt={visualRepresentation.__image_prompt__}
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@ const ProblemsSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
|
||||
{/* Supporting Visual */}
|
||||
{supportingVisual?.__image_url__ && (
|
||||
<div className="absolute top-8 right-8 bottom-20 left-4 z-15 shadow-lg">
|
||||
<div className="absolute top-8 right-8 bottom-20 left-4 shadow-lg">
|
||||
<img
|
||||
src={supportingVisual.__image_url__}
|
||||
alt={supportingVisual.__image_prompt__}
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@ const ThynkTitleSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
)}
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="relative z-15 h-full flex flex-col justify-center px-16">
|
||||
<div className="relative h-full flex flex-col justify-center px-16">
|
||||
<div className="">
|
||||
{/* Main Title */}
|
||||
{primaryTitle && (
|
||||
|
|
|
|||
|
|
@ -74,7 +74,7 @@ const WhatWeBelieveSlide = ({ data }: { data: Partial<SchemaType> }) => {
|
|||
{/* Left Side - Image */}
|
||||
<div className="w-2/5 relative">
|
||||
{supportingVisual?.__image_url__ && (
|
||||
<div className="absolute inset-8 z-15 shadow-lg">
|
||||
<div className="absolute inset-8 shadow-lg">
|
||||
<img
|
||||
src={supportingVisual.__image_url__}
|
||||
alt={supportingVisual.__image_prompt__}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue