Scroll Area

"use client";

import * as React from "react";

import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";

const tags = Array.from({ length: 50 }).map(
	(_, i, array) => `v1.2.0-beta.${array.length - i}`,
);

export function ScrollAreaDemo() {
	return (
		<ScrollArea className="h-72 w-48 rounded-md border">
			<div className="p-4">
				<h4 className="mb-4 font-medium text-sm leading-none">Tags</h4>
				{tags.map((tag) => (
					<React.Fragment key={tag}>
						<div className="text-sm">{tag}</div>
						<Separator className="my-2" />
					</React.Fragment>
				))}
			</div>
		</ScrollArea>
	);
}

import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";

export interface Artwork {
	artist: string;
	art: string;
}

export const works: Artwork[] = [
	{
		artist: "Ornella Binni",
		art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80",
	},
	{
		artist: "Tom Byrom",
		art: "https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80",
	},
	{
		artist: "Vladimir Malyavko",
		art: "https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80",
	},
];

export function ScrollAreaHorizontalDemo() {
	return (
		<ScrollArea className="whitespace-nowrap rounded-md border">
			<div className="flex w-max space-x-4 p-4">
				{works.map((artwork) => (
					<figure key={artwork.artist} className="shrink-0">
						<div className="overflow-hidden rounded-md">
							<img
								src={artwork.art}
								alt={`By ${artwork.artist}`}
								className="aspect-3/4 h-fit w-fit object-cover"
							/>
						</div>
						<figcaption className="pt-2 text-muted-foreground text-xs">
							Photo by{" "}
							<span className="font-semibold text-foreground">
								{artwork.artist}
							</span>
						</figcaption>
					</figure>
				))}
			</div>
			<ScrollBar orientation="horizontal" />
		</ScrollArea>
	);
}

"use client";

import * as React from "react";

import {
	type Translations,
	useTranslation,
} from "@/components/language-selector";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";

const tags = Array.from({ length: 50 }).map(
	(_, i, array) => `v1.2.0-beta.${array.length - i}`,
);

const translations: Translations = {
	en: {
		dir: "ltr",
		values: {
			title: "Tags",
		},
	},
	ar: {
		dir: "rtl",
		values: {
			title: "العلامات",
		},
	},
	he: {
		dir: "rtl",
		values: {
			title: "תגיות",
		},
	},
};

export function ScrollAreaRtl() {
	const { dir, language, t } = useTranslation(translations, "ar");

	return (
		<div lang={language} dir={dir}>
			<ScrollArea className="h-72 w-48 rounded-md border">
				<div className="p-4">
					<h4 className="mb-4 font-medium text-sm leading-none">{t.title}</h4>
					{tags.map((tag) => (
						<React.Fragment key={tag}>
							<div className="text-sm">{tag}</div>
							<Separator className="my-2" />
						</React.Fragment>
					))}
				</div>
			</ScrollArea>
		</div>
	);
}