26:I[422844,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"ThemeToggle"] 27:I[276592,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"AccountMenu"] 28:I[32297,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"MobileNav"] 29:I[505014,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"default"] 2a:I[729657,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"FavoriteButton"] 2b:I[534073,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"InstallCommand"] 2c:I[868814,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"BlockPreview"] 35:I[713354,["/_next/static/chunks/2sh36-vfcsvmu.js","/_next/static/chunks/2cm40zctwvgra.js","/_next/static/chunks/3xyjks4zm1kgq.js","/_next/static/chunks/21av_b8oy010d.js","/_next/static/chunks/42wa58-b7gqt5.js","/_next/static/chunks/22u5ol3xt7zuq.js","/_next/static/chunks/3onfwfd1hea_z.js","/_next/static/chunks/2wyk65orzmrje.js","/_next/static/chunks/01wo8_s0r84t8.js","/_next/static/chunks/2u06s81i88dft.js","/_next/static/chunks/204mnm936joms.js","/_next/static/chunks/1fo13zgcoxhue.js","/_next/static/chunks/13bix5fh-g1uu.js","/_next/static/chunks/2d5j-ur4v-txa.js","/_next/static/chunks/34fz27ztbhz99.js","/_next/static/chunks/389jiafoijc2t.js","/_next/static/chunks/3i5g71-q5-g8m.js","/_next/static/chunks/3iwmua3cnmn8f.js","/_next/static/chunks/0go_emxehaf55.js","/_next/static/chunks/3zqjjtudio2vd.js","/_next/static/chunks/250n3vmqnkfi0.js","/_next/static/chunks/0kf9_gzg497uv.js"],"Toaster"] 1b:["$","$L1a","/themes",{"href":"/themes","children":"Themes","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 1c:["$","$L1a","/styles",{"href":"/styles","children":"Styles","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 1d:["$","$L1a","/components",{"href":"/components","children":"Components","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 1e:["$","$L1a","/docs",{"href":"/docs","children":"Docs","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 1f:["$","$L1a","/changelog",{"href":"/changelog","children":"Changelog","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 20:["$","$L1a","/#pricing",{"href":"/#pricing","children":"Pricing","data-slot":"button","data-variant":"ghost","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5","ref":null}] 21:["$","div",null,{"className":"ml-auto flex items-center gap-1","children":[["$","$L26",null,{}],["$","$L27",null,{}],["$","$L1a",null,{"href":"/blocks","children":"Browse blocks","data-slot":"button","data-variant":"default","data-size":"sm","className":"group/button inline-flex shrink-0 items-center justify-center border border-transparent bg-clip-padding font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/80 h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5 max-sm:hidden","ref":null}],["$","$L28",null,{"title":"lib","links":[{"href":"/blocks","label":"Blocks"},{"href":"/examples","label":"Examples"},{"href":"/builder","label":"Builder"},{"href":"/themes","label":"Themes"},{"href":"/styles","label":"Styles"},{"href":"/components","label":"Components"},{"href":"/docs","label":"Docs"},{"href":"/changelog","label":"Changelog"},{"href":"/#pricing","label":"Pricing"}],"primary":{"label":"Browse blocks","href":"/blocks"},"secondary":{"label":"Open the builder","href":"/builder"},"className":"md:inline-flex lg:hidden"}]]}] 22:["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"[{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blocks\",\"item\":\"https://shadcn.srv1505958.hstgr.cloud/blocks\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Gallery\",\"item\":\"https://shadcn.srv1505958.hstgr.cloud/blocks/gallery\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Gallery 01: Lightbox grid\",\"item\":\"https://shadcn.srv1505958.hstgr.cloud/blocks/gallery/gallery-01\"}]},{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareSourceCode\",\"name\":\"Gallery 01: Lightbox grid\",\"description\":\"A photo grid that opens a lightbox with captions and arrow-key navigation.\",\"url\":\"https://shadcn.srv1505958.hstgr.cloud/blocks/gallery/gallery-01\",\"programmingLanguage\":\"TypeScript\",\"runtimePlatform\":\"React\",\"version\":\"1.0.0\",\"isAccessibleForFree\":true,\"publisher\":{\"@type\":\"Organization\",\"name\":\"lib\"}}]"}}] 2d:T54a,

import { Gallery01 } from "@/components/gallery-01"

export default function Page() {
  return <Gallery01 />
}

2e:T131c,// @lib/gallery-01@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog "use client" import * as React from "react" import { ChevronLeft, ChevronRight } from "lucide-react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog" // Demo photos from Unsplash (free to use under the Unsplash license). Replace with your own. const photo = (id: string, width: number) => `https://images.unsplash.com/photo-${id}?w=${width}&q=80&auto=format&fit=crop` const photos = [ { id: "1506905925346-21bda4d32df4", title: "Alps at dawn", place: "Chamonix, France" }, { id: "1501785888041-af3ef285b470", title: "Still water", place: "Lake Bled, Slovenia" }, { id: "1470071459604-3b5ec3a7fe05", title: "Morning fog", place: "Tuscany, Italy" }, { id: "1441974231531-c6227db76b6e", title: "Forest path", place: "Black Forest, Germany" }, { id: "1507525428034-b723cf961d3e", title: "Low tide", place: "Algarve, Portugal" }, { id: "1519681393784-d120267933ba", title: "Night sky", place: "Dolomites, Italy" }, { id: "1469474968028-56623f02e42e", title: "Last light", place: "Faroe Islands" }, { id: "1500530855697-b586d89ba3ee", title: "High road", place: "Ladakh, India" }, ] export function Gallery01() { const [open, setOpen] = React.useState(null) const current = open === null ? null : photos[open] const go = (step: number) => setOpen((index) => (index === null ? null : (index + step + photos.length) % photos.length)) return (

Field notes

Eight places from this year. Click a photo to see it large.

) } 2f:T990a,

// @lib/gallery-01@1.0.0 · changes: https://shadcn.srv1505958.hstgr.cloud/changelog
"use client"

import * as React from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"

import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog"

// Demo photos from Unsplash (free to use under the Unsplash license). Replace with your own.
const photo = (id: string, width: number) => `https://images.unsplash.com/photo-${id}?w=${width}&q=80&auto=format&fit=crop`

const photos = [
  { id: "1506905925346-21bda4d32df4", title: "Alps at dawn", place: "Chamonix, France" },
  { id: "1501785888041-af3ef285b470", title: "Still water", place: "Lake Bled, Slovenia" },
  { id: "1470071459604-3b5ec3a7fe05", title: "Morning fog", place: "Tuscany, Italy" },
  { id: "1441974231531-c6227db76b6e", title: "Forest path", place: "Black Forest, Germany" },
  { id: "1507525428034-b723cf961d3e", title: "Low tide", place: "Algarve, Portugal" },
  { id: "1519681393784-d120267933ba", title: "Night sky", place: "Dolomites, Italy" },
  { id: "1469474968028-56623f02e42e", title: "Last light", place: "Faroe Islands" },
  { id: "1500530855697-b586d89ba3ee", title: "High road", place: "Ladakh, India" },
]

export function Gallery01() {
  const [open, setOpen] = React.useState<number | null>(null)
  const current = open === null ? null : photos[open]
  const go = (step: number) => setOpen((index) => (index === null ? null : (index + step + photos.length) % photos.length))

  return (
    <section className="mx-auto flex w-full max-w-6xl flex-col gap-8 px-4 py-16 sm:px-6">
      <div className="flex flex-col gap-2">
        <h2 className="font-heading text-3xl font-semibold tracking-tight">Field notes</h2>
        <p className="text-muted-foreground">Eight places from this year. Click a photo to see it large.</p>
      </div>
      <ul className="grid grid-cols-2 gap-3 md:grid-cols-4">
        {photos.map((item, index) => (
          <li key={item.id}>
            <button
              type="button"
              onClick={() => setOpen(index)}
              className="group relative block aspect-square w-full overflow-hidden rounded-xl bg-muted outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
            >
              {/* eslint-disable-next-line @next/next/no-img-element */}
              <img
                src={photo(item.id, 600)}
                alt={item.title}
                loading="lazy"
                className="size-full object-cover transition-transform duration-500 motion-safe:group-hover:scale-105"
              />
              <span className="absolute inset-x-2 bottom-2 flex translate-y-1 flex-col rounded-lg bg-background/85 px-3 py-2 text-left text-sm opacity-0 shadow-sm backdrop-blur transition-all group-hover:translate-y-0 group-hover:opacity-100 group-focus-visible:translate-y-0 group-focus-visible:opacity-100 motion-reduce:transition-none">
                <span className="font-medium">{item.title}</span>
                <span className="text-xs text-muted-foreground">{item.place}</span>
              </span>
            </button>
          </li>
        ))}
      </ul>

      <Dialog open={current !== null} onOpenChange={(value) => !value && setOpen(null)}>
        <DialogContent
          className="max-w-[calc(100%-2rem)] gap-0 overflow-hidden p-0 sm:max-w-4xl"
          onKeyDown={(event) => {
            if (event.key === "ArrowRight") go(1)
            if (event.key === "ArrowLeft") go(-1)
          }}
        >
          {current && (
            <>
              <div className="relative bg-muted">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img src={photo(current.id, 1600)} alt={current.title} className="max-h-[75svh] w-full object-contain" />
                <Button variant="secondary" size="icon" className="absolute top-1/2 left-3 -translate-y-1/2 rounded-full" onClick={() => go(-1)} aria-label="Previous photo">
                  <ChevronLeft />
                </Button>
                <Button variant="secondary" size="icon" className="absolute top-1/2 right-3 -translate-y-1/2 rounded-full" onClick={() => go(1)} aria-label="Next photo">
                  <ChevronRight />
                </Button>
              </div>
              <div className="flex items-center justify-between gap-4 p-4">
                <div className="flex flex-col">
                  <DialogTitle>{current.title}</DialogTitle>
                  <DialogDescription>{current.place}</DialogDescription>
                </div>
                <span className="text-sm text-muted-foreground tabular-nums">
                  {(open ?? 0) + 1} / {photos.length}
                </span>
              </div>
            </>
          )}
        </DialogContent>
      </Dialog>
    </section>
  )
}

30:Td2f,import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "cn" import { Slot } from "radix-ui" const buttonVariants = cva( "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/80", outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50", secondary: "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground", ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50", destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3", sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5", lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", icon: "size-8", "icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3", "icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg", "icon-lg": "size-9", }, }, defaultVariants: { variant: "default", size: "default", }, } ) function Button({ className, variant = "default", size = "default", asChild = false, ...props }: React.ComponentProps<"button"> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot.Root : "button" return ( ) } export { Button, buttonVariants } 31:T3dae,

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"
import { Slot } from "radix-ui"

const buttonVariants = cva(
  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/80",
        outline:
          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
        ghost:
          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
        destructive:
          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default:
          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
        icon: "size-8",
        "icon-xs":
          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
        "icon-sm":
          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
        "icon-lg": "size-9",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

function Button({
  className,
  variant = "default",
  size = "default",
  asChild = false,
  ...props
}: React.ComponentProps<"button"> &
  VariantProps<typeof buttonVariants> & {
    asChild?: boolean
  }) {
  const Comp = asChild ? Slot.Root : "button"

  return (
    <Comp
      data-slot="button"
      data-variant={variant}
      data-size={size}
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  )
}

export { Button, buttonVariants }

32:T1081,

What it installs

Versions

More gallery blocks