GalleryIndicator

Quick Preview

View All 35 Photos

Usage

import { GalleryIndicator } from "@giddaa-housing/ui/gallery-indicator";

<GalleryIndicator photoCount={35} />
<GalleryIndicator currentPhoto={1} totalPhotos={5} />

Examples

Sizes

Use size to match the image surface. Small works in cards and thumbnails, medium works in standard galleries, and large works in prominent hero placements.

View All 12 PhotosSm

View All 24 PhotosMd

View All 35 PhotosLg

Counter

Pass currentPhoto and totalPhotos for compact carousel position counters.

1/52/812/24

Props

Prop/API	Type	Default	Description
`size`	`"sm"	"md"	"lg"`
`photoCount`	`number`	`35`	Total photo count used by the default view-all label.
`currentPhoto`	`number`	-	Current photo index. When provided, the indicator renders a compact position counter.
`totalPhotos`	`number`	`photoCount`	Total photo count used by the compact position counter.
`label`	`string`	-	Overrides the generated label.
`children`	`ReactNode`	-	Replaces the generated label content.
`className`	`string`	-	Local layout or positioning overrides.
native span props	React span props	-	Passed through to the root element.

Accessibility

Place the indicator over real imagery; the glass treatment is intentionally tuned for photographic backgrounds.
Keep the generated text visible or provide equivalent accessible text when overriding children.
If the indicator opens a gallery, wrap it in an interactive control rather than adding click handlers to the indicator itself.