Skip to content

Gallery

Preview
Usage

default

Image 200px

Image 250px

Image 650px

Image 750px

columns

Image 200px — title 200
description 200

Image 250px — title 250
description 250

Image 650px — title 650
description 650

Image 750px — title 750
description 750

Image 850px — title 850
description 850

Image 950px — title 950
description 950

masonry

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio doloremque magnam sed aliquam assumenda! 200

Praesentium adipisci, illo, atque non optio sit necessitatibus placeat, sunt ut distinctio repellendus ullam repudiandae! Quaerat. 200

Image 250px — Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio doloremque magnam sed aliquam assumenda! 250
Praesentium adipisci, illo, atque non optio sit necessitatibus placeat, sunt ut distinctio repellendus ullam repudiandae! Quaerat. 250

Image 650px — Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio doloremque magnam sed aliquam assumenda! 650
Praesentium adipisci, illo, atque non optio sit necessitatibus placeat, sunt ut distinctio repellendus ullam repudiandae! Quaerat. 650

Image 750px — Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio doloremque magnam sed aliquam assumenda! 750
Praesentium adipisci, illo, atque non optio sit necessitatibus placeat, sunt ut distinctio repellendus ullam repudiandae! Quaerat. 750

Image 850px — Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio doloremque magnam sed aliquam assumenda! 850
Praesentium adipisci, illo, atque non optio sit necessitatibus placeat, sunt ut distinctio repellendus ullam repudiandae! Quaerat. 850

Image 950px — Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio doloremque magnam sed aliquam assumenda! 950
Praesentium adipisci, illo, atque non optio sit necessitatibus placeat, sunt ut distinctio repellendus ullam repudiandae! Quaerat. 950

Image 300px — Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio doloremque magnam sed aliquam assumenda! 300
Praesentium adipisci, illo, atque non optio sit necessitatibus placeat, sunt ut distinctio repellendus ullam repudiandae! Quaerat. 300

Image 350px — Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio doloremque magnam sed aliquam assumenda! 350
Praesentium adipisci, illo, atque non optio sit necessitatibus placeat, sunt ut distinctio repellendus ullam repudiandae! Quaerat. 350

Image 450px — Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio doloremque magnam sed aliquam assumenda! 450
Praesentium adipisci, illo, atque non optio sit necessitatibus placeat, sunt ut distinctio repellendus ullam repudiandae! Quaerat. 450

Image 550px — Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio doloremque magnam sed aliquam assumenda! 550
Praesentium adipisci, illo, atque non optio sit necessitatibus placeat, sunt ut distinctio repellendus ullam repudiandae! Quaerat. 550

import { Gallery } from "@dxdns-kit/react"
import type { VideoHTMLAttributes } from "react"
import { videoUtil } from "@dxdns-kit/core/utils"

export default function () {
  const sizes = [200, 250, 650, 750, 850, 950, 300, 350, 450, 550]

  const { isVideo } = videoUtil()

  return (
    <>
      <h1>default</h1>
      <Gallery>
        {sizes.slice(0, 4).map((size) => {
          const src = `https://dummyjson.com/image/${size}`
          return (
            <Gallery.Item
              key={size}
              lazy
              dataSrc={src}
              alt={`Image ${size}px`}
              width={size}
              height={size}
              href={src}
              target="_blank"
              style={{ cursor: "pointer" }}
            />
          )
        })}
      </Gallery>

      <br />
      <h1>columns</h1>
      <Gallery columns={1}>
        {sizes.slice(0, 6).map((size, i) => {
          const src = `https://dummyjson.com/image/${size}`
          return (
            <Gallery.Item
              key={`${size}-${i}`}
              lazy
              caption={{
                label: { text: `title ${size}` },
                description: { text: `description ${size}` }
              }}
              dataSrc={src}
              alt={`Image ${size}px`}
              width={size}
              height={size}
              href={src}
              target="_blank"
              style={{ cursor: "pointer" }}
            />
          )
        })}
      </Gallery>

      <br />
      <h1>masonry</h1>
      <Gallery variant="masonry" gap="1rem">
        {sizes.map((size, i) => {
          const src =
            i === 0
              ? "https://res.cloudinary.com/dkufrbqih/video/upload/v1754577218/4_-_J5bdBP9_tifpyb.mp4"
              : `https://dummyjson.com/image/${size}`
          return (
            <Gallery.Item
              key={`${size}-${i}`}
              lazy
              {...(isVideo(src)
                ? ({
                    autoPlay: true,
                    muted: true,
                    loop: true,
                    href: src,
                    target: "_blank"
                  } as VideoHTMLAttributes<HTMLVideoElement>)
                : {})}
              caption={{
                label: {
                  text: `Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio doloremque magnam sed aliquam assumenda! ${size}`,
                  lines: 1
                },
                description: {
                  text: `Praesentium adipisci, illo, atque non optio sit necessitatibus placeat, sunt ut distinctio repellendus ullam repudiandae! Quaerat. ${size}`,
                  lines: 1
                }
              }}
              dataSrc={src}
              alt={`Image ${size}px`}
              width={size}
              height={size}
              style={{ cursor: "pointer" }}
            />
          )
        })}
      </Gallery>
    </>
  )
}