244 lines
8.5 KiB
TypeScript
244 lines
8.5 KiB
TypeScript
import { ReactElement } from 'react';
|
|
import { LinuxIcon, WindowsIcon } from '@nx/nx-dev/ui-icons';
|
|
import { SectionDescription, SectionHeading } from '@nx/nx-dev/ui-common';
|
|
|
|
const nonComputeItems = [
|
|
{
|
|
name: 'CI Pipeline Execution',
|
|
description:
|
|
'A CI Pipeline Execution is a CI run or a Workflow run (depending on your CI provider). For instance, running a PR or running CI on the main branch are CI Pipeline Executions.',
|
|
creditCost: 500,
|
|
suffix: 'execution',
|
|
},
|
|
];
|
|
|
|
const linuxAmd64 = [
|
|
{
|
|
icon: <LinuxIcon aria-hidden="true" className="size-6" />,
|
|
name: 'Small',
|
|
description: '1 vCPU, 2GB RAM',
|
|
creditCost: 5,
|
|
},
|
|
{
|
|
icon: <LinuxIcon aria-hidden="true" className="size-6" />,
|
|
name: 'Medium',
|
|
description: '2 vCPU, 4GB RAM',
|
|
creditCost: 10,
|
|
},
|
|
{
|
|
icon: <LinuxIcon aria-hidden="true" className="size-6" />,
|
|
name: 'Medium +',
|
|
description: '3 vCPU, 6GB RAM',
|
|
creditCost: 15,
|
|
},
|
|
{
|
|
icon: <LinuxIcon aria-hidden="true" className="size-6" />,
|
|
name: 'Large',
|
|
description: '4 vCPU, 8GB RAM',
|
|
creditCost: 20,
|
|
},
|
|
{
|
|
icon: <LinuxIcon aria-hidden="true" className="size-6" />,
|
|
name: 'Large +',
|
|
description: '4 vCPU, 10GB RAM',
|
|
creditCost: 30,
|
|
},
|
|
{
|
|
icon: <LinuxIcon aria-hidden="true" className="size-6" />,
|
|
name: 'Extra large',
|
|
description: '8 vCPU, 16GB RAM',
|
|
creditCost: 40,
|
|
},
|
|
{
|
|
icon: <LinuxIcon aria-hidden="true" className="size-6" />,
|
|
name: 'Extra large +',
|
|
description: '10 vCPU, 20GB RAM',
|
|
creditCost: 60,
|
|
},
|
|
];
|
|
|
|
const linuxArm64 = [
|
|
{
|
|
icon: <LinuxIcon aria-hidden="true" className="size-6" />,
|
|
name: 'Medium',
|
|
description: '2 vCPU, 8GB RAM',
|
|
creditCost: 13,
|
|
},
|
|
{
|
|
icon: <LinuxIcon aria-hidden="true" className="size-6" />,
|
|
name: 'Large',
|
|
description: '4 vCPU, 16GB RAM',
|
|
creditCost: 26,
|
|
},
|
|
{
|
|
icon: <LinuxIcon aria-hidden="true" className="size-6" />,
|
|
name: 'Extra large',
|
|
description: '8 vCPU, 32GB RAM',
|
|
creditCost: 52,
|
|
},
|
|
];
|
|
|
|
const windows = [
|
|
{
|
|
icon: <WindowsIcon aria-hidden="true" className="size-6" />,
|
|
name: 'Medium',
|
|
description: '3 vCPU, 6GB RAM',
|
|
creditCost: 40,
|
|
},
|
|
];
|
|
|
|
export function CreditPricing(): ReactElement {
|
|
return (
|
|
<section
|
|
id="resource-classes"
|
|
className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"
|
|
>
|
|
<header>
|
|
<div className="mx-auto max-w-4xl text-center">
|
|
<SectionHeading as="h2" variant="title">
|
|
Credit pricing
|
|
</SectionHeading>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="mx-auto mt-10 max-w-full space-y-12 sm:mt-20">
|
|
<SectionHeading as="h3" variant="subtitle">
|
|
Non-compute pricing
|
|
</SectionHeading>
|
|
<div>
|
|
<ul role="list" className="mt-4 space-y-4 sm:space-y-6">
|
|
{nonComputeItems.map((project) => (
|
|
<li
|
|
key={project.name}
|
|
className="col-span-1 flex overflow-hidden rounded-md border border-slate-200 shadow-sm dark:border-slate-800"
|
|
>
|
|
<div className="flex flex-1 items-center justify-between bg-white dark:bg-slate-900">
|
|
<div className="flex-1 px-4 py-2 text-sm">
|
|
<span className="font-medium text-slate-900 dark:text-slate-100">
|
|
{project.name}
|
|
</span>
|
|
<p className="text-xs text-slate-500">
|
|
{project.description}
|
|
</p>
|
|
</div>
|
|
<div className="shrink-0 pr-4 text-sm font-semibold">
|
|
<span>
|
|
{new Intl.NumberFormat('en-US', {
|
|
style: 'decimal',
|
|
}).format(project.creditCost)}{' '}
|
|
credits/{project.suffix}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<SectionHeading as="h3" variant="subtitle">
|
|
Agents resource classes
|
|
</SectionHeading>
|
|
<div>
|
|
<SectionDescription as="h3">Docker / Linux AMD64</SectionDescription>
|
|
<ul
|
|
role="list"
|
|
className="mt-4 grid grid-cols-1 gap-5 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3"
|
|
>
|
|
{linuxAmd64.map((project) => (
|
|
<li
|
|
key={project.name}
|
|
className="col-span-1 flex overflow-hidden rounded-md border border-slate-200 shadow-sm dark:border-slate-800"
|
|
>
|
|
<div className="flex w-16 shrink-0 items-center justify-center border-r border-slate-200 bg-slate-50 text-sm font-medium dark:border-slate-800 dark:bg-slate-800">
|
|
{project.icon}
|
|
</div>
|
|
<div className="flex flex-1 items-center justify-between truncate bg-white dark:bg-slate-900">
|
|
<div className="flex-1 truncate px-4 py-2 text-sm">
|
|
<span className="font-medium text-slate-900 dark:text-slate-100">
|
|
{project.name}
|
|
</span>
|
|
<p className="text-xs text-slate-500">
|
|
{project.description}
|
|
</p>
|
|
</div>
|
|
<div className="shrink-0 pr-4 text-sm font-semibold">
|
|
<span>
|
|
{new Intl.NumberFormat('en-US', {
|
|
style: 'decimal',
|
|
}).format(project.creditCost)}{' '}
|
|
credits/min
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<SectionDescription as="h3">Docker / Linux ARM64</SectionDescription>
|
|
<ul
|
|
role="list"
|
|
className="mt-4 grid grid-cols-1 gap-5 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3"
|
|
>
|
|
{linuxArm64.map((project) => (
|
|
<li
|
|
key={project.name}
|
|
className="col-span-1 flex overflow-hidden rounded-md border border-slate-200 shadow-sm dark:border-slate-800"
|
|
>
|
|
<div className="flex w-16 shrink-0 items-center justify-center border-r border-slate-200 bg-slate-50 text-sm font-medium dark:border-slate-800 dark:bg-slate-800">
|
|
{project.icon}
|
|
</div>
|
|
<div className="flex flex-1 items-center justify-between truncate bg-white dark:bg-slate-900">
|
|
<div className="flex-1 truncate px-4 py-2 text-sm">
|
|
<span className="font-medium text-slate-900 dark:text-slate-100">
|
|
{project.name}
|
|
</span>
|
|
<p className="text-xs text-slate-500">
|
|
{project.description}
|
|
</p>
|
|
</div>
|
|
<div className="shrink-0 pr-4 text-sm font-semibold">
|
|
<span>{project.creditCost} credits/min</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<SectionDescription as="h3">Docker / Windows</SectionDescription>
|
|
<ul
|
|
role="list"
|
|
className="mt-4 grid grid-cols-1 gap-5 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3"
|
|
>
|
|
{windows.map((project) => (
|
|
<li
|
|
key={project.name}
|
|
className="col-span-1 flex overflow-hidden rounded-md border border-slate-200 shadow-sm dark:border-slate-800"
|
|
>
|
|
<div className="flex w-16 shrink-0 items-center justify-center border-r border-slate-200 bg-slate-50 text-sm font-medium dark:border-slate-800 dark:bg-slate-800">
|
|
{project.icon}
|
|
</div>
|
|
<div className="flex flex-1 items-center justify-between truncate bg-white dark:bg-slate-900">
|
|
<div className="flex-1 truncate px-4 py-2 text-sm">
|
|
<span className="font-medium text-slate-900 dark:text-slate-100">
|
|
{project.name}
|
|
</span>
|
|
<p className="text-xs text-slate-500">
|
|
{project.description}
|
|
</p>
|
|
</div>
|
|
<div className="shrink-0 pr-4 text-sm font-semibold">
|
|
<span>{project.creditCost} credits/min</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|