ScrollArea

import { ComponentProps } from "react"

const SCROLLBAR_CSS = `
  .custom-scrollbar::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }
  .custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background-color: #ffffff4d;
    border: 3px solid transparent;
    background-clip: padding-box;
  }
  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #ffffff80;
  }
  .custom-scrollbar::-webkit-scrollbar-button,
  .custom-scrollbar::-webkit-scrollbar-corner {
    display: none;
  }
`

export interface ScrollAreaProps extends ComponentProps<"div"> {
	className?: string
}

export function ScrollArea({ className, children, ...props }: ScrollAreaProps) {
	return (
		<>
			<style>{SCROLLBAR_CSS}</style>
			<div className={`custom-scrollbar overflow-auto ${className || ""}`} {...props}>
				{children}
			</div>
		</>
	)
}

import { ScrollArea } from "@/components/ui/scroll-area"

const ITEMS = [
	"Cosmic Dreamer",
	"Neon Horizon",
	"Stellar Drift",
	"Phantom Circuit",
	"Echo Chamber",
	"Void Walker",
	"Pulse Engine",
	"Dark Matter",
	"Solar Flare",
	"Quantum Leap",
	"Binary Star",
	"Event Horizon",
	"Nebula Core",
	"Iron Signal",
	"Ghost Protocol",
	"Analog Decay",
	"Flux Capacitor",
	"Entropy Wave",
	"Zero Gravity",
	"Plasma Field",
	"Hyperion",
	"Cascade Loop",
	"Static Bloom",
	"Orbit Decay",
]

export function ScrollAreaExample() {
	return (
		<ScrollArea className="bg-background max-h-50 w-full max-w-50 rounded-lg border">
			<ul className="p-2">
				{ITEMS.map((name, i) => (
					<li key={i} className="px-2 py-1">
						<span className="text-muted-foreground text-sm">{name}</span>
					</li>
				))}
			</ul>
		</ScrollArea>
	)
}