initial slide footer not visible
This commit is contained in:
shiva raj badu
parent
23f6cea702
commit
049c4ea01a
3 changed files with 99 additions and 91 deletions
|
|
@ -248,95 +248,103 @@ const SlideFooter: React.FC = () => {
|
|||
id="footer"
|
||||
className="absolute hidden lg:grid z-10 cursor-pointer px-6 grid-cols-3 items-end left-1/2 -translate-x-1/2 justify-between bottom-5 w-full"
|
||||
>
|
||||
<div
|
||||
className={`h-8 flex-1 flex ${footerProperties.logoProperties.logoPosition === "left"
|
||||
? getLogoPositionClass()
|
||||
: "justify-start"
|
||||
}`}
|
||||
>
|
||||
{footerProperties.logoProperties.showLogo &&
|
||||
(footerProperties.logoProperties.logoPosition === "left" ? (
|
||||
getLogoImageSrc() !== "" ? (
|
||||
<img
|
||||
data-slide-element
|
||||
data-element-type="picture"
|
||||
id="footer-user-logo"
|
||||
className="w-auto h-full object-contain"
|
||||
src={getLocalImageUrl(getLogoImageSrc())}
|
||||
alt="logo"
|
||||
style={getLogoStyle()}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="w-8 h-8 bg-gray-100 rounded-lg flex justify-center items-center">
|
||||
<Plus className="text-gray-500" />
|
||||
{(!footerProperties.logoProperties.showLogo && !footerProperties.footerMessage.showMessage) ? (
|
||||
<div onClick={handleEditor} className="col-span-3 cursor-pointer flex justify-center items-center text-gray-400 text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
Click to add footer
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
className={`h-8 flex-1 flex ${footerProperties.logoProperties.logoPosition === "left"
|
||||
? getLogoPositionClass()
|
||||
: "justify-start"
|
||||
}`}
|
||||
>
|
||||
{footerProperties.logoProperties.showLogo &&
|
||||
(footerProperties.logoProperties.logoPosition === "left" ? (
|
||||
getLogoImageSrc() !== "" ? (
|
||||
<img
|
||||
data-slide-element
|
||||
data-element-type="picture"
|
||||
id="footer-user-logo"
|
||||
className="w-auto h-full object-contain"
|
||||
src={getLocalImageUrl(getLogoImageSrc())}
|
||||
alt="logo"
|
||||
style={getLogoStyle()}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="w-8 h-8 bg-gray-100 rounded-lg flex justify-center items-center">
|
||||
<Plus className="text-gray-500" />
|
||||
</div>
|
||||
<p className="text-sm text-gray-400"
|
||||
style={{
|
||||
fontFamily: currentColors.fontFamily || "Inter, sans-serif",
|
||||
}}
|
||||
>Insert Your Logo</p>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div></div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`flex-1 flex items-center font-instrument_sans slide-title justify-center`}
|
||||
>
|
||||
<p
|
||||
id="footer-user-message"
|
||||
className="text-sm"
|
||||
data-slide-element
|
||||
data-element-type="text"
|
||||
data-text-content={footerProperties.footerMessage.message}
|
||||
style={getMessageStyle()}
|
||||
>
|
||||
{footerProperties.footerMessage.showMessage &&
|
||||
(footerProperties.footerMessage.message
|
||||
? footerProperties.footerMessage.message
|
||||
: "Your text")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`h-8 flex-1 flex ${footerProperties.logoProperties.logoPosition === "right"
|
||||
? getLogoPositionClass()
|
||||
: "justify-start"
|
||||
}`}
|
||||
>
|
||||
{footerProperties.logoProperties.showLogo &&
|
||||
footerProperties.logoProperties.logoPosition === "right" ? (
|
||||
getLogoImageSrc() !== "" ? (
|
||||
<div data-element-type="picture" data-slide-element>
|
||||
<img
|
||||
data-slide-element
|
||||
data-element-type="picture"
|
||||
id="footer-user-logo"
|
||||
className="w-auto h-full object-contain"
|
||||
src={getLocalImageUrl(getLogoImageSrc())}
|
||||
alt="logo"
|
||||
style={getLogoStyle()}
|
||||
/>
|
||||
</div>
|
||||
<p className="text-sm text-gray-400"
|
||||
style={{
|
||||
fontFamily: currentColors.fontFamily || "Inter, sans-serif",
|
||||
}}
|
||||
>Insert Your Logo</p>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div></div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`flex-1 flex items-center font-inter slide-title justify-center`}
|
||||
>
|
||||
<p
|
||||
id="footer-user-message"
|
||||
className="text-sm"
|
||||
data-slide-element
|
||||
data-element-type="text"
|
||||
data-text-content={footerProperties.footerMessage.message}
|
||||
style={getMessageStyle()}
|
||||
>
|
||||
{footerProperties.footerMessage.showMessage &&
|
||||
(footerProperties.footerMessage.message
|
||||
? footerProperties.footerMessage.message
|
||||
: "Your text")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`h-8 flex-1 flex ${footerProperties.logoProperties.logoPosition === "right"
|
||||
? getLogoPositionClass()
|
||||
: "justify-start"
|
||||
}`}
|
||||
>
|
||||
{footerProperties.logoProperties.showLogo &&
|
||||
footerProperties.logoProperties.logoPosition === "right" ? (
|
||||
getLogoImageSrc() !== "" ? (
|
||||
<div data-element-type="picture" data-slide-element>
|
||||
<img
|
||||
data-slide-element
|
||||
data-element-type="picture"
|
||||
id="footer-user-logo"
|
||||
className="w-auto h-full object-contain"
|
||||
src={getLocalImageUrl(getLogoImageSrc())}
|
||||
alt="logo"
|
||||
style={getLogoStyle()}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="w-8 h-8 bg-gray-100 rounded-lg flex justify-center items-center">
|
||||
<Plus className="text-gray-500" />
|
||||
</div>
|
||||
<p className="text-sm text-gray-400"
|
||||
style={{
|
||||
fontFamily: currentColors.fontFamily || "Inter, sans-serif",
|
||||
}}
|
||||
>Insert Your Logo</p>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="w-full flex justify-end"></div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="w-8 h-8 bg-gray-100 rounded-lg flex justify-center items-center">
|
||||
<Plus className="text-gray-500" />
|
||||
</div>
|
||||
<p className="text-sm text-gray-400"
|
||||
style={{
|
||||
fontFamily: currentColors.fontFamily || "Inter, sans-serif",
|
||||
}}
|
||||
>Insert Your Logo</p>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="w-full flex justify-end"></div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Sheet open={showEditor} onOpenChange={handleSheetClose}>
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@ const SettingsPage = () => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-[#E9E8F8]">
|
||||
<div className="min-h-screen bg-[#E9E8F8] font-instrument_sans">
|
||||
<Header />
|
||||
<Wrapper className="lg:w-[60%]">
|
||||
<div className="py-8 space-y-6">
|
||||
|
|
|
|||
|
|
@ -127,7 +127,7 @@ export default function Home() {
|
|||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-gray-50 to-white flex items-center justify-center">
|
||||
<div className="min-h-screen bg-gradient-to-b font-instrument_sans from-gray-50 to-white flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-blue-600 mx-auto mb-4" />
|
||||
<p className="text-gray-600">Loading configuration...</p>
|
||||
|
|
@ -188,7 +188,7 @@ export default function Home() {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b font-inter from-gray-50 to-white">
|
||||
<div className="min-h-screen bg-gradient-to-b font-instrument_sans from-gray-50 to-white">
|
||||
<main className="container mx-auto px-4 py-12 max-w-3xl">
|
||||
{/* Branding Header */}
|
||||
<div className="text-center mb-12">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue