# 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>
  );
}
```


## Develop

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `controller` | `OverlayController` | - | An overlay controller to control the light box state. |
| `fitScreen` | `boolean` | `true` | Whether content can be displayed larger than the available space in the screen. |
| `children` | `ReactNode` | - | - |
| `wrapWith` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | - | - |
| `ref` | `Ref<HTMLSpanElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see [React Docs](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) |
| `key` | `Key` | - | - |
| `className` | `string` | - | The elements class name. |


## Guidelines

# Grundlagen

## Best practices

Achte bei der Verwendung einer LightBox darauf, dass ...

- [Icons](/04-components/content/icon/overview) für die Aktionen (z. B. Löschen
  oder Herunterladen) klar und eindeutig gekennzeichnet sind, um
  Missverständnisse zu vermeiden.
- für Bilder sinnvolle Alt-Texte gepflegt werden, um Screenreader-Unterstützung
  sicherzustellen.

## Verwendung

Verwende eine LightBox, um ...

- Inhalte wie Bilder vergrößert und aufmerksamkeitsstark darzustellen.
- Usern eine Möglichkeit zu bieten, Inhalte zu betrachten, ohne die aktuelle
  Seite zu verlassen.