Github Repo Card

---
/**
 * GithubRepoCard — Dark glass card highlighting repository statistics, language dot, license, and stars.
 * 
 * @param {string} repoName - Repository name (e.g. 'astro-components').
 * @param {string} owner - Repo owner or organization (e.g. 'konstantinWDK').
 * @param {string} description - Brief summary of the repo.
 * @param {string} language - Primary programming language. Default is 'TypeScript'.
 * @param {string} languageColor - Hex color for the language dot. Default is '#3178c6'.
 * @param {number} stars - Star count figure. Default is 248.
 * @param {number} forks - Fork count figure. Default is 32.
 * @param {string} href - Link to the GitHub repository.
 */
interface Props {
  repoName: string;
  owner?: string;
  description?: string;
  language?: string;
  languageColor?: string;
  stars?: number;
  forks?: number;
  href?: string;
}

const {
  repoName,
  owner = 'konstantinWDK',
  description = 'Premium open-source UI component library for Astro with glassmorphism and accessibility.',
  language = 'TypeScript',
  languageColor = '#3178c6',
  stars = 248,
  forks = 32,
  href = '#',
} = Astro.props;
---

<a href={href} target="_blank" rel="noopener noreferrer" class="gh-repo-card">
  <div class="gh-repo-card__head">
    <svg class="gh-repo-card__icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1-2.5-2.5Z"/>
      <path d="M6 6h10"/>
      <path d="M6 10h10"/>
    </svg>
    <div class="gh-repo-card__title-wrap">
      <span class="owner">{owner}/</span>
      <h4 class="name">{repoName}</h4>
    </div>
    <span class="gh-repo-card__badge">Public</span>
  </div>

  <p class="gh-repo-card__desc">{description}</p>

  <div class="gh-repo-card__meta">
    <div class="gh-repo-card__lang">
      <span class="lang-dot" style={`background-color: ${languageColor};`}></span>
      <span>{language}</span>
    </div>

    <div class="gh-repo-card__stat">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
        <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
      </svg>
      <span>{stars.toLocaleString()}</span>
    </div>

    <div class="gh-repo-card__stat">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <line x1="6" y1="3" x2="6" y2="15"/>
        <circle cx="18" cy="6" r="3"/>
        <circle cx="6" cy="18" r="3"/>
        <path d="M18 9a9 9 0 0 1-9 9"/>
      </svg>
      <span>{forks.toLocaleString()}</span>
    </div>
  </div>
</a>

<style>
  .gh-repo-card {
    display: flex;
    flex-direction: column;
    padding: var(--sp-6, 1.5rem);
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-xl, 20px);
    text-decoration: none;
    width: 100%;
    max-width: 360px;
    font-family: var(--font-sans, system-ui, sans-serif);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }

  .gh-repo-card:hover {
    transform: translateY(-3px);
    border-color: rgba(184, 134, 11, 0.4);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  }

  .gh-repo-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }

  .gh-repo-card__icon {
    color: var(--c-primary-light, #d4a017);
    flex-shrink: 0;
  }

  .gh-repo-card__title-wrap {
    display: flex;
    align-items: baseline;
    gap: 2px;
    overflow: hidden;
  }

  .gh-repo-card__title-wrap .owner {
    font-size: 0.82rem;
    color: var(--c-text-3, #737373);
  }

  .gh-repo-card__title-wrap .name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--c-primary-light, #d4a017);
    margin: 0;
  }

  .gh-repo-card__badge {
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--c-text-2, #a3a3a3);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: var(--r-full, 9999px);
  }

  .gh-repo-card__desc {
    font-size: 0.82rem;
    color: var(--c-text-2, #a3a3a3);
    margin: 0 0 16px 0;
    line-height: 1.5;
    flex: 1;
  }

  .gh-repo-card__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 0.78rem;
    color: var(--c-text-3, #737373);
  }

  .gh-repo-card__lang {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .lang-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }

  .gh-repo-card__stat {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--c-text-2, #a3a3a3);
  }
</style>