From 56033846037a243c0bce6210f9c25cdff961ca76 Mon Sep 17 00:00:00 2001 From: Mathias Schopmans Date: Thu, 15 Feb 2024 10:00:14 +0100 Subject: [PATCH] feat: add ItemList --- src/components/ItemList/ItemList.module.css | 31 +++++++++++++++ src/components/ItemList/ItemList.tsx | 33 ++++++++++++++++ src/components/Layout/Layout.module.css | 1 + src/lib/data.ts | 26 ++++++++++++- src/lib/format.ts | 16 ++++++-- src/lib/types.ts | 1 - src/pages/index.tsx | 14 ++++++- src/styles/globals.css | 42 +++++++++++++++++++-- 8 files changed, 153 insertions(+), 11 deletions(-) create mode 100644 src/components/ItemList/ItemList.module.css create mode 100644 src/components/ItemList/ItemList.tsx diff --git a/src/components/ItemList/ItemList.module.css b/src/components/ItemList/ItemList.module.css new file mode 100644 index 0000000..7299129 --- /dev/null +++ b/src/components/ItemList/ItemList.module.css @@ -0,0 +1,31 @@ +.list { + list-style: none; + margin: 0; + padding: 0; +} + +.item { + + .item { + border-top: 1px solid var(--border); + } +} + +.flag { + margin-left: 8px; +} + +.link { + display: block; + padding: 10px; + + &.isFadedOut { + opacity: 0.65; + } + + &:hover, + &.isActive { + background: var(--foreground); + color: var(--background); + opacity: 1; + } +} diff --git a/src/components/ItemList/ItemList.tsx b/src/components/ItemList/ItemList.tsx new file mode 100644 index 0000000..30954b4 --- /dev/null +++ b/src/components/ItemList/ItemList.tsx @@ -0,0 +1,33 @@ +import Link from "next/link"; + +import styles from "./ItemList.module.css"; + +import { FlagBadge } from "@/components/Badge/Badge"; +import { Item } from "@/lib/types"; +import { cn } from "@/lib/utils"; + +interface ItemListProps { + items: Item[]; + activeId?: string; +} + +export function ItemList({ items, activeId }: ItemListProps) { + return ( + + ); +} diff --git a/src/components/Layout/Layout.module.css b/src/components/Layout/Layout.module.css index ca25f2e..dd3cf18 100644 --- a/src/components/Layout/Layout.module.css +++ b/src/components/Layout/Layout.module.css @@ -17,6 +17,7 @@ .layout.default { .content { max-width: var(--max-width); + min-height: calc(100vh - 250px); margin: 0 auto; padding: 20px; } diff --git a/src/lib/data.ts b/src/lib/data.ts index e4779f8..a2fd732 100644 --- a/src/lib/data.ts +++ b/src/lib/data.ts @@ -1,7 +1,8 @@ import config from "../../data/config.json"; +import data from "../../data/data.json"; import messages from "../../data/messages.json"; -import { Quadrant, Ring } from "@/lib/types"; +import { Flag, Item, Quadrant, Ring } from "@/lib/types"; export function getMessages() { return messages; @@ -11,10 +12,22 @@ export function getAppName() { return messages.radarName; } +export function getFlag(flag: Exclude) { + return config.flags[flag]; +} + export function getRings(): Ring[] { return config.rings; } +export function getRing(id: string): Ring | undefined { + return getRings().find((r) => r.id === id); +} + +export function getReleases(): string[] { + return data.releases; +} + export function getQuadrants(): Quadrant[] { return config.quadrants; } @@ -22,3 +35,14 @@ export function getQuadrants(): Quadrant[] { export function getQuadrant(id: string): Quadrant | undefined { return getQuadrants().find((q) => q.id === id); } + +export function getItems(featured?: boolean): Item[] { + return data.items.filter((item) => !featured || item.featured) as Item[]; +} + +export function getItem(id: string): Item | undefined { + return data.items.find((item) => item.id === id) as Item; +} + +export const sortByFeaturedAndTitle = (a: Item, b: Item) => + Number(b.featured) - Number(a.featured) || a.title.localeCompare(b.title); diff --git a/src/lib/format.ts b/src/lib/format.ts index 158372d..9307540 100644 --- a/src/lib/format.ts +++ b/src/lib/format.ts @@ -1,7 +1,15 @@ -// Format the title of the page import { getAppName } from "@/lib/data"; -export function formatTitle(title: string = ""): string { - if (!title) return getAppName(); - return `${title} | ${getAppName()}`; +// Format the title of the page +export function formatTitle(...title: string[]): string { + return [...title, getAppName()].join(" | "); +} + +// Formats a release (2024-02-14) to a date (February 2024) +export function formatRelease(release: string): string { + const date = new Date(release); + return date.toLocaleDateString("en-US", { + month: "long", + year: "numeric", + }); } diff --git a/src/lib/types.ts b/src/lib/types.ts index cd14f2c..5195aad 100644 --- a/src/lib/types.ts +++ b/src/lib/types.ts @@ -38,5 +38,4 @@ export interface Quadrant { description: string; color: string; position: number; - items?: Item[]; } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index a007d61..ed6e75e 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,7 +1,19 @@ +import { ItemList } from "@/components/ItemList/ItemList"; +import { getAppName, getItems, getReleases } from "@/lib/data"; import { CustomPage } from "@/pages/_app"; const Home: CustomPage = () => { - return

Hello world.

; + const appName = getAppName(); + const version = getReleases().length; + return ( + <> +

+ {appName}{" "} + Version #{version} +

+ + + ); }; export default Home; diff --git a/src/styles/globals.css b/src/styles/globals.css index 6141ba5..c7edd34 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -7,6 +7,9 @@ --foreground: #fff; --background: #173d7a; + --highlight: #029df7; + --border: rgba(255, 255, 255, 0.1); + --badge: #333; /* local color which get's overridden by the element */ } * { @@ -15,6 +18,10 @@ margin: 0; } +html { + scroll-behavior: smooth; +} + html, body { max-width: 100vw; @@ -24,6 +31,8 @@ body { body { color: var(--foreground); background: var(--background); + font-weight: 400; + line-height: 1.3em; } a { @@ -35,6 +44,10 @@ p { margin-bottom: 1em; } +strong { + font-weight: 700; +} + img { max-width: 100%; height: auto; @@ -44,8 +57,29 @@ svg { display: block; } -.container { - max-width: var(--max-width); - margin: 0 auto; - padding: 0 1rem; +h1, +h2, +h3, +h4 { + line-height: 1.1em; + margin-bottom: 1em; + font-weight: 700; +} + +h1 { + font-size: 37px; +} + +h2 { + font-size: 26px; +} + +h3 { + font-size: 18px; +} + +ul, +ol { + padding-left: 16px; + margin-bottom: 1em; }