47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
/** @jsxImportSource react */
|
|
import type { ReactElement } from 'react';
|
|
import { useTheme } from '@lilith/ui-theme';
|
|
import { useProjectContext } from '../useProjectContext';
|
|
import { useContentCalendar } from '@features/projects/frontend/useProjects';
|
|
import { ContentStatus } from '@life-platform/shared';
|
|
import { StatsBar, StatPill, PillValue, PillLabel } from './header-styles';
|
|
|
|
const PIPELINE_LABELS: Partial<Record<ContentStatus, string>> = {
|
|
[ContentStatus.Idea]: 'Ideas',
|
|
[ContentStatus.Planned]: 'Planned',
|
|
[ContentStatus.Scheduled]: 'Scheduled',
|
|
};
|
|
|
|
export default function ContentHeader(): ReactElement | null {
|
|
const { project } = useProjectContext();
|
|
const { theme } = useTheme();
|
|
const accent = project.color || theme.colors.primary.main;
|
|
|
|
const { data: contentResult } = useContentCalendar({
|
|
projectId: project.id,
|
|
limit: 200,
|
|
});
|
|
|
|
const items = contentResult?.data ?? [];
|
|
|
|
const counts = Object.entries(PIPELINE_LABELS).map(([status, label]) => ({
|
|
status,
|
|
label: label!,
|
|
count: items.filter((i) => i.status === status).length,
|
|
}));
|
|
|
|
return (
|
|
<StatsBar>
|
|
{counts.map(({ status, label, count }) => (
|
|
<StatPill key={status} accent={accent}>
|
|
<PillValue accent={accent}>{count}</PillValue>
|
|
<PillLabel>{label}</PillLabel>
|
|
</StatPill>
|
|
))}
|
|
<StatPill accent={accent}>
|
|
<PillValue accent={accent}>{items.length}</PillValue>
|
|
<PillLabel>Total</PillLabel>
|
|
</StatPill>
|
|
</StatsBar>
|
|
);
|
|
}
|