miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

feat(nx-dev): clean up enterprise section (#27979)

Browse Source
This commit is contained in:
Benjamin Cabanes 2024-09-18 13:45:29 -04:00 committed by GitHub
parent b06f515059
commit c3839204a9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 5 additions and 298 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
nx-dev/ui-enterprise/src/lib/enterprise-addons.tsx
View File

@ -1,10 +1,9 @@
import { SectionHeading } from './temp/typography';
import {
BoltIcon,
ChevronDoubleRightIcon,
UsersIcon,
WrenchIcon,
} from '@heroicons/react/24/outline';
import { SectionHeading } from '@nx/nx-dev/ui-common';
export function EnterpriseAddons(): JSX.Element {
return (

3
nx-dev/ui-enterprise/src/lib/hero.tsx
View File

@ -1,5 +1,4 @@
import { SectionHeading } from './temp/typography';
import { ButtonLink } from '@nx/nx-dev/ui-common';
import { ButtonLink, SectionHeading } from '@nx/nx-dev/ui-common';
import Link from 'next/link';
export function Hero(): JSX.Element {

59
nx-dev/ui-enterprise/src/lib/scale-ci-and-teams.tsx
View File

@ -1,59 +0,0 @@
import { BoltIcon } from '@heroicons/react/24/outline';
import { SectionHeading } from '@nx/nx-dev/ui-common';
import { NxAgentsIcon, NxReplayIcon } from '@nx/nx-dev/ui-icons';
const features = [
{
name: 'Cache with Nx Replay',
description:
'Quis tellus eget adipiscing convallis sit sit eget aliquet quis. Suspendisse eget egestas a elementum pulvinar et feugiat blandit at. In mi viverra elit nunc.',
icon: NxReplayIcon,
},
{
name: 'Distribution with Nx Agents',
description:
'Quis tellus eget adipiscing convallis sit sit eget aliquet quis. Suspendisse eget egestas a elementum pulvinar et feugiat blandit at. In mi viverra elit nunc.',
icon: NxAgentsIcon,
},
{
name: 'Split tasks with Atomizer',
description:
'Quis tellus eget adipiscing convallis sit sit eget aliquet quis. Suspendisse eget egestas a elementum pulvinar et feugiat blandit at. In mi viverra elit nunc.',
icon: BoltIcon,
},
];
export function ScaleCiAndTeams(): JSX.Element {
return (
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="max-w-3xl">
<SectionHeading as="h2" variant="display" id="scale-ci-and-teams">
Scale CI & teams
</SectionHeading>
<p className="mt-6 text-lg leading-8">
Quis tellus eget adipiscing convallis sit sit eget aliquet quis.
Suspendisse eget egestas a elementum pulvinar et feugiat blandit at.
In mi viverra elit nunc.
</p>
</div>
<div className="mx-auto mt-16 max-w-2xl lg:max-w-none">
<dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
{features.map((feature) => (
<div key={feature.name} className="flex flex-col">
<dt className="flex items-center gap-x-3 text-base font-semibold leading-7">
<feature.icon
className="h-5 w-5 flex-none"
aria-hidden="true"
/>
{feature.name}
</dt>
<dd className="mt-4 flex flex-auto flex-col text-base leading-7 text-slate-500">
<p className="flex-auto">{feature.description}</p>
</dd>
</div>
))}
</dl>
</div>
</div>
);
}

25
nx-dev/ui-enterprise/src/lib/scale-your-people.tsx
View File

@ -3,11 +3,10 @@ import {
Cog6ToothIcon,
CubeTransparentIcon,
IdentificationIcon,
PhotoIcon,
SquaresPlusIcon,
UserGroupIcon,
} from '@heroicons/react/24/outline';
import { SectionHeading } from './temp/typography';
import { SectionHeading } from '@nx/nx-dev/ui-common';
export function ScaleYourPeople(): JSX.Element {
return (
@ -250,28 +249,6 @@ export function ScaleYourPeople(): JSX.Element {
</div>
</div>
</div>
{/*<div className="mt-16">*/}
{/* <picture className="block py-12">*/}
{/* <img*/}
{/* src="/images/enterprise/graphs.jpg"*/}
{/* alt="Product screenshot"*/}
{/* className="mx-auto max-w-full rounded-xl shadow-xl ring-1 ring-slate-400/10"*/}
{/* width={2500}*/}
{/* height={1616}*/}
{/* />*/}
{/* </picture>*/}
{/* <div className="mx-auto mt-4 max-w-2xl">*/}
{/* <h4 className="relative text-base font-medium capitalize leading-6 text-slate-900 dark:text-slate-100">*/}
{/* Crystal clear organizations*/}
{/* </h4>*/}
{/* <p>*/}
{/* Regardless of how many Nx Workspaces your company has, Nx Enterprise*/}
{/* can give you the visibility you need to understand what they have in*/}
{/* common, how they relate, and how they differ. Developers are no*/}
{/* longer relegated to contributing to one Nx Workspace.*/}
{/* </p>*/}
{/* </div>*/}
{/*</div>*/}
</div>
</section>
);

2
nx-dev/ui-enterprise/src/lib/security.tsx
View File

@ -1,4 +1,4 @@
import { SectionHeading } from './temp/typography';
import { SectionHeading } from '@nx/nx-dev/ui-common';
export function Security(): JSX.Element {
return (

2
nx-dev/ui-enterprise/src/lib/solve-your-ci.tsx
View File

@ -12,9 +12,9 @@ import {
} from '@heroicons/react/24/outline';
import { animate, motion, useMotionValue, useTransform } from 'framer-motion';
import { useEffect } from 'react';
import { SectionHeading } from './temp/typography';
import { BentoGrid, BentoGridItem } from './bento-grid';
import { cx } from '@nx/nx-dev/ui-primitives';
import { SectionHeading } from '@nx/nx-dev/ui-common';
export function SolveYourCi(): JSX.Element {
return (

150
nx-dev/ui-enterprise/src/lib/statistics.tsx
View File

@ -1,150 +0,0 @@
import { motion } from 'framer-motion';
import { useEffect, useState } from 'react';
import { SectionHeading } from './temp/typography';
/**
* Calculate the total number of years worth of compute.
*
* @param {number} millis - The total number of seconds.
* @return {number} The total number of years.
*/
function getTotalYears(millis: number): number {
/**
* The number of millis in a year is approximately:
* 86 400 000 millis/day * 365.25 days/year ≈ 31 557 600 000 seconds/year.
*/
const yearMillis = Number(31557600000);
return Math.round(millis / yearMillis);
}
/**
* Fetches the time saved from a remote API.
*
* @returns {Promise} A promise that resolves to an object containing the time saved data.
* @returns {Date} The date the time saved data was retrieved.
* @returns {number} The time saved in the last 7 days.
* @returns {number} The time saved in the last 30 days.
* @returns {number} The time's saved since the start.
*/
function fetchTimeSaved(): Promise<{
date: Date;
last7days: number;
last30days: number;
sinceStart: number;
}> {
const apiUrl = 'https://cloud.nx.app/time-saved';
return fetch(apiUrl)
.then((response) => response.json())
.catch(() => ({
date: new Date(),
last7days: Math.round(Math.random() * 1000000000),
last30days: Math.round(Math.random() * 100000000000),
sinceStart: Math.round(Math.random() * 10000000000000),
}));
}
const stats = [
{
id: 1,
name: 'Developers using Nx',
value: 2,
suffix: 'M+',
},
{
id: 3,
name: 'Active workspaces',
value: '4k',
suffix: '+',
},
{ id: 2, name: 'Compute time saved', value: 800, suffix: '+ years' },
{ id: 4, name: 'Runs daily', value: 100, suffix: 'k+' },
];
export function Statistics(): JSX.Element {
const variants = {
hidden: {
opacity: 0,
transition: {
when: 'afterChildren',
},
},
visible: (i: number) => ({
opacity: 1,
transition: {
delay: i || 0,
},
}),
};
const itemVariants = {
visible: (i: number) => ({
opacity: 1,
y: 0,
transition: {
delay: i * 0.25,
duration: 0.65,
ease: 'easeOut',
when: 'beforeChildren',
staggerChildren: 0.3,
},
}),
hidden: {
opacity: 0,
y: 4,
transition: {
when: 'afterChildren',
},
},
};
const [timeSaved, setTimeSaved] = useState<number>(800);
useEffect(() => {
let ignore = false;
fetchTimeSaved().then((data) => {
if (!ignore) {
setTimeSaved(getTotalYears(data.sinceStart));
}
});
return () => {
ignore = true;
};
}, []);
return (
<section className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-xl">
<SectionHeading as="h2" variant="title" id="statistics">
Trusted by startups and Fortune 500 companies
</SectionHeading>
{/*<SectionHeading as="p" variant="subtitle" className="mt-6">*/}
{/* Nx Cloud provides plans for open source projects, startups, and large*/}
{/* enterprises.*/}
{/*</SectionHeading>*/}
</div>
<motion.dl
initial="hidden"
variants={variants}
whileInView="visible"
viewport={{ once: true }}
className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-10 text-slate-950 sm:mt-20 sm:grid-cols-2 sm:gap-y-16 lg:mx-0 lg:max-w-none lg:grid-cols-4 dark:text-white"
>
{stats.map((stat, idx) => (
<motion.div
key={`statistic-${idx}`}
custom={idx}
variants={itemVariants}
className="flex flex-col gap-y-3 border-l border-black/10 pl-6 dark:border-white/10"
>
<dt className="text-sm leading-6 text-slate-600 dark:text-slate-500">
{stat.name}
</dt>
<dd className="order-first text-3xl font-semibold tracking-tight">
{stat.name === 'Compute time saved' ? timeSaved : stat.value}
{stat.suffix}
</dd>
</motion.div>
))}
</motion.dl>
</section>
);
}

59
nx-dev/ui-enterprise/src/lib/temp/typography.tsx
View File

@ -1,59 +0,0 @@
import { cx } from '@nx/nx-dev/ui-primitives';
import { ElementType, ReactNode } from 'react';
type AllowedVariants = 'title' | 'display' | 'subtitle';
type Headings = {
as: ElementType;
className?: string;
children: ReactNode | ReactNode[];
id?: string;
variant: AllowedVariants;
};
type Description = {
as: ElementType;
className?: string;
children: ReactNode | ReactNode[];
id?: string;
};
const variants: Record<AllowedVariants, string> = {
title:
'text-3xl font-medium tracking-tight text-slate-950 dark:text-white sm:text-5xl',
display:
'text-4xl font-medium tracking-tight text-slate-950 dark:text-white sm:text-7xl',
subtitle: 'text-lg leading-8 text-slate-700 dark:text-slate-300 sm:text-2xl',
};
export function SectionHeading({
as = 'div',
children,
className,
variant,
...rest
}: Headings): JSX.Element {
const Tag = as;
return (
<Tag className={cx(variants[variant], className)} {...rest}>
{children}
</Tag>
);
}
export function SectionDescription({
as = 'div',
children,
className,
...rest
}: Description): JSX.Element {
const Tag = as;
return (
<Tag
className={cx('text-slate-700 dark:text-slate-400', className)}
{...rest}
>
{children}
</Tag>
);
}