add tags logic

src/components/Header/Header.astro

@@ -15,8 +15,8 @@
 <div class="top-bar">
     <img alt="Профиль" width="249" height="55" src="https://cdn.profile.ru/wp-content/themes/profile/assets/img/profile-logo-delovoy.svg">
     {category && (
-        <div class="parttile-block">
-          {category.name}
+        <div class="header__subtitle">
+          <a href={`/${category.slug}`}>{category.name}</a>
         </div>
       )}    
     <Stores />
@@ -32,6 +32,25 @@
     .top-bar{
         display: flex;
         justify-content: space-between;
+        align-items: center; 
     }
 
+    .header__subtitle{
+        font-size: 22px;
+        font-weight: bold;
+        margin-left: 42px;
+        position: relative;
+    }
+
+    .header__subtitle::before{
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: -15px;
+        width: 3px;
+        height: 80%;
+        border-left: 3px solid;
+        transform: translate(0, -40%);
+    }    
+
 </style>

src/components/NewsSingle.astro

@@ -18,19 +18,18 @@ const { post, pageInfo } = Astro.props;
     <article class="news-single">
 
       <div class="article_info">
-  <div class="publication__data">
-    {post.date && (
-      <time datetime={new Date(post.date).toISOString()}>
-        {new Date(post.date).toLocaleDateString('ru-RU')}
-      </time>
-    )}
-  </div>
-  <span class="divider" aria-hidden="true"></span>
-  <div class="publication__author">
-    <Author post={post} separator=", " />
-  </div>
-</div>
-
+        <div class="publication__data">
+          {post.date && (
+            <time datetime={new Date(post.date).toISOString()}>
+              {new Date(post.date).toLocaleDateString('ru-RU')}
+            </time>
+          )}
+        </div>
+        <span class="divider" aria-hidden="true"></span>
+        <div class="publication__author">
+          <Author post={post} separator=", " />
+        </div>
+      </div>
 
       <h1>{post.title}</h1>
       {post.secondaryTitle && <h2 class="secondary-title">{post.secondaryTitle}</h2>}
@@ -57,6 +56,7 @@ const { post, pageInfo } = Astro.props;
           )}
         </figure>
       )}
+
       
       {post.content && <div set:html={post.content} />}
 
@@ -64,15 +64,30 @@ const { post, pageInfo } = Astro.props;
     </article>
 
     <ShareButtons url={post.uri} title={post.title} />
-
-   
   </div>
 ) : (
   <div>Новость не найдена</div>
 )}
 
-<style>
+{/* Блок с тегами */}
+      {post.tags?.nodes && post.tags.nodes.length > 0 && (
+        <div class="tags-block">
+          <span class="tags-label">Теги:</span>
+          <div class="tags-list">
+            {post.tags.nodes.map((tag) => (
+              <a 
+                href={`/tag/${encodeURIComponent(tag.name.replace(/\s+/g, '+'))}/`}
+                class="tag-link"
+                key={tag.id}
+              >
+                {tag.name}
+              </a>
+            ))}
+          </div>
+        </div>
+      )}
 
+<style>
 .article-wrapper {
   position: relative;
   max-width: 75%;
@@ -95,11 +110,10 @@ const { post, pageInfo } = Astro.props;
   color: #0d6efd;
 }
 
-
 .article_info {
   display: flex;
   align-items: center;
-  gap: .475rem; /* одинаковое расстояние с обеих сторон от черты */
+  gap: .475rem;
   margin-top: 1.9375rem;
   margin-bottom: .9375rem;
   font-size: 0.875rem;
@@ -118,8 +132,45 @@ const { post, pageInfo } = Astro.props;
   text-decoration: underline;
 }
 
+/* Стили для блока тегов */
+.tags-block {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin: 1.5rem 0;
+  flex-wrap: wrap;
+}
 
+.tags-label {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #333;
+}
 
+.tags-list {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.tag-link {
+  display: inline-block;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: #666;
+  background-color: #f5f5f5;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  text-decoration: none;
+  transition: all 0.2s ease;
+}
+
+.tag-link:hover {
+  color: #fff;
+  background-color: #0d6efd;
+  border-color: #0d6efd;
+}
 
 .featured-image {
   margin: 1.5rem 0;
@@ -149,4 +200,4 @@ const { post, pageInfo } = Astro.props;
   font-style: italic;
   white-space: nowrap;
 }
-</style>
+</style>