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 | import React from "react";
import { Calendar } from "lucide-react";
import * as style from "./index.module.scss";
import ReactGA from "react-ga4";
import dayjs from "dayjs";
import type { AllPost } from "../entity";
const Archive = ({ allPosts }: { allPosts: AllPost[] }) => {
const yearList = Array.from(
new Set(
allPosts.map((data) => dayjs(data.node.frontmatter.date).format("YYYY")),
),
).sort((a, b) => (a < b ? 1 : -1));
return (
<div className={style.archive} data-testid="Archive">
<div className={style.sectionHeader}>
<Calendar
size={16}
aria-hidden="true"
style={{ verticalAlign: "-0.125em" }}
/>
Archives
</div>
{yearList.map((year) => (
<a
key={year}
href={`/${year}/`}
title={`Articles written in ${year}`}
onClick={() =>
ReactGA.event({
category: "Archive",
action: `push Archive ${year}`,
})
}
>
{year}
</a>
))}
</div>
);
};
export default Archive;
|