dgz-ui-shared/dist/types/components/gallery/MyGallery.d.ts

Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript, dgz-ui library

import { HTMLAttributes, ReactNode } from 'react';
/**
 * Interface representing an image item in the gallery.
 */
export interface GalleryItem {
    /** Unique identifier for the image. */
    id: string;
    /** URL of the full-resolution image. */
    src: string;
    /** URL of the thumbnail image. */
    thumbnail: string;
    /** Alt text for the image. */
    alt: string;
    /** Optional title or description for the image. */
    title?: string;
}
/**
 * Props for the Thumbnail component.
 */
export interface ThumbnailProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
    /** The gallery item to display as a thumbnail. */
    image: GalleryItem;
    /** The index of the item in the gallery. */
    index: number;
    /** Callback executed when the thumbnail is clicked. */
    onClick: (index: number) => void;
    /** URL used when the thumbnail image fails to load. */
    fallbackImage?: string;
}
/**
 * Interface representing a custom action button in the fullscreen view.
 */
export interface GalleryActionButton {
    /** Icon to display on the button. */
    icon: ReactNode;
    /** Label for the button (used as title/tooltip). */
    label: string;
    /** Callback executed when the button is clicked. */
    onClick: (image: GalleryItem) => void;
    /** Custom CSS class name for the button. */
    className?: string;
}
/**
 * Props for the MyGallery component.
 */
export type MyGalleryProps = HTMLAttributes<HTMLDivElement> & {
    /** Array of gallery items to display. */
    images: GalleryItem[];
    /** Additional props to pass to each thumbnail component. */
    thumbnailProps?: ThumbnailProps;
    /** URL used when an image fails to load. */
    fallbackImage?: string;
    /** Custom action buttons rendered in fullscreen. */
    actionButtons?: GalleryActionButton[];
    /** Whether to show image title overlay on thumbnails. */
    hasInfo?: true;
};
/**
 * Memoized MyGallery component.
 */
export declare const MyGallery: import('react').MemoExoticComponent<({ images, thumbnailProps, actionButtons, fallbackImage, className, hasInfo, ...props }: MyGalleryProps) => import("react/jsx-runtime").JSX.Element>;
//# sourceMappingURL=MyGallery.d.ts.map