Image

"use client";

import { Image, Box } from "astralis-ui";

export function ImageDemo() {
  return (
    <Box w="full" maxW="xs">
      <Image
        src="/placeholder.svg"
        alt="A starfield gradient"
        aspectRatio="video"
        rounded="xl"
        caption="Captions wrap the image in a semantic figure."
      />
    </Box>
  );
}

"use client";

import { Image, Text, VStack, Box } from "astralis-ui";

export function ImagePreview() {
  return (
    <VStack gap="2">
      <Box w="56">
        {/* Click to open the built-in lightbox (zoom, rotate, Esc to close). */}
        <Image src="/placeholder.svg" alt="Preview me" aspectRatio="video" rounded="lg" preview />
      </Box>
      <Text size="xs" color="muted">Click the image to preview</Text>
    </VStack>
  );
}

"use client";

import { Image, HStack } from "astralis-ui";

export function ImageFallback() {
  return (
    <HStack gap="4" wrap="wrap" justifyContent="center">
      {/* A broken src falls back to the default icon… */}
      <Image src="/does-not-exist.png" alt="Broken" width={140} height={90} rounded="lg" />
      {/* …or to whatever you pass as fallback. */}
      <Image
        src="/also-missing.png"
        alt="Broken with custom fallback"
        width={140}
        height={90}
        rounded="lg"
        fallback={<span>No image 😢</span>}
      />
    </HStack>
  );
}