add news post

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 {
                 <div class="post-image-placeholder"></div>
               )}
               
-              {item.categories?.nodes?.[0]?.name && (
-                <div class={`post-category-badge ${categoryBgClass}`}>
-                  {item.categories.nodes[0].name}
-                </div>
-              )}
+              <CategoryBadge
+                name={item.categories?.nodes?.[0]?.name}
+                color={item.categories?.nodes?.[0]?.color}
+              />
               
               <div class="post-content-overlay">
                 <div class="post-meta-overlay">