45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import React from "react";
|
|
import { formatRelease } from "../../date";
|
|
import { featuredOnly, Item } from "../../model";
|
|
import HeroHeadline from "../HeroHeadline/HeroHeadline";
|
|
import QuadrantGrid from "../QuadrantGrid/QuadrantGrid";
|
|
import Fadeable from "../Fadeable/Fadeable";
|
|
import SetTitle from "../SetTitle";
|
|
import { radarName, radarNameShort } from "../../config";
|
|
import { MomentInput } from "moment";
|
|
import { useMessages } from "../../context/MessagesContext";
|
|
|
|
type PageIndexProps = {
|
|
leaving: boolean;
|
|
onLeave: () => void;
|
|
items: Item[];
|
|
releases: MomentInput[];
|
|
};
|
|
|
|
export default function PageIndex({
|
|
leaving,
|
|
onLeave,
|
|
items,
|
|
releases,
|
|
}: PageIndexProps) {
|
|
const { pageIndex } = useMessages();
|
|
const publishedLabel = pageIndex?.publishedLabel || 'Published';
|
|
|
|
const newestRelease = releases.slice(-1)[0];
|
|
const numberOfReleases = releases.length;
|
|
return (
|
|
<Fadeable leaving={leaving} onLeave={onLeave}>
|
|
<SetTitle title={radarNameShort} />
|
|
<div className="headline-group">
|
|
<HeroHeadline alt={`Version #${numberOfReleases}`}>
|
|
{radarName}
|
|
</HeroHeadline>
|
|
</div>
|
|
<QuadrantGrid items={featuredOnly(items)} />
|
|
<div className="publish-date">
|
|
{publishedLabel} {formatRelease(newestRelease)}
|
|
</div>
|
|
</Fadeable>
|
|
);
|
|
}
|