Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | import { Text, Tooltip } from "@chakra-ui/react";
import { formatDistanceToNowStrict } from "date-fns";
import { FunctionComponent, ReactChild } from "react";
import { usePackageCard } from "./PackageCard";
import testIds from "./testIds";
import { useStats } from "../../hooks/useStats";
import { getSearchPath } from "../../util/url";
import { NavLink } from "../NavLink";
import { Time } from "../Time";
interface DetailProps {
"data-testid": string;
tooltip?: string;
value: ReactChild;
}
const Detail: FunctionComponent<DetailProps> = ({
"data-testid": dataTestid,
tooltip,
value,
}) => (
<Tooltip hasArrow isDisabled={!tooltip} label={tooltip} placement="left">
{/* zIndex required to allow tooltip to display due to card link overlay */}
<Text data-testid={dataTestid} fontSize="xs" zIndex={1}>
{value}
</Text>
</Tooltip>
);
export const Details: FunctionComponent = () => {
const {
author,
metadata: { date },
name,
} = usePackageCard();
const { data } = useStats();
const downloads: number | undefined = data?.packages?.[name]?.downloads?.npm;
const authorName = typeof author === "string" ? author : author.name;
const publishDate = new Date(date);
return (
<>
{downloads !== undefined && (
<Detail
data-testid={testIds.downloads}
tooltip="Download numbers are periodically sourced from the npm registry"
value={`${downloads.toLocaleString()} weekly downloads`}
/>
)}
<Detail
data-testid={testIds.published}
value={
<Time
date={publishDate}
fontSize="xs"
formattedDate={formatDistanceToNowStrict(publishDate, {
addSuffix: true,
})}
/>
}
/>
<Detail
data-testid={testIds.author}
value={
<>
By{" "}
<NavLink
color="link"
to={getSearchPath({
query: authorName,
})}
>
{authorName}
</NavLink>
</>
}
/>
</>
);
};
|