59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
import * as React from "react"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
/**
|
|
* ScrollArea - Composant de zone de défilement avec design system Kodo
|
|
*
|
|
* Composant pour créer une zone de défilement avec une barre de défilement personnalisée.
|
|
* Utilise le design system Kodo avec la classe `custom-scrollbar` pour le style.
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* // Zone de défilement simple
|
|
* <ScrollArea className="h-64">
|
|
* <div>Contenu long qui nécessite un scroll</div>
|
|
* </ScrollArea>
|
|
* ```
|
|
*
|
|
* @component
|
|
* @param {React.HTMLAttributes<HTMLDivElement>} props - Propriétés HTML standard de div
|
|
* @returns {JSX.Element} Élément div avec overflow-auto et custom-scrollbar
|
|
*/
|
|
const ScrollArea = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.HTMLAttributes<HTMLDivElement>
|
|
>(({ className, children, ...props }, ref) => (
|
|
<div
|
|
ref={ref}
|
|
className={cn("relative overflow-auto custom-scrollbar", className)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
))
|
|
ScrollArea.displayName = "ScrollArea"
|
|
|
|
/**
|
|
* ScrollBar - Barre de défilement personnalisée
|
|
*
|
|
* Composant pour une barre de défilement personnalisée (utilisé avec ScrollArea).
|
|
*
|
|
* @component
|
|
*/
|
|
|
|
const ScrollBar = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.HTMLAttributes<HTMLDivElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<div
|
|
ref={ref}
|
|
className={cn(
|
|
"flex touch-none select-none transition-colors",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
))
|
|
ScrollBar.displayName = "ScrollBar"
|
|
|
|
export { ScrollArea, ScrollBar }
|