Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 | import type { Meta, StoryObj } from '@storybook/react';
import { ScrollArea } from '@/Components/ui/ScrollArea';
const meta = {
title: 'UI/ScrollArea',
component: ScrollArea,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
argTypes: {
className: {
control: 'text',
description: 'Additional CSS classes',
},
},
} satisfies Meta<typeof ScrollArea>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
className: 'h-[200px] w-[350px] rounded-md border p-4',
},
render: (args) => (
<ScrollArea {...args}>
<div className="pr-4">
<h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
{Array.from({ length: 50 }).map((_, i) => (
<div key={i} className="text-sm">
Tag {i + 1}
</div>
))}
</div>
</ScrollArea>
),
};
export const HorizontalScroll: Story = {
args: {
className: 'w-96 whitespace-nowrap rounded-md border',
},
render: (args) => (
<ScrollArea {...args}>
<div className="flex w-max space-x-4 p-4">
{Array.from({ length: 10 }).map((_, i) => (
<figure key={i} className="shrink-0">
<div className="overflow-hidden rounded-md">
<div className="h-48 w-36 bg-muted" />
</div>
<figcaption className="pt-2 text-xs text-muted-foreground">
Photo {i + 1}
</figcaption>
</figure>
))}
</div>
</ScrollArea>
),
};
export const LongText: Story = {
args: {
className: 'h-72 w-96 rounded-md border',
},
render: (args) => (
<ScrollArea {...args}>
<div className="p-6">
<h2 className="mb-4 text-2xl font-bold">The Principles of Good Design</h2>
<p className="mb-4">
Good design is innovative. It does not copy existing product forms, nor does it produce any kind of novelty for the sake of it. The essence of innovation must be clearly seen in all functions of a product. The possibilities in this respect are by no means exhausted. Technological development keeps offering new chances for innovative solutions.
</p>
<p className="mb-4">
Good design makes a product useful. A product is bought to be used. It has to satisfy certain criteria, not only functional, but also psychological and aesthetic. Good design emphasizes the usefulness of a product whilst disregarding anything that could possibly detract from it.
</p>
<p className="mb-4">
Good design is aesthetic. The aesthetic quality of a product is integral to its usefulness because products we use every day affect our person and our well-being. But only well-executed objects can be beautiful.
</p>
<p className="mb-4">
Good design makes a product understandable. It clarifies the product's structure. Better still, it can make the product talk. At best, it is self-explanatory.
</p>
<p className="mb-4">
Good design is unobtrusive. Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained, to leave room for the user's self-expression.
</p>
<p className="mb-4">
Good design is honest. It does not make a product more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept.
</p>
<p className="mb-4">
Good design is long-lasting. It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years – even in today's throwaway society.
</p>
<p className="mb-4">
Good design is thorough down to the last detail. Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the user.
</p>
<p className="mb-4">
Good design is environmentally-friendly. Design makes an important contribution to the preservation of the environment. It conserves resources and minimizes physical and visual pollution throughout the lifecycle of the product.
</p>
<p>
Good design is as little design as possible. Less, but better – because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicity.
</p>
</div>
</ScrollArea>
),
};
export const WithTable: Story = {
args: {
className: 'h-[400px] w-full rounded-md border',
},
render: (args) => (
<ScrollArea {...args}>
<table className="w-full">
<thead>
<tr className="border-b">
<th className="p-2 text-left">ID</th>
<th className="p-2 text-left">Name</th>
<th className="p-2 text-left">Email</th>
<th className="p-2 text-left">Status</th>
</tr>
</thead>
<tbody>
{Array.from({ length: 50 }).map((_, i) => (
<tr key={i} className="border-b">
<td className="p-2">{i + 1}</td>
<td className="p-2">User {i + 1}</td>
<td className="p-2">user{i + 1}@example.com</td>
<td className="p-2">{i % 2 === 0 ? 'Active' : 'Inactive'}</td>
</tr>
))}
</tbody>
</table>
</ScrollArea>
),
};
export const NestedScrollAreas: Story = {
render: () => (
<div className="flex gap-4">
<ScrollArea className="h-[300px] w-[200px] rounded-md border p-4">
<h4 className="mb-4 text-sm font-medium">Categories</h4>
{Array.from({ length: 20 }).map((_, i) => (
<div key={i} className="py-1 text-sm">
Category {i + 1}
</div>
))}
</ScrollArea>
<ScrollArea className="h-[300px] w-[400px] rounded-md border p-4">
<h4 className="mb-4 text-sm font-medium">Items</h4>
<div className="space-y-4">
{Array.from({ length: 30 }).map((_, i) => (
<div key={i} className="rounded-lg border p-3">
<h5 className="font-medium">Item {i + 1}</h5>
<p className="text-sm text-muted-foreground">
Description for item {i + 1}
</p>
</div>
))}
</div>
</ScrollArea>
</div>
),
}; |