---
// 名片区（首页/关于共用）：渐变头像占位 + 称呼；图标行等内容由使用页经 slot 注入
import Avatar from './Avatar.astro';
---

<div class="idcard">
  <Avatar />
  <div class="idcard-main">
    <p class="idcard-name">wait4x</p>
    <!-- 身份陈述：用户后续撰写（一句话自我介绍，落在称呼下方） -->
    <slot />
  </div>
</div>

<style>
  .idcard {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-block: var(--space-5);
  }
  .idcard-name {
    font-size: 21px;
    font-weight: 700;
    color: var(--ink-1);
  }
</style>