add color category

src/components/ContentGrid.astro

@@ -8,8 +8,48 @@ const {
   items = [],
   showCount =  false,
 } = Astro.props;
+
+// Функция для извлечения класса цвета из строки
+function extractColorClass(colorString: string): string {
+  if (!colorString) return 'bg-blue';
+  
+  // Если строка содержит "фон меню:" - извлекаем часть после двоеточия
+  if (colorString.includes('фон меню:')) {
+    const parts = colorString.split(':');
+    const color = parts[1]?.trim();
+    
+    // Проверяем существование CSS класса
+    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}`;
+    }
+  }
+  
+  // Если строка уже содержит "bg-"
+  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';
+  }
+}
 ---
 
+
 <section class="posts-section" id="posts-section">
   <h2>
     {showCount && items.length > 0 && (
@@ -21,6 +61,10 @@ const {
     {items.map((item, index) => {
       const postUrl = item.uri || `/blog/${item.databaseId}`;
       const postDate = new Date(item.date);
+
+      // Получаем цвет категории и преобразуем в CSS класс
+      const rawColor = item.categories?.nodes?.[0]?.color || '';
+      const categoryBgClass = extractColorClass(rawColor);
       
       // Логика для больших плиток на десктопе
       let isLarge = false;
@@ -62,9 +106,9 @@ const {
                 <div class="post-image-placeholder"></div>
               )}
               
-              {/* Рубрика в верхнем правом углу */}
+              {/* Рубрика в верхнем правом углу с цветом */}
               {item.categories?.nodes?.[0]?.name && (
-                <div class="post-category-badge">
+                <div class={`post-category-badge ${categoryBgClass}`}>
                   {item.categories.nodes[0].name}
                 </div>
               )}