diff --git a/src/components/CategoryBadge.astro b/src/components/CategoryBadge.astro new file mode 100644 index 0000000..9afc10b --- /dev/null +++ b/src/components/CategoryBadge.astro @@ -0,0 +1,41 @@ +--- +export interface Props { + name?: string; + color?: string; + class?: string; +} + +const { name, color = '', class: className = '' } = Astro.props; + +function extractColorClass(colorString: string): string { + if (!colorString) return 'bg-blue'; + + if (colorString.includes('фон меню:')) { + const color = colorString.split(':')[1]?.trim(); + const valid = [ + 'black', 'yellow', 'blue', 'green', 'red', 'orange', 'gray', + 'indigo', 'purple', 'pink', 'teal', 'cyan', 'white', + 'gray-dark', 'light', 'dark' + ]; + if (color && valid.includes(color)) return `bg-${color}`; + } + + if (colorString.startsWith('bg-')) return colorString; + + const simple = colorString.toLowerCase(); + const valid = [ + 'black', 'yellow', 'blue', 'green', 'red', 'orange', 'gray', + 'indigo', 'purple', 'pink', 'teal', 'cyan', 'white', + 'gray-dark', 'light', 'dark' + ]; + return valid.includes(simple) ? `bg-${simple}` : 'bg-blue'; +} + +const bgClass = extractColorClass(color); +--- + +{name && ( +
+ {name} +
+)} diff --git a/src/components/ContentGrid.astro b/src/components/ContentGrid.astro index bc02cd4..6cded65 100644 --- a/src/components/ContentGrid.astro +++ b/src/components/ContentGrid.astro @@ -1,5 +1,6 @@ --- +import CategoryBadge from './CategoryBadge.astro'; // цветная плитка рубрик export interface Props { @@ -23,39 +24,6 @@ const { loadMoreConfig = { type: 'latest', first: 11 } } = Astro.props; -function extractColorClass(colorString: string): string { - if (!colorString) return 'bg-blue'; - - if (colorString.includes('фон меню:')) { - const parts = colorString.split(':'); - const color = parts[1]?.trim(); - - const validColors = [ - 'black', 'yellow', 'blue', 'green', 'red', 'orange', 'gray', - 'indigo', 'purple', 'pink', 'teal', 'cyan', 'white', - 'gray-dark', 'light', 'dark' - ]; - - if (color && validColors.includes(color)) { - return `bg-${color}`; - } - } - - if (colorString.startsWith('bg-')) { - return colorString; - } - - const simpleColor = colorString.toLowerCase(); - switch(simpleColor) { - case 'black': case 'yellow': case 'blue': case 'green': - case 'red': case 'orange': case 'gray': case 'indigo': - case 'purple': case 'pink': case 'teal': case 'cyan': - case 'white': case 'dark': case 'light': - return `bg-${simpleColor}`; - case 'gray-dark': return 'bg-gray-dark'; - default: return 'bg-blue'; - } -} function getCoauthorsNames(coauthors: any[]): string { if (!coauthors || coauthors.length === 0) return ''; @@ -89,8 +57,6 @@ function shouldBeLarge(index: number): boolean { const coauthors = item.coauthors || []; const coauthorsNames = getCoauthorsNames(coauthors); - const rawColor = item.categories?.nodes?.[0]?.color || ''; - const categoryBgClass = extractColorClass(rawColor); // ✅ ИСПРАВЛЕННАЯ логика const isLarge = shouldBeLarge(index); @@ -120,11 +86,10 @@ function shouldBeLarge(index: number): boolean {
)} - {item.categories?.nodes?.[0]?.name && ( -
- {item.categories.nodes[0].name} -
- )} +