Scroll Area

1import { ScrollArea } from "passport-ui";
2import { Card, CardContent } from "passport-ui";

1<div className="w-sm">
2  <ScrollArea className="h-48 rounded-md border">
3    <div className="list-container p-4">
4      {Array.from({ length: 20 }, (_, i) => (
5        <Card key={i}>
6          <CardContent>
7            <div className="meta-container">
8              <h3>Item {i + 1}</h3>
9              <p>
10                This is item number {i + 1} in the scrollable list. The
11                scroll area allows for smooth scrolling through content that
12                exceeds the container height.
13              </p>
14            </div>
15          </CardContent>
16        </Card>
17      ))}
18    </div>
19  </ScrollArea>
20</div>
21 
22{/* Simple text scrolling */}
23<ScrollArea className="h-32 w-48 rounded border p-4">
24  <div className="space-y-2">
25    {Array.from({ length: 50 }, (_, i) => (
26      <p key={i}>Line {i + 1}</p>
27    ))}
28  </div>
29</ScrollArea>