Scroll Area

import { Component } from '@angular/core';
import { HlmScrollArea } from '@spartan-ng/helm/scroll-area';
import { HlmSeparator } from '@spartan-ng/helm/separator';
import { NgScrollbarModule } from 'ngx-scrollbar';

@Component({
	selector: 'spartan-scroll-area-preview',
	imports: [HlmSeparator, HlmScrollArea, NgScrollbarModule],
	template: `
		<ng-scrollbar hlm class="border-border h-72 w-48 rounded-md border" visibility="hover">
			<div class="p-4">
				<h4 class="mb-4 text-sm font-medium leading-none">Tags</h4>
				@for (tag of tags; track tag) {
					<div class="text-sm">
						{{ tag }}
						<div hlmSeparator class="my-2"></div>
					</div>
				}
			</div>
		</ng-scrollbar>
	`,
})
export class ScrollAreaPreview {
	public tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);
}