Matthias G
c95db3a044
- the plate carries project colour on the lead image, in the cards and in every row, not only when an entry lacks an image - entries no longer fade in one after another, the page is readable at once - detail pages lead on: previous, next and more from the project - the month band shows from the first month, the nav item hides without one - side cards and row teasers get room instead of ellipsis - admin opens on drafts, scheduled and published plus what was edited last, and its tables use the full width
63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import type { CSSProperties } from 'react'
|
|
import { projectCode, type ProjectCodeSource } from '~/domain/project-code'
|
|
|
|
export type PlateSize = 'lead' | 'mark' | 'card' | 'row'
|
|
|
|
export type PlateProps = {
|
|
project: ProjectCodeSource
|
|
color: string
|
|
number: number | null
|
|
size?: PlateSize
|
|
showNumber?: boolean
|
|
className?: string
|
|
}
|
|
|
|
export const projectSurface = 'plate-fill'
|
|
|
|
export function projectStyle(color: string): CSSProperties {
|
|
return { '--plate': color } as CSSProperties
|
|
}
|
|
|
|
export function entryNumber(number: number): string {
|
|
return String(number).padStart(4, '0')
|
|
}
|
|
|
|
export function entryMark(project: ProjectCodeSource, number: number | null): string {
|
|
return number === null ? projectCode(project) : `${projectCode(project)}-${entryNumber(number)}`
|
|
}
|
|
|
|
const shells: Record<PlateSize, string> = {
|
|
lead: 'flex min-h-44 flex-col justify-between gap-8 px-5 py-4',
|
|
mark: 'flex flex-col justify-between gap-3 px-3 py-2.5',
|
|
card: 'flex flex-col justify-between gap-1 px-2 py-1.5',
|
|
row: 'inline-flex items-baseline gap-2.5 px-2 py-1',
|
|
}
|
|
|
|
const codeSizes: Record<PlateSize, string> = {
|
|
lead: 'text-small tracking-plate',
|
|
mark: 'text-micro tracking-plate',
|
|
card: 'text-micro tracking-mark',
|
|
row: 'text-micro tracking-label',
|
|
}
|
|
|
|
const numberSizes: Record<PlateSize, string> = {
|
|
lead: 'text-plate leading-none',
|
|
mark: 'text-title leading-none',
|
|
card: 'text-small leading-none',
|
|
row: 'text-micro',
|
|
}
|
|
|
|
export function Plate({ project, color, number, size = 'row', showNumber = true, className }: PlateProps) {
|
|
return (
|
|
<span
|
|
style={projectStyle(color)}
|
|
className={`${projectSurface} ${shells[size]} font-mono font-semibold text-paper ${className ?? ''}`}
|
|
>
|
|
<span className={`block uppercase ${codeSizes[size]}`}>{projectCode(project)}</span>
|
|
{showNumber && number !== null ? (
|
|
<span className={`block tabular-nums ${numberSizes[size]}`}>{entryNumber(number)}</span>
|
|
) : null}
|
|
</span>
|
|
)
|
|
}
|