Scrollbar

import { Scrollbar } from '@hua-labs/ui';

export function BasicScrollbar() {
  return (
    <Scrollbar className="h-48">
      <div className="p-4 space-y-4">
        {Array.from({ length: 20 }).map((_, i) => (
          <p key={i}>Scrollable content item {i + 1}</p>
        ))}
      </div>
    </Scrollbar>
  );
}

import { Scrollbar } from '@hua-labs/ui';

export function ScrollbarVariants() {
  return (
    <div className="grid grid-cols-2 gap-4">
      <Scrollbar variant="default" className="h-32 border rounded">
        <div className="p-4">Default variant</div>
      </Scrollbar>

      <Scrollbar variant="glass" className="h-32 border rounded">
        <div className="p-4">Glass variant</div>
      </Scrollbar>

      <Scrollbar variant="minimal" className="h-32 border rounded">
        <div className="p-4">Minimal variant</div>
      </Scrollbar>

      <Scrollbar variant="neon" className="h-32 border rounded">
        <div className="p-4">Neon variant</div>
      </Scrollbar>
    </div>
  );
}

import { Scrollbar } from '@hua-labs/ui';

export function ScrollbarSizes() {
  return (
    <div className="grid grid-cols-4 gap-4">
      <Scrollbar size="sm" className="h-32 border rounded">
        <div className="p-4">Small</div>
      </Scrollbar>

      <Scrollbar size="md" className="h-32 border rounded">
        <div className="p-4">Medium</div>
      </Scrollbar>

      <Scrollbar size="lg" className="h-32 border rounded">
        <div className="p-4">Large</div>
      </Scrollbar>

      <Scrollbar size="xl" className="h-32 border rounded">
        <div className="p-4">XL</div>
      </Scrollbar>
    </div>
  );
}