134 lines
4.2 KiB
TypeScript
134 lines
4.2 KiB
TypeScript
"use client";
|
|
import { ReleaseNote, releaseNotes } from "@/lib/release-notes";
|
|
import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
|
|
import { CheckCheckIcon, StarIcon } from "lucide-react";
|
|
import StickyBox from "react-sticky-box";
|
|
|
|
import moment from "moment";
|
|
import { Accordion, AccordionItem } from "@radix-ui/react-accordion";
|
|
import { AccordionContent, AccordionTrigger } from "./ui/accordion";
|
|
import { ny } from "@/lib/utils";
|
|
|
|
export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
|
|
const splitDate = data.date.split("/");
|
|
return (
|
|
<section
|
|
className={ny(
|
|
"relative flex flex-col border-t lg:flex-row",
|
|
data.version == releaseNotes[0].version ? "mt-24 pt-24" : "mt-36 pt-36",
|
|
)}
|
|
id={data.version}
|
|
>
|
|
<StickyBox
|
|
className="mb-6 ml-10 mr-24 mt-1 h-fit min-w-52 text-xs text-muted-foreground lg:mb-0"
|
|
offsetTop={120}
|
|
>
|
|
{moment({
|
|
year: parseInt(splitDate[2]),
|
|
month: parseInt(splitDate[1]) - 1,
|
|
day: parseInt(splitDate[0]),
|
|
}).format("MMMM Do, YYYY")}
|
|
</StickyBox>
|
|
<div className="px-5 md:px-0 md:px-10 md:pr-32">
|
|
<h1 className="text-3xl font-bold">
|
|
Release notes for {data.version} 🎉
|
|
</h1>
|
|
<p className="text-md mt-4 text-muted-foreground">
|
|
If you encounter any issues, please report them on{" "}
|
|
<a
|
|
href="https://github.com/zen-browser/desktop/issues/"
|
|
className="text-underline text-blue-500"
|
|
>
|
|
the issues page
|
|
</a>
|
|
. Thanks everyone for your feedback! ❤️
|
|
</p>
|
|
{data.extra && (
|
|
<p
|
|
className="text-md mt-8 text-muted-foreground"
|
|
dangerouslySetInnerHTML={{
|
|
__html: data.extra.replace(/(\n)/g, "<br />"),
|
|
}}
|
|
></p>
|
|
)}
|
|
<Accordion type="single" collapsible className="mt-8">
|
|
{data.breakingChanges && (
|
|
<AccordionItem value="breaking-changes" title="Breaking Changes">
|
|
<AccordionTrigger className="border-b">
|
|
<div className="flex items-center">
|
|
<ExclamationTriangleIcon className="mr-2 mt-1 size-5 text-red-500 opacity-50" />
|
|
<span className="ml-2">Breaking Changes</span>
|
|
</div>
|
|
</AccordionTrigger>
|
|
<AccordionContent>
|
|
<ul className="ml-6" style={{ listStyleType: "initial" }}>
|
|
{data.breakingChanges.map((change) => (
|
|
<li
|
|
key={change}
|
|
className="text-md mt-4 text-muted-foreground"
|
|
>
|
|
<span className="ml-1">{change}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
)}
|
|
{data.fixes && (
|
|
<AccordionItem value="fixes" title="Fixes">
|
|
<AccordionTrigger className="border-b">
|
|
<div className="flex items-center">
|
|
<CheckCheckIcon className="mr-2 mt-1 size-5 opacity-50" />
|
|
<span className="ml-2">Fixes</span>
|
|
</div>
|
|
</AccordionTrigger>
|
|
<AccordionContent>
|
|
<ul className="ml-6" style={{ listStyleType: "initial" }}>
|
|
{data.fixes.map((fix) => (
|
|
<li
|
|
key={fix.description}
|
|
className="text-md mt-4 text-muted-foreground"
|
|
>
|
|
<span className="ml-1">{fix.description}</span>
|
|
{fix.issue && (
|
|
<a
|
|
href={`https://github.com/zen-browser/desktop/issues/${fix.issue}`}
|
|
className="text-underline ml-1 text-blue-500"
|
|
>
|
|
#{fix.issue}
|
|
</a>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
)}
|
|
{data.features && (
|
|
<AccordionItem value="features" title="Features">
|
|
<AccordionTrigger>
|
|
<div className="flex items-center">
|
|
<StarIcon className="mr-2 mt-1 size-5 text-yellow-700 opacity-50" />
|
|
<span className="ml-2">Features</span>
|
|
</div>
|
|
</AccordionTrigger>
|
|
<AccordionContent>
|
|
<ul className="ml-6" style={{ listStyleType: "initial" }}>
|
|
{data.features.map((feature) => (
|
|
<li
|
|
key={feature}
|
|
className="text-md mt-4 text-muted-foreground"
|
|
>
|
|
<span className="ml-1">{feature}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
)}
|
|
</Accordion>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|