log101-dot-dev/src/components/Post.astro

---
import type { CollectionEntry } from "astro:content";

interface Props {
  post: CollectionEntry<"blog">;
  componentType: "short" | "long" | "full";
}

const { post, componentType } = Astro.props;

let showTags, shortSummary, longSummary, fullText;

switch (componentType) {
  case "full":
    fullText = true;
    break;
  case "long":
    longSummary = true;
    showTags = true;
    break;
  case "short":
    shortSummary = true;
    break;
  default:
    break;
}
---

<style>
  p {
    margin: 0;
    padding: 0;
  }
  .post {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .post-category {
    color: #2f4f4f;
    letter-spacing: 0.03em;
  }

  .post-title {
    font-size: var(--h4-desktop);
    font-weight: normal;
    margin: 0;
    padding: 0;
  }

  .post-date {
    color: gray;
    font-size: var(--small-desktop);
  }

  .tags-and-date {
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .post-tags {
    display: flex;
    flex-direction: row;
    gap: 4px;
    margin: 0;
    padding: 0;
  }
  .post-tags li {
    list-style-type: none;
    color: #6d6d6d;
    font-size: var(--small-desktop);
  }
</style>

<div class="post">
  <p class="post-category">{post.data.subcategory}</p>
  <h4 class="post-title">{post.data.title}</h4>
  {shortSummary && <p class="post-summary">{post.data.summary}</p>}
  <div class="tags-and-date">
    {
      showTags && (
        <ul class="post-tags">
          {post.data.tags.map((tag) => (
            <li>{tag}</li>
          ))}
        </ul>
      )
    }

    <p class="post-date">
      {
        post.data.date.toLocaleDateString("tr-TR", {
          day: "numeric",
          month: "long",
          year: "numeric",
        })
      }
    </p>
  </div>

  {longSummary && <p class="post-long-summary">{post.body.slice(0, 500)}</p>}
  {fullText && <p class="post-text">{post.body}</p>}
</div>