blog-frontend-v2/src/components/MainpageComments.astro

---
// 不想写得屎长屎长，所以就用单独的文件写了

import { Image } from 'astro:assets'
import IceAvatar from '../assets/mainpage_avatars/ice.png'
import MnkAvatar from '../assets/mainpage_avatars/mnk.jpg'
---

<div class="comments">
  {
    [
      [
        IceAvatar,
        '超几何冰精',
        '⑨',
        <>
          <p>
            <s>@☀️ 可以当靶场玩吗</s>
          </p>
          <p>我喜欢passthem</p>
        </>,
      ],
      [
        'https://legacy.passthem.top/assets/pigeon-16qh82EW.jpg',
        'pigeon某人',
        '可爱的鸽子，Bilibili 著名 YTPMVer',
        <>
          <Image
            src="https://legacy.passthem.top/assets/idk-DjwAIbw0.jpg"
            width={100}
            height={95}
            alt="用户「pigeon某人」的个人形象的表情包"
          />
          <p>这个可以贴吗</p>
        </>,
      ],
      [
        'https://legacy.passthem.top/assets/kio-DikBD7t4.jpg',
        'asynkio',
        '西多kitaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
        <p>asynkio 祝 jazzwhom.top 開張大吉！</p>,
      ],
      [
        'https://legacy.passthem.top/assets/leukos-Ci6_szKv.jpg',
        'leukos',
        '冰镇西米露，在幻想乡被称作露米娅',
        <p>帕，移动</p>,
      ],
      [
        MnkAvatar,
        'モノクロ子',
        '全て変えるのなら黒にする。',
        <>
          <>
            <p>pt的音mad做的特别厉害！当时给我看哭了……</p>
            <p>谢谢你，pt。我希望有一天我也能做出那样的音mad。</p>
          </>
        </>,
      ],
      [
        'https://legacy.passthem.top/assets/graffiti-DHeEktlb.webp',
        'Graffiti_',
        '泡壳老师，虽然是僵尸，却比人类都要暖',
        <p>人与人之间是情感连接着的</p>,
      ],
      [
        'https://legacy.passthem.top/assets/miskplar-CJpcFQZ_.webp',
        'miskplar',
        '校友',
        <p>后悔的时候，不要后悔</p>,
      ],
      [
        'https://legacy.passthem.top/assets/sge-Da3d1ENG.webp',
        '一根烤肠肠',
        '小孩小孩你别馋，过了腊八就是年',
        <p>产出作品是你持续站在舞台上的唯一方式</p>,
      ],
      [
        'https://legacy.passthem.top/assets/aishi-OOmvQDjV.jpg',
        '蔼石',
        '校友，东方社团「有顶天变电站」运营中',
        <Image
          src="https://legacy.passthem.top/assets/mgmg-qXzHVGjP.jpg"
          width={140}
          height={140}
          alt="表情包，东方project角色露娜萨·普莉兹姆利巴吃年糕"
        />,
      ],
    ].map((elements) => (
      <div class="comment">
        <div class="comment-head">
          <Image
            class="avatar"
            src={elements[0] as string}
            width={48}
            height={48}
            densities={[1.5, 2]}
            alt={`${elements[1]} 的头像`}
          />
          <div class="userinfo">
            <div class="username">{elements[1]}</div>
            <div class="comment">{elements[2]}</div>
          </div>
        </div>
        <div class="comment-content">{elements[3]}</div>
      </div>
    ))
  }
</div>

<style>
  .comments {
    overflow-y: scroll;
    padding-inline: 3rem;
    margin-inline: 1rem;
    height: 100%;
    padding-block: 2rem;

    @media (max-width: 767px) {
      padding-inline: 1rem;
    }

    & > .comment {
      padding-block-start: 1.5rem;
      padding-block-end: 1.5rem;

      &:not(:last-child) {
        border-bottom: solid 2px rgb(from var(--color-fg-0) r g b / 0.05);
      }

      & > .comment-head {
        display: flex;
        align-items: center;
        padding-inline: 1.25rem;
        padding-block-end: 1.5rem;
        gap: 1rem;

        & > .avatar {
          flex: none;
          width: 3rem;
          height: 3rem;
          border-radius: 9999px;
          object-fit: cover;
        }

        & > .userinfo {
          min-width: 0;
          flex-shrink: 1;

          & > .username {
            overflow-x: hidden;
            font-weight: 700;
          }

          & > .comment {
            overflow-x: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            opacity: 0.5;
          }
        }
      }

      & > .comment-content {
        padding-inline: 1.5rem;

        p {
          margin: 0.5rem 0;
        }

        s {
          opacity: 0.5;
        }
      }
    }
  }
</style>