57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import type { JournalBlock } from '@/lib/journal';
|
|
import {
|
|
IconFileText,
|
|
IconSparkles,
|
|
IconQuote,
|
|
IconCamera,
|
|
IconArrowLeftRight,
|
|
IconGrid,
|
|
IconColumns,
|
|
IconMap,
|
|
IconFolder,
|
|
} from './Icons';
|
|
|
|
type BlockType = JournalBlock['type'];
|
|
|
|
/**
|
|
* Block type chips for the Journal Studio and the Pages essay builder.
|
|
*
|
|
* Deliberately monochrome: the panel's colour language is neutral surfaces plus
|
|
* a single accent, and these chips label a block rather than reporting a state,
|
|
* so they carry no colour of their own. The block type is told apart by its
|
|
* icon — the same icon the "Add Block" toolbar uses for it.
|
|
*/
|
|
const BLOCK_META: Record<BlockType, { label: string; Icon: typeof IconFileText }> = {
|
|
paragraph: { label: 'Text', Icon: IconFileText },
|
|
heading: { label: 'Heading', Icon: IconSparkles },
|
|
quote: { label: 'Quote', Icon: IconQuote },
|
|
photo: { label: 'Photo', Icon: IconCamera },
|
|
'photo-pair': { label: 'Photo Pair', Icon: IconArrowLeftRight },
|
|
'photo-grid': { label: 'Photo Grid', Icon: IconGrid },
|
|
facts: { label: 'Facts', Icon: IconColumns },
|
|
map: { label: 'Map', Icon: IconMap },
|
|
album: { label: 'Album', Icon: IconFolder },
|
|
};
|
|
|
|
interface BlockBadgeProps {
|
|
type: BlockType;
|
|
/** Optional position prefix, e.g. "3" renders as "3 · Quote". */
|
|
index?: number;
|
|
}
|
|
|
|
export function BlockBadge({ type, index }: BlockBadgeProps) {
|
|
const meta = BLOCK_META[type];
|
|
if (!meta) return <span className="essay-block-badge">{type}</span>;
|
|
|
|
const { label, Icon } = meta;
|
|
return (
|
|
<span className="essay-block-badge">
|
|
<Icon size={11} />
|
|
{index != null && <span className="essay-block-badge-index">{index}</span>}
|
|
{label}
|
|
</span>
|
|
);
|
|
}
|