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 = () => {
|
export const openFigma = () => {
|
||||||
return window
|
return window
|
||||||
.open("https://openpanel.co/contact", "_blank")
|
.open("https://openpanel.co/assets", "_blank")
|
||||||
?.focus();
|
?.focus();
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user