User Avatar Assets

Component

---
import { Picture } from "astro:assets";

// Получаем из props массив изображений и количество для отображения
const { images, count } = Astro.props;

// Проверяем наличие изображений в массиве, если передан undefined или null, используем пустой массив по умолчанию
const imageList = Array.isArray(images) ? images : [];
---

<div class="avatars flex gap-4">
  {
    imageList
      .slice(0, count)
      .map((src, index) => (
        <Picture
          src={src}
          alt={`User Avatar ${index + 1}`}
          width={1920}
          height={1920}
          formats={["avif", "webp", "jpg"]}
          fallbackFormat="jpg"
          loading="eager"
          class="w-full rounded-2xl"
        />
      ))
  }
</div>

---
import { Picture } from 'astro:assets'

// Импортируйте изображения здесь, чтобы использовать их как дефолтные
import figma from '../../assets/img/logo/figma.png'
import react from '../../assets/img/logo/react.png'
import astro from '../../assets/img/logo/astro.png'
import preact from '../../assets/img/logo/preact.png'
import avatar5 from '../../assets/img/team/user5.jpeg'
import avatar6 from '../../assets/img/team/user6.jpeg'

// Определяем все доступные изображения
const allImages = [figma, react, astro, preact, avatar5, avatar6]

// Получаем массив индексов из пропсов
const { autors = [] }: { autors?: number[] } = Astro.props

// Извлекаем нужные аватарки по индексам (корректируем на 1 вниз)
const imageList = autors
  .map((index: number) => allImages[index - 1]) // Индексация от 1, поэтому вычитаем 1.
  .filter(Boolean)
---

<div class="grid gap-4 md:gap-8 lg:grid-cols-2 lg:gap-12">
  <div>
    <slot name="title">Default Title</slot>

    <div class="flex gap-3">
      {
        imageList.map((image, index) => (
          <Picture
            src={image}
            alt={`User Avatar ${index + 1}`}
            width={256}
            height={256}
            formats={['avif', 'webp', 'jpg']}
            fallbackFormat="jpg"
            loading="eager"
            class="h-12 w-12 rounded-xl"
          />
        ))
      }
    </div>
  </div>

  <div class="space-y-6">
    <div>
      <slot name="description">Default Description</slot>
    </div>

    <div class="grid gap-4 sm:grid-cols-3">
      <div>
        <span class="text-sm">Клиент</span>
        <p class="font-semibold"><slot name="client">Default Client</slot></p>
      </div>

      <div>
        <span class="text-sm">Промышленность</span>
        <p class="font-semibold">
          <slot name="industry">Default Industry</slot>
        </p>
      </div>

      <div>
        <span class="text-sm">Время</span>
        <p class="font-semibold">
          <slot name="duration">Default Duration</slot>
        </p>
      </div>
    </div>
  </div>
</div>

MDX Post

---
title: "Title"
description: "Description"
---

import Intro from '../../components/content/Intro.astro'

<Intro autors={[1, 3, 4]}>
  <h2
    slot="title"
    class="mb-4 text-3xl font-semibold">
    SSP Health: Ведущая группа врачей общей практики на северо-западе
  </h2>
  <p slot="description">
    Компания SSP Health обратилась к нам с просьбой изменить фирменный стиль
    и создать индивидуального веб-сайта, чтобы объединить все свои врачебные
    практики. Наша цель заключалась в том, чтобы выйти за рамки стереотипной
    клинической эстетики, укрепив статус SSP как надежного как надежного
    поставщика медицинских услуг в регионе.
  </p>
  <span slot="client">SSP Health</span>
  <span slot="industry">Здравоохранение</span>
  <span slot="duration">12 недель</span>
</Intro>