index.astro

---
import {
  ApertureIcon,
  CameraIcon,
  CrosshairIcon,
  MaximizeIcon,
  SunIcon,
  WatchIcon
} from '@lucide/astro'
import type { ImageMetadataFormatted } from '../../types'
import ExifData from './ExifData.astro'
import ExifMap from './ExifMap.tsx'
import styles from './index.module.css'

type Props = {
  imageMetadata: ImageMetadataFormatted
}

const { exif, gps } = Astro.props.imageMetadata
const { model, focalLength, fstop, shutterspeed, exposure, iso } = exif
---

<aside class={styles.exif}>
  <div class={styles.data}>
    {model && <ExifData title="Camera model" value={model} icon={CameraIcon} />}
    {
      focalLength && (
        <ExifData
          title="Focal length"
          value={focalLength}
          icon={CrosshairIcon}
        />
      )
    }
    {fstop && <ExifData title="Aperture" value={fstop} icon={ApertureIcon} />}
    {
      shutterspeed && (
        <ExifData title="Shutter speed" value={shutterspeed} icon={WatchIcon} />
      )
    }
    {exposure && <ExifData title="Exposure" value={exposure} icon={SunIcon} />}
    {iso && <ExifData title="ISO" value={iso} icon={MaximizeIcon} />}
  </div>
  {
    gps?.latitude && (
      <div class:list={[styles.map, "breakout"]}>
        <ExifMap gps={gps} client:only="react" />
      </div>
    )
  }
</aside>