veza/apps/web/src/components/ui/ImageViewerModal.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import { ImageViewerModal } from './ImageViewerModal';
import { Button } from './button';
import { useState } from 'react';

const meta: Meta = {
    title: 'UI/ImageViewerModal',
    component: ImageViewerModal,
    tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
    render: () => {
        const [open, setOpen] = useState(false);
        const image = "https://images.unsplash.com/photo-1682687220742-aba13b6e50ba";

        return (
            <>
                <Button onClick={() => setOpen(true)}>View Image</Button>
                {open && (
                    <ImageViewerModal
                        src={image}
                        alt="Nature Landscape"
                        onClose={() => setOpen(false)}
                    />
                )}
            </>
        );
    },
};

export const Gallery: Story = {
    render: () => {
        const [open, setOpen] = useState(false);
        const [index, setIndex] = useState(0);
        const images = [
            "https://images.unsplash.com/photo-1682687220742-aba13b6e50ba",
            "https://images.unsplash.com/photo-1682687220063-4742bd7fd538",
            "https://images.unsplash.com/photo-1682687220199-d0124f48f95b"
        ];

        return (
            <>
                <Button onClick={() => setOpen(true)}>Open Gallery</Button>
                {open && (
                    <ImageViewerModal
                        src={images[index] ?? ''}
                        alt={`Gallery Image ${index + 1}`}
                        onClose={() => setOpen(false)}
                        hasNext={index < images.length - 1}
                        hasPrev={index > 0}
                        onNext={() => setIndex(i => i + 1)}
                        onPrev={() => setIndex(i => i - 1)}
                        currentIndex={index + 1}
                        totalImages={images.length}
                    />
                )}
            </>
        );
    },
};