mirror of
https://github.com/Patiun/com.gregkilmer.www.git
synced 2026-11-07 19:58:24 +00:00
Claude
01431468e4
- Palette: Patiun Teal, Midnight, night sky, Starlight, flat Alchemist Gold; violet/indigo only as nebula light. Starlight content sections, night-sky nav and heroes (.on-sky scope re-points accent/gold to on-dark values). - Type: Cinzel for headings, names and card titles; Montserrat for body, UI and eyebrows (font-eyebrow); JetBrains Mono kept for code-like blocks. - Header lockup: Patiun glyph + Cinzel "GREG KILMER" + "Web Development · a Patiun LLC company"; glyph also marks the footer and store nav. - Teal filled buttons with Midnight text; gold eyebrows; small links use a darker teal so they pass WCAG AA on Starlight. - Favicons, app icons and web manifest from the GregKilmer.com brand package. - docs/THEMING.md updated for the new palette and fonts. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012aSbo2D1qP8cMFQCykf7kx
75 lines
2.3 KiB
Plaintext
75 lines
2.3 KiB
Plaintext
---
|
|
/**
|
|
* CategoryList.astro
|
|
* ---------------------------------------------------------------------------
|
|
* Renders a media kind's full library grouped by category: for each group a
|
|
* small subheader (the category name + item count), then a wrapping row of
|
|
* pills (title + optional status). Reuses the existing `.pill` + `<Icon>`
|
|
* pattern already established on the old reading page.
|
|
*
|
|
* Pass the output of `getGrouped(kind)` directly. When the list is empty the
|
|
* caller should fall back to `<Placeholder>` (see the pages); this component
|
|
* assumes at least one group.
|
|
*/
|
|
import Icon from '@components/Icon.astro';
|
|
import type { MediaGroup } from '@lib/media';
|
|
|
|
interface Props {
|
|
groups: MediaGroup[];
|
|
/** mdi icon shown before each pill. */
|
|
pillIcon?: string;
|
|
}
|
|
|
|
const { groups, pillIcon = 'play-circle' } = Astro.props;
|
|
---
|
|
|
|
<div class="flex flex-col gap-8">
|
|
{
|
|
groups.map((group) => (
|
|
<div class="flex flex-col gap-3">
|
|
<div class="flex items-baseline gap-2.5">
|
|
<h3
|
|
class="font-display text-lg"
|
|
style="color: var(--color-text);"
|
|
>
|
|
{group.category}
|
|
</h3>
|
|
<span
|
|
class="font-eyebrow text-[0.65rem] uppercase tracking-[0.18em]"
|
|
style="color: var(--color-text-muted);"
|
|
>
|
|
{group.items.length}
|
|
</span>
|
|
</div>
|
|
<ul class="flex flex-wrap gap-2.5">
|
|
{group.items.map((item) => (
|
|
<li
|
|
class="pill inline-flex items-center gap-1.5 text-sm"
|
|
title={item.note ?? ''}
|
|
>
|
|
<Icon name={pillIcon} class="h-3.5 w-3.5" />
|
|
<span>{item.title}</span>
|
|
{item.status && (
|
|
<span
|
|
class="font-eyebrow text-[0.6rem] uppercase tracking-[0.14em]"
|
|
style="color: var(--color-accent);"
|
|
>
|
|
{item.status}
|
|
</span>
|
|
)}
|
|
{item.year && (
|
|
<span
|
|
class="font-eyebrow text-[0.6rem] tracking-[0.04em]"
|
|
style="color: var(--color-text-muted);"
|
|
>
|
|
{item.year}
|
|
</span>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))
|
|
}
|
|
</div>
|