mirror of
https://github.com/stefanpejcic/openpanel
synced 2025-06-26 18:28:26 +00:00
assets
This commit is contained in:
Stefan Pejcic
parent
ab12603f32
commit
6c3ae6f287
227
documentation/src/components/banner/banner-modal.tsx.save
Normal file
227
documentation/src/components/banner/banner-modal.tsx.save
Normal file
@ -0,0 +1,227 @@
|
||||
import React, { FC, Fragment, useEffect, useRef, useState } from "react";
|
||||
import clsx from "clsx";
|
||||
import { LandingRainbowButton } from "@site/src/refine-theme/landing-rainbow-button";
|
||||
import { ArrowRightIcon } from "@site/src/refine-theme/icons/arrow-right";
|
||||
import Link from "@docusaurus/Link";
|
||||
import { Dialog, Transition } from "@headlessui/react";
|
||||
import { CloseIcon } from "@site/src/refine-theme/icons/close";
|
||||
import useScrollTracker from "@site/src/hooks/use-scroll-tracker";
|
||||
import useLocalStorage from "@site/src/hooks/use-localstorage";
|
||||
import { useLocation } from "@docusaurus/router";
|
||||
|
||||
const SCROLL_TRESHOLD = 79;
|
||||
const SCROLL_MAX = 100;
|
||||
const MAX_VISIT_COUNT = 9;
|
||||
|
||||
type Props = {
|
||||
title?: string;
|
||||
variant?: "gray" | "purple";
|
||||
image?: {
|
||||
src?: string;
|
||||
alt?: string;
|
||||
href?: string;
|
||||
};
|
||||
button?: {
|
||||
text: string;
|
||||
href?: string;
|
||||
onClick?: () => void;
|
||||
};
|
||||
};
|
||||
|
||||
export const BannerModal: FC<Props> = ({
|
||||
title = "OpenPanel offers a distinct advantage over other hosting panels by providing each user with an isolated environment and tools to fully manage it. ",
|
||||
variant = "purple",
|
||||
image = {
|
||||
src: "https://openpanel.co/img/panel/v1/dashboard/dashboard.png",
|
||||
alt: "OpenPanel interface screenshot",
|
||||
href: "https://openpanel.co/demo?ref=banner-modal",
|
||||
},
|
||||
button = {
|
||||
text: "Try online",
|
||||
href: "https://openpanel.co/demo?ref=banner-modal",
|
||||
onClick: undefined,
|
||||
},
|
||||
}) => {
|
||||
const { pathname } = useLocation();
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [visitCount, setVisitCount] = useLocalStorage("banner-modal", null);
|
||||
const scrollTresholdExceeded = useRef(false);
|
||||
|
||||
const tracker = useScrollTracker();
|
||||
|
||||
useEffect(() => {
|
||||
if (pathname === "/blog/" || pathname === "/blog") return;
|
||||
if (scrollTresholdExceeded.current || isOpen) return;
|
||||
|
||||
if (tracker.scrollY > SCROLL_TRESHOLD && tracker.scrollY < SCROLL_MAX) {
|
||||
scrollTresholdExceeded.current = true;
|
||||
|
||||
if (visitCount === MAX_VISIT_COUNT || visitCount === null) {
|
||||
setIsOpen(true);
|
||||
setVisitCount(0);
|
||||
} else {
|
||||
setVisitCount(visitCount + 1);
|
||||
scrollTresholdExceeded.current = true;
|
||||
}
|
||||
}
|
||||
}, [tracker.scrollY]);
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
isOpen &&
|
||||
typeof window !== "undefined" &&
|
||||
typeof window.gtag !== "undefined"
|
||||
) {
|
||||
window.gtag("event", "view_banner", {
|
||||
banner_name: "banner-modal",
|
||||
banner_text: title,
|
||||
banner_image: image.src,
|
||||
});
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
return (
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<Dialog
|
||||
as="div"
|
||||
className="relative z-modal"
|
||||
onClose={() => setIsOpen(false)}
|
||||
>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-75"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-75"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="fixed inset-0 bg-gray-900/70" />
|
||||
</Transition.Child>
|
||||
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-start justify-center">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-75"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-75"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Dialog.Panel
|
||||
className={clsx(
|
||||
"w-full min-h-screen",
|
||||
"flex flex-col justify-center items-center",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
"relative",
|
||||
"rounded-3xl",
|
||||
"max-w-[576px]",
|
||||
"py-8",
|
||||
"px-4 md:px-8",
|
||||
variant === "gray" &&
|
||||
"bg-banner-examples-modal-gray",
|
||||
variant === "purple" &&
|
||||
"bg-banner-examples-modal-purple",
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
"flex",
|
||||
"flex-col",
|
||||
"items-center",
|
||||
"gap-8",
|
||||
"text-center",
|
||||
"not-prose",
|
||||
)}
|
||||
>
|
||||
<Link
|
||||
to={image?.href ?? button?.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={clsx(
|
||||
"flex",
|
||||
"h-auto xl:h-[192px]",
|
||||
"flex-shrink-0",
|
||||
"rounded-lg",
|
||||
"overflow-hidden",
|
||||
"focus:outline-none",
|
||||
)}
|
||||
>
|
||||
<img
|
||||
className={clsx(
|
||||
"object-contain",
|
||||
)}
|
||||
src={image?.src}
|
||||
alt={image?.alt ?? title}
|
||||
loading="lazy"
|
||||
/>
|
||||
</Link>
|
||||
<p
|
||||
className={clsx(
|
||||
"text-2xl",
|
||||
"font-semibold",
|
||||
variant === "gray" &&
|
||||
"bg-clip-text",
|
||||
variant === "gray" &&
|
||||
"text-transparent",
|
||||
variant === "gray" &&
|
||||
"bg-banner-examples-text",
|
||||
variant === "purple" &&
|
||||
"text-gray-0",
|
||||
)}
|
||||
>
|
||||
{title}
|
||||
</p>
|
||||
<LandingRainbowButton
|
||||
className={clsx("w-max")}
|
||||
buttonClassname={clsx(
|
||||
"!px-4",
|
||||
"!py-4",
|
||||
)}
|
||||
href={button.href}
|
||||
onClick={button.onClick}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
"text-gray-900",
|
||||
"text-base",
|
||||
"font-bold",
|
||||
)}
|
||||
>
|
||||
{button.text}
|
||||
</div>
|
||||
<ArrowRightIcon
|
||||
className={clsx("w-4", "h-4")}
|
||||
/>
|
||||
</LandingRainbowButton>
|
||||
</div>
|
||||
<button
|
||||
className={clsx(
|
||||
"absolute",
|
||||
"top-2 right-2",
|
||||
"w-8 h-8",
|
||||
"flex items-center justify-center flex-shrink-0",
|
||||
"text-gray-0",
|
||||
"rounded-full",
|
||||
"bg-gray-900/20",
|
||||
)}
|
||||
onClick={() => setIsOpen(false)}
|
||||
>
|
||||
<CloseIcon className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
);
|
||||
};
|
||||
@ -1,5 +1,5 @@
|
||||
export const openFigma = () => {
|
||||
return window
|
||||
.open("https://openpanel.co/contact", "_blank")
|
||||
.open("https://openpanel.co/assets", "_blank")
|
||||
?.focus();
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user