openpanel/documentation/src/refine-theme/enterprise-get-in-touch-button.tsx
Stefan Pejcic 4e15bc3d39 enterprise
2024-02-05 11:27:49 +01:00

73 lines
2.5 KiB
TypeScript

import Link from "@docusaurus/Link";
import clsx from "clsx";
import React, { FC, SVGProps } from "react";
type Props = {
className?: string;
linkClassName?: string;
};
export const EnterpriseGetInTouchButton: FC<Props> = (props) => {
return (
<div
className={clsx(
"flex",
"items-center",
"justify-start",
"gap-4",
"landing-lg:gap-6",
props.className,
)}
>
<Link
href="mailto:info@openpanel.co"
target="_blank"
rel="noopener noreferrer"
className={clsx(
"self-start",
"rounded-full",
"!text-gray-0 dark:!text-gray-900",
"bg-refine-blue dark:bg-refine-cyan-alt",
"transition-[filter]",
"duration-150",
"ease-in-out",
"hover:brightness-110",
"py-3",
"pl-7 pr-8",
"landing-md:px-8",
"landing-lg:pl-7 landing-lg:pr-8",
"flex",
"items-center",
"justify-center",
"gap-2",
"hover:!no-underline",
props.linkClassName,
)}
>
<GetInTouchIcon />
<span className={clsx("text-base", "font-semibold")}>
Signup for BETA
</span>
</Link>
</div>
);
};
const GetInTouchIcon = (props: SVGProps<SVGSVGElement>) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={16}
height={16}
fill="none"
{...props}
className={clsx("text-gray-0 dark:text-gray-900", props.className)}
>
<path
fill="currentColor"
fillRule="evenodd"
d="M3.604 1.004a2.58 2.58 0 0 0-2.864.588A2.65 2.65 0 0 0 .217 4.48l1.519 3.517-1.52 3.524a2.65 2.65 0 0 0 .525 2.888 2.58 2.58 0 0 0 2.863.587l10.8-4.571A2.63 2.63 0 0 0 16 8a2.63 2.63 0 0 0-1.596-2.425l-10.8-4.571Zm-1.713 1.7a.98.98 0 0 1 1.09-.227l10.8 4.572c.37.156.619.528.619.951 0 .423-.25.795-.62.951l-10.8 4.572a.98.98 0 0 1-1.089-.226l-.558.54.558-.54a1.05 1.05 0 0 1-.205-1.142L3.132 8.8H6a.8.8 0 0 0 0-1.6H3.134L1.686 3.846a1.05 1.05 0 0 1 .205-1.142Z"
clipRule="evenodd"
/>
</svg>
);