---
// Import the global.css file here so that it is included on
// all pages through the use of the <BaseHead /> component.
import type { Member } from "../store/member"
import "../styles/global.css"
const { member } = Astro.props as { member: Member }
const avatar = member.avatar;
---

  <a
    href={member.link}
    target="_blank"
    rel="noopener noreferrer"
    class="no-link-color"
  >
    <div class="flex flex-col gap-2 w-full">
      <div class="w-full rounded-lg overflow-hidden">
        <div
          class="w-full aspect-square overflow-hidden flex items-center justify-center bg-gradient-to-b from-gray-300/70"
        >
          {
          avatar
            ? (
                typeof avatar !== "string"
                  ? (
                    <img
                      class="object-cover h-full navigate"
                      src={(await avatar)?.default?.src}
                      alt=""
                    />
                    )
                  : (
                    <img
                      class="object-cover h-full navigate"
                      src={avatar + "?x-oss-process=image/resize,h_512,m_lfit"}
                      alt=""
                    />
                    )
              )
            : (
              <img
                class="object-cover h-3/4 navigate"
                src="https://oss.nbtca.space/CA-logo.svg"
                alt=""
              />
              )
        }
        </div>
      </div>
      <div class="h-16">
        <div class="text-lg">{member.alias}</div>
        <div class="text-sm mt-0.5">{member.profile}</div>
      </div>
    </div>
  </a>
    <style>
  /* 初始状态 */
  .navigate {
    /* cursor: pointer; */
    transition: transform 0.2s;
  }

  /* 鼠标移入状态 */
  .navigate:hover {
    text-decoration: underline;
    transform: scale(1.1);
  }

  /* 鼠标移出状态 */
  .navigate:active {
    animation: ease-in-out 1s exit forwards;
  }

  /* 定义 exit 动画 */
  @keyframes exit {
    0% {
      transform: scale(1.05);
    }
    100% {
      transform: scale(1);
    }
  }

  /* 无链接颜色样式 */
  .no-link-color {
    color: inherit;
    text-decoration: none;
  }
    </style>