lume/src/_components/XeblogHero.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

export interface XeblogHeroProps {
  ai: string;
  file: string;
  prompt: string;
}

export default function XeblogHero({ ai, file, prompt }: XeblogHeroProps) {
  return (
    <>
      <figure className="hero not-prose w-full mx-auto">
        <picture>
          <source
            type="image/avif"
            srcset={`https://cdn.xeiaso.net/file/christine-static/hero/${file}.avif`}
          />
          <source
            type="image/webp"
            srcset={`https://cdn.xeiaso.net/file/christine-static/hero/${file}.webp`}
          />
          <img
            alt={`An image of ${prompt}`}
            className="hero-image"
            loading="lazy"
            src={`https://cdn.xeiaso.net/file/christine-static/hero/${file}.jpg`}
          />
        </picture>
        {ai !== undefined ? (
          <></>
        ) : (
          <figcaption className="mx-2 my-1 text-center text-gray-600 dark:text-gray-400">
            {prompt}
          </figcaption>
        )}
      </figure>
    </>
  );
}