profile-front/src/components/NewsSingle.astro

---
import { stripHtml } from '@/utils/htmlhelpers';
import Author from '@components/AuthorDisplay.astro';
import Subscribe from '@components/SubscribePost.astro';
import ShareButtons from '@components/ShareButtons.astro';


interface Props {
  post: any;
  pageInfo?: any;
}

const { post, pageInfo } = Astro.props;
---

{post ? (
  <div class="article-wrapper">
    <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>

      <h1>{post.title}</h1>
      {post.secondaryTitle && <h2 class="secondary-title">{post.secondaryTitle}</h2>}
      
      {post.featuredImage?.node?.sourceUrl && (
        <figure class="featured-image">
          <img
            src={post.featuredImage.node.sourceUrl}
            alt={post.featuredImage.node.altText || post.title}
            width={post.featuredImage.node.mediaDetails?.width || 1200}
            height={post.featuredImage.node.mediaDetails?.height || 675}
            loading="eager"
            class="post-image"
          />
          {(post.featuredImage.node.description || post.featuredImage.node.caption) && (
            <figcaption class="image-caption">
              {post.featuredImage.node.description && (
                <p>{stripHtml(post.featuredImage.node.description)}</p>
              )}
              {post.featuredImage.node.caption && (
                <span>©{stripHtml(post.featuredImage.node.caption)}</span>
              )}
            </figcaption>
          )}
        </figure>
      )}

      
      {post.content && <div set:html={post.content} />}

       <Subscribe />
    </article>

    <ShareButtons url={post.uri} title={post.title} />
  </div>
) : (
  <div>Новость не найдена</div>
)}

{/* Блок с тегами */}
      {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%;
  padding-bottom: 2rem;
}

.news-single h1{
  font-size: 2.375rem;
  line-height: 1.2;
  margin: 0 0 0.625rem;
}

.news-single h2{
  font-size: 1.5rem;
  line-height: 1.1;
  margin: 2.0625rem 0 .375rem;
}  

.news-single :global(p a) {
  color: #0d6efd;
}

.article_info {
  display: flex;
  align-items: center;
  gap: .475rem;
  margin-top: 1.9375rem;
  margin-bottom: .9375rem;
  font-size: 0.875rem;
  color: #666;
}

.divider {
  display: block;
  width: 1px;
  height: 12px;
  background-color: #999;
  flex-shrink: 0;
}

.publication__author :global(a){
  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;
  width: 100%;
}

.post-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

.image-caption {
  font-size: 0.875rem;
  color: #666;
  margin-top: 0.5rem;
  text-align: left;
}

.image-caption p {
  margin: 0 0 0.25rem 0;
}

.image-caption span {
  font-style: italic;
  white-space: nowrap;
}
</style>