import {
ArrowDownIcon,
ClockIcon,
StarIcon,
} from '@heroicons/react/24/outline';
export interface PluginCardProps {
name: string;
description: string;
url: string;
isOfficial: boolean;
lastPublishedDate?: string;
npmDownloads?: string;
githubStars?: string;
nxVersion?: string;
}
export function PluginCard({
name,
description,
url,
isOfficial,
lastPublishedDate,
npmDownloads,
githubStars,
nxVersion,
}: PluginCardProps): JSX.Element {
return (
);
}
export function LastPublishedWidget({
lastPublishedDate,
}: {
lastPublishedDate: string | undefined;
}) {
if (!lastPublishedDate) {
return ;
}
return (
{/* yyyy-MM-dd */}
{new Date(lastPublishedDate).toISOString().slice(0, 10)}
Most Recent Release Date
);
}
function NpmDownloadsWidget({
npmDownloads,
}: {
npmDownloads: string | undefined;
}) {
if (!npmDownloads) {
return ;
}
return (
{shortenNumber(npmDownloads)}
Monthly NPM Downloads
);
}
function GithubStarsWidget({
githubStars,
}: {
githubStars: string | undefined;
}) {
if (!githubStars || githubStars == '-1') {
return ;
}
return (
{shortenNumber(githubStars)}
GitHub Stars
);
}
function shortenNumber(number: string | number): string {
const num = Number.parseInt(number + '');
if (num > 1000000) {
return Math.floor(num / 1000000) + 'M';
}
if (num > 1000) {
return Math.floor(num / 1000) + 'k';
}
return num + '';
}
function NxVersionWidget({ nxVersion }: { nxVersion: string | undefined }) {
if (!nxVersion) {
return ;
}
return (
{/* Nx Logo */}
{nxVersion}
Supported Nx Versions
);
}