mirror of
https://github.com/stefanpejcic/openpanel
synced 2025-06-26 18:28:26 +00:00
409 lines
13 KiB
TypeScript
409 lines
13 KiB
TypeScript
import React, { DetailedHTMLProps, ReactNode, SVGProps, useRef } from "react";
|
|
import clsx from "clsx";
|
|
import {
|
|
Nest,
|
|
Strapi,
|
|
Supabase,
|
|
Hasura,
|
|
Airtable,
|
|
Oracle,
|
|
MongoDB,
|
|
PostgreSql,
|
|
MySql,
|
|
MsSqlServer,
|
|
SQLite,
|
|
Redis,
|
|
Ufw,
|
|
Docker,
|
|
Named,
|
|
Srvnginx,
|
|
Srvapache,
|
|
Nodejs,
|
|
Wordpress,
|
|
Memcached,
|
|
ElasticSe,
|
|
Phpv,
|
|
Sshico,
|
|
Phpmyadmin
|
|
} from "../assets/integration-icons";
|
|
import { useInView } from "framer-motion";
|
|
|
|
export const EnterpriseDataSource = ({ className }: { className?: string }) => {
|
|
return (
|
|
<div className={clsx("flex flex-col", "not-prose", className)}>
|
|
<div
|
|
className={clsx(
|
|
"pl-4 landing-sm:pl-6 landing-md:pl-10",
|
|
"text-2xl landing-sm:text-[32px] landing-sm:leading-[40px]",
|
|
)}
|
|
>
|
|
<h2 className={clsx("dark:text-gray-400 text-gray-600")}>
|
|
<span
|
|
className={clsx(
|
|
"font-semibold",
|
|
"dark:text-refine-cyan-alt dark:drop-shadow-[0_0_30px_rgba(71,235,235,0.25)]",
|
|
"text-refine-blue drop-shadow-[0_0_30px_rgba(51,51,255,0.3)]",
|
|
)}
|
|
>
|
|
Technology Stack {" "}
|
|
</span>
|
|
for the modern Web
|
|
</h2>
|
|
</div>
|
|
|
|
<div
|
|
className={clsx(
|
|
"mt-8 landing-md:mt-20",
|
|
"flex flex-col landing-lg:flex-row",
|
|
"gap-6",
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"landing-lg:min-w-[435px]",
|
|
"flex flex-col",
|
|
"p-4 landing-sm:p-10",
|
|
"dark:bg-enterprise-data-source-dark dark:bg-gray-900 bg-gray-0",
|
|
"bg-blend-overlay",
|
|
"bg-no-repeat",
|
|
"rounded-2xl landing-sm:rounded-3xl",
|
|
"border dark:border-gray-700 border-gray-200",
|
|
"not-prose",
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"flex flex-col",
|
|
"gap-2 landing-sm:gap-4",
|
|
"not-prose",
|
|
)}
|
|
>
|
|
<h2
|
|
className={clsx(
|
|
"text-base landing-sm:text-2xl",
|
|
"dark:text-gray-300 text-gray-900",
|
|
"font-semibold",
|
|
)}
|
|
>
|
|
OpenAdmin Stack
|
|
</h2>
|
|
<p
|
|
className={clsx(
|
|
"text-base",
|
|
"dark:text-gray-400 text-gray-600",
|
|
)}
|
|
>
|
|
We use modern, lightweight, proven technologies to deliver high-performance.
|
|
</p>
|
|
</div>
|
|
<div
|
|
className={clsx(
|
|
"landing-packages-mask",
|
|
"overflow-hidden",
|
|
"mt-auto",
|
|
)}
|
|
>
|
|
<PackagesContainer animDirection="right">
|
|
{[...list1, ...list1].map(
|
|
({ icon: Icon, label, tooltip }, index) => (
|
|
<PackageItem
|
|
key={index}
|
|
label={label}
|
|
tooltip={tooltip}
|
|
icon={<Icon width="24" height="24" />}
|
|
/>
|
|
),
|
|
)}
|
|
</PackagesContainer>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={clsx(
|
|
"landing-lg:w-[740px]",
|
|
"flex flex-col",
|
|
"p-4 landing-sm:p-10",
|
|
"dark:bg-enterprise-data-source-dark dark:bg-gray-900 bg-gray-0",
|
|
"bg-blend-overlay",
|
|
"bg-no-repeat",
|
|
"rounded-2xl landing-sm:rounded-3xl",
|
|
"border dark:border-gray-700 border-gray-200",
|
|
"not-prose",
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"flex flex-col",
|
|
"gap-2 landing-sm:gap-4",
|
|
"not-prose",
|
|
)}
|
|
>
|
|
<h2
|
|
className={clsx(
|
|
"text-base landing-sm:text-2xl",
|
|
"dark:text-gray-300 text-gray-900",
|
|
"font-semibold",
|
|
)}
|
|
>
|
|
OpenPanel Stack
|
|
</h2>
|
|
<p
|
|
className={clsx(
|
|
"text-base",
|
|
"dark:text-gray-400 text-gray-600",
|
|
)}
|
|
>
|
|
Get all the latest web technologies under one stack to run any applications at the highest performance.
|
|
</p>
|
|
</div>
|
|
<div
|
|
className={clsx(
|
|
"landing-packages-mask",
|
|
"overflow-hidden",
|
|
)}
|
|
>
|
|
<PackagesContainer animDirection="left">
|
|
{[...list2, ...list2].map(
|
|
({ icon: Icon, label, tooltip }, index) => (
|
|
<PackageItem
|
|
key={index}
|
|
label={label}
|
|
tooltip={tooltip}
|
|
icon={<Icon width="24" height="24" />}
|
|
/>
|
|
),
|
|
)}
|
|
</PackagesContainer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const PackagesContainer = ({
|
|
children,
|
|
className,
|
|
animDirection,
|
|
...props
|
|
}: DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
|
|
animDirection: "left" | "right";
|
|
}) => {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
const inView = useInView(ref);
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={clsx(
|
|
"relative",
|
|
"flex",
|
|
"items-center",
|
|
animDirection === "left" ? "justify-start" : "justify-end",
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
className,
|
|
"hover:animation-paused",
|
|
inView
|
|
? animDirection === "left"
|
|
? "animate-enterprise-data-source-left"
|
|
: "animate-enterprise-data-source-right"
|
|
: "",
|
|
"absolute",
|
|
"left-0",
|
|
"top-0",
|
|
"pr-4",
|
|
"w-auto",
|
|
"flex",
|
|
"items-center",
|
|
"gap-[18px]",
|
|
"mt-6",
|
|
"relative",
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const PackageItem = (props: {
|
|
icon: ReactNode;
|
|
label: string;
|
|
tooltip: string | null;
|
|
}) => {
|
|
const { tooltip, icon, label } = props;
|
|
|
|
return (
|
|
<div
|
|
className={clsx(
|
|
"group",
|
|
"relative",
|
|
"z-10",
|
|
"flex",
|
|
"items-center",
|
|
"justify-center",
|
|
"gap-3",
|
|
"pl-4 pt-4 pb-4 pr-6",
|
|
"dark:bg-gray-800 bg-gray-50",
|
|
"rounded-full",
|
|
"cursor-pointer",
|
|
)}
|
|
>
|
|
<div>{icon}</div>
|
|
<div
|
|
className={clsx(
|
|
"text-sm",
|
|
"font-medium",
|
|
"dark:bg-landing-packages-text-dark bg-landing-packages-text",
|
|
"bg-clip-text",
|
|
"text-transparent",
|
|
"whitespace-nowrap",
|
|
)}
|
|
>
|
|
{label}
|
|
</div>
|
|
|
|
{tooltip && (
|
|
<div
|
|
className={clsx(
|
|
"absolute",
|
|
"z-20",
|
|
"top-[-48px]",
|
|
"scale-0",
|
|
"group-hover:scale-100",
|
|
"transition-transform",
|
|
"origin-top",
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"relative",
|
|
"text-sm",
|
|
"dark:bg-gray-0 bg-gray-900",
|
|
"dark:text-gray-700 text-gray-300",
|
|
"rounded-full",
|
|
"px-6",
|
|
"py-3",
|
|
"whitespace-nowrap",
|
|
)}
|
|
>
|
|
{tooltip}
|
|
</div>
|
|
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width={40}
|
|
height={15}
|
|
fill="none"
|
|
className={clsx(
|
|
"absolute",
|
|
"scale-0",
|
|
"-bottom-2",
|
|
"left-1/2",
|
|
"-translate-x-1/2",
|
|
"group-hover:scale-100",
|
|
"transition-transform",
|
|
"origin-bottom",
|
|
"dark:text-gray-0 text-gray-900",
|
|
)}
|
|
>
|
|
<path
|
|
fill="currentColor"
|
|
d="M17.73 13.664C18.238 14.5 19.089 15 20 15c.912 0 1.763-.501 2.27-1.336l3.025-4.992C26.306 7.002 28.01 7 29.833 7H40V0H0v7h10.167c1.823 0 3.527.003 4.538 1.672l3.026 4.992Z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const list1 = [
|
|
{
|
|
icon: (props: SVGProps<SVGSVGElement>) => <Srvnginx {...props} />,
|
|
label: "Nginx",
|
|
tooltip: null,
|
|
},
|
|
{
|
|
icon: (props: SVGProps<SVGSVGElement>) => <MySql {...props} />,
|
|
label: "MySQL",
|
|
tooltip: null,
|
|
},
|
|
{
|
|
icon: (props: SVGProps<SVGSVGElement>) => <Docker {...props} />,
|
|
label: "Docker",
|
|
tooltip: null,
|
|
},
|
|
{
|
|
icon: (props: SVGProps<SVGSVGElement>) => <Ufw {...props} />,
|
|
label: "UFW",
|
|
tooltip: null,
|
|
},
|
|
{
|
|
icon: (props: SVGProps<SVGSVGElement>) => <Named {...props} />,
|
|
label: "Named",
|
|
tooltip: null,
|
|
},
|
|
] as const;
|
|
|
|
const list2 = [
|
|
{
|
|
icon: (props: SVGProps<SVGSVGElement>) => <Phpv {...props} />,
|
|
label: "PHP",
|
|
tooltip: null,
|
|
},
|
|
{
|
|
icon: (props: SVGProps<SVGSVGElement>) => <Nodejs {...props} />,
|
|
label: "NodeJS",
|
|
tooltip: null,
|
|
},
|
|
{
|
|
icon: (props: SVGProps<SVGSVGElement>) => <MySql {...props} />,
|
|
label: "MySQL",
|
|
tooltip: null,
|
|
},
|
|
{
|
|
icon: (props: SVGProps<SVGSVGElement>) => <Srvapache {...props} />,
|
|
label: "Apache",
|
|
tooltip: null,
|
|
},
|
|
{
|
|
icon: (props: SVGProps<SVGSVGElement>) => <Srvnginx {...props} />,
|
|
label: "Nginx",
|
|
tooltip: null,
|
|
},
|
|
{
|
|
icon: (props: SVGProps<SVGSVGElement>) => <Redis {...props} />,
|
|
label: "REDIS",
|
|
tooltip: null,
|
|
},
|
|
{
|
|
icon: (props: SVGProps<SVGSVGElement>) => <Memcached {...props} />,
|
|
label: "Memcached",
|
|
tooltip: null,
|
|
},
|
|
{
|
|
icon: (props: SVGProps<SVGSVGElement>) => <ElasticSe {...props} />,
|
|
label: "Elasticsearch",
|
|
tooltip: null,
|
|
},
|
|
{
|
|
icon: (props: SVGProps<SVGSVGElement>) => <Phpmyadmin {...props} />,
|
|
label: "phpMyAdmin",
|
|
tooltip: null,
|
|
},
|
|
{
|
|
icon: (props: SVGProps<SVGSVGElement>) => <Wordpress {...props} />,
|
|
label: "WP Manager",
|
|
tooltip: null,
|
|
},
|
|
{
|
|
icon: (props: SVGProps<SVGSVGElement>) => <Sshico {...props} />,
|
|
label: "SSH",
|
|
tooltip: null,
|
|
},
|
|
] as const;
|