Scroll Area

"use client";
import * as React from "react";
import { ScrollArea } from "@/components/ui/scroll-area";import { Separator } from "@/components/ui/separator";import { Surface } from "@/components/ui/surface";
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-50 rounded-xl">			<Surface className="px-6 py-4">				<h4 className="mb-4 font-medium text-sm leading-none">Tags</h4>				{tags.map((tag, index) => (					<React.Fragment key={tag}>						<div className="text-sm">{tag}</div>						{index !== tags.length - 1 && <Separator className="my-2" />}					</React.Fragment>				))}			</Surface>		</ScrollArea>	);}

import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";import { Surface } from "@/components/ui/surface";
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-xl">			<Surface className="flex w-max space-x-4 p-6">				{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>				))}			</Surface>			<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";import { Surface } from "@/components/ui/surface";
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-50 rounded-xl">				<Surface className="px-6 py-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>					))}				</Surface>			</ScrollArea>		</div>	);}