# LightBox

Eine LightBox zeigt Bilder vergrößert und als Overlay mit abgedunkeltem Hintergrund an, um den Fokus auf den Inhalt zu legen.

## Overview

# Playground

Verwende `<LightBox />` um eine LightBox anzuzeigen und kombiniere
`<LightBoxTrigger />` und `<Button />` um die LightBox in der Oberfläche
aufrufbar zu machen.

```tsx
import {
  Button,
  Image,
  LightBox,
  LightBoxTrigger,
} from "@mittwald/flow-react-components";

<LightBoxTrigger>
  <Button>Open LightBox</Button>
  <LightBox>
    <Image src="https://flow.mittwald.de/assets/mittwald_logo_rgb.jpg" />
  </LightBox>
</LightBoxTrigger>
```

---

# Mit ActionGroup

In der LightBox kann eine
[ActionGroup](/04-components/actions/action-group/overview) verwendet werden,
diese richtet sich automatisch vertikal am Bild aus.

```tsx
import {
  ActionGroup,
  Button,
  IconDelete,
  IconDownload,
  Image,
  LightBox,
  LightBoxTrigger,
} from "@mittwald/flow-react-components";

<LightBoxTrigger>
  <Button>Open LightBox</Button>
  <LightBox>
    <Image src="https://flow.mittwald.de/assets/mittwald_logo_rgb.jpg" />
    <ActionGroup>
      <Button>
        <IconDownload />
      </Button>
      <Button>
        <IconDelete />
      </Button>
    </ActionGroup>
  </LightBox>
</LightBoxTrigger>
```

---

# Mit Image Trigger

Als Trigger kann auch das [Image](/04-components/content/image/overview) selbst
verwendet werden. Kombiniere dazu `<Button />` mit `<Image />`.

```tsx
import {
  Button,
  Image,
  LightBox,
  LightBoxTrigger,
} from "@mittwald/flow-react-components";

<LightBoxTrigger>
  <Button>
    <Image
      width={100}
      withBorder
      alt="mittwald"
      src="https://flow.mittwald.de/assets/mittwald_logo_rgb.jpg"
    />
  </Button>
  <LightBox>
    <Image
      alt="mittwald"
      src="https://flow.mittwald.de/assets/mittwald_logo_rgb.jpg"
    />
  </LightBox>
</LightBoxTrigger>
```

---

# FitScreen

Standardmäßig passt sich der Inhalt der LightBox an die Bildschirmgröße an. Wird
die Property `fitScreen` auf `false` gesetzt, wird der Inhalt in seiner vollen
Höhe dargestellt. Falls der verfügbare Platz nicht ausreicht, erscheint eine
vertikale Scrollbar. Dieses Verhalten ist besonders hilfreich bei der
Darstellung von Inhalten mit großer vertikaler Ausdehnung, wie z. B.
mehrseitigen PDFs.

```tsx
import {
  Button,
  Image,
  LightBox,
  LightBoxTrigger,
} from "@mittwald/flow-react-components";

<LightBoxTrigger>
  <Button>Open LightBox</Button>
  <LightBox fitScreen={false}>
    <Image src="https://flow.mittwald.de/assets/mittwald_logo_rgb.jpg" />
  </LightBox>
</LightBoxTrigger>
```

---

# Mit Galerie

Innerhalb der LightBox kann eine `LightBoxGallery` verwendet werden. Diese kann
mit `LightBoxGalleryItems` gefüllt werden, welche die Platzierung von
[Images](/04-components/content/image/overview) und
[ActionGroups](/04-components/actions/action-group/overview) unterstützen.

```tsx
import {
  Button,
  Flex,
  Image,
  LightBox,
  LightBoxTrigger,
  ActionGroup,
  LightBoxGallery,
  LightBoxGalleryItem,
  IconDownload,
} from "@mittwald/flow-react-components";

export default () => {
  const images = [
    "https://flow.mittwald.de/assets/mittwald_logo_rgb.jpg",
    "https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544",
  ];

  return (
    <Flex gap="m">
      {images.map((src, index) => (
        <LightBoxTrigger key={index}>
          <Button>
            <Image
              alt=""
              src={src}
              height="100px"
              withBorder
            />
          </Button>
          <LightBox>
            <LightBoxGallery defaultIndex={index}>
              {images.map((src) => (
                <LightBoxGalleryItem>
                  <Image src={src} />
                  <ActionGroup>
                    <Button aria-label="Herunterladen">
                      <IconDownload />
                    </Button>
                  </ActionGroup>
                </LightBoxGalleryItem>
              ))}
            </LightBoxGallery>
          </LightBox>
        </LightBoxTrigger>
      ))}
    </Flex>
  );
}
```