ScrollArea

'use client';
import { PhotoService } from '@/shared/services/photo.service';
import { ScrollArea } from '@primereact/ui/scrollarea';
import * as React from 'react';

interface ImageData {
    itemImageSrc: string;
    thumbnailImageSrc: string;
    alt: string;
    title: string;
}

export default function HorizontalDemo() {
    const [images, setImages] = React.useState<ImageData[] | null>(null);

    React.useEffect(() => {
        PhotoService.getImages().then((data) => setImages(data));
    }, []);

    return (
        <div className="flex justify-center">
            <ScrollArea.Root className="border border-surface-200 dark:border-surface-700 rounded-lg max-w-md">
                <ScrollArea.Viewport>
                    <ScrollArea.Content className="flex gap-4 p-4">
                        {images &&
                            images.map((image, index) => (
                                <figure key={index} className="flex-1 min-w-48">
                                    <img src={image.itemImageSrc} alt={image.title} className="object-cover rounded-md" />
                                    <figcaption className="mt-2 text-xs">
                                        <span className="opacity-60">Photo by</span> <span className="font-medium">{image.title}</span>
                                    </figcaption>
                                </figure>
                            ))}
                    </ScrollArea.Content>
                </ScrollArea.Viewport>
                <ScrollArea.ThumbX className="h-2" />
            </ScrollArea.Root>
        </div>
    );
}

import { ScrollArea } from '@primereact/ui/scrollarea';

export default function BothScrollbarsDemo() {
    return (
        <div className="flex justify-center">
            <ScrollArea.Root className="h-80 w-80 border border-surface rounded-lg">
                <ScrollArea.Viewport className="p-4">
                    <ScrollArea.Content>
                        <div className="grid grid-cols-[repeat(10,6rem)] grid-rows-[repeat(10,6rem)] gap-4">
                            {Array(100)
                                .fill(null)
                                .map((_, i) => (
                                    <div key={i} className="size-full bg-surface-100 dark:bg-surface-800 rounded-lg flex items-center justify-center">
                                        <span className="text-sm opacity-75">{i}</span>
                                    </div>
                                ))}
                        </div>
                    </ScrollArea.Content>
                </ScrollArea.Viewport>
                <ScrollArea.ThumbY />
                <ScrollArea.ThumbX />
            </ScrollArea.Root>
        </div>
    );
}

import { ScrollArea } from '@primereact/ui/scrollarea';

export default function BasicDemo() {
    return (
        <div className="flex justify-center">
            <ScrollArea.Root className="max-w-sm h-48">
                <ScrollArea.Viewport>
                    <ScrollArea.Content>
                        <div className="space-y-6 text-sm">
                            <p>
                                This panel provides an overview of recent activity associated with your account, including system updates,
                                configuration changes, and important user actions that may require your attention. It is designed to surface relevant
                                information in a compact space without overwhelming the main layout or distracting you from your current task.
                            </p>

                            <p>
                                As activity accumulates over time, new entries are continuously added to this section while older records remain
                                available for review. Scrolling allows you to explore past events at your own pace, making it easier to understand
                                changes and patterns without navigating away from the current context.
                            </p>

                            <p>
                                Activity data may include security-related events, billing notifications, feature updates, and changes made by team
                                members across your workspace. Keeping this information in a dedicated scrollable area helps maintain clarity and
                                focus within the interface while still providing access to detailed historical information.
                            </p>

                            <p>
                                Use this area to monitor recent changes, verify completed actions, and stay informed about updates that may affect
                                your workflow or account status. For a more comprehensive view, additional filters, search options, or detailed logs
                                may be available elsewhere in the application.
                            </p>
                        </div>
                    </ScrollArea.Content>
                </ScrollArea.Viewport>
                <ScrollArea.ThumbY className="w-1.5 bg-primary" />
            </ScrollArea.Root>
        </div>
    );
}