diff options
| -rw-r--r-- | apps/web/src/app/globals.css | 2 | ||||
| -rw-r--r-- | apps/web/src/components/ui/scroll-area.tsx | 55 |
2 files changed, 11 insertions, 46 deletions
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css index b25f2c1e..a6b86ae4 100644 --- a/apps/web/src/app/globals.css +++ b/apps/web/src/app/globals.css @@ -229,7 +229,7 @@ @utility scrollbar-thin { &::-webkit-scrollbar { - width: 8px; + width: 6px; height: 8px; } &::-webkit-scrollbar-track { diff --git a/apps/web/src/components/ui/scroll-area.tsx b/apps/web/src/components/ui/scroll-area.tsx index d5aaf2ee..1fc227b0 100644 --- a/apps/web/src/components/ui/scroll-area.tsx +++ b/apps/web/src/components/ui/scroll-area.tsx @@ -1,53 +1,18 @@ -"use client"; - import * as React from "react"; -import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"; - -import { cn } from "../../lib/utils"; +import { cn } from "@/lib/utils"; const ScrollArea = React.forwardRef< - React.ElementRef<typeof ScrollAreaPrimitive.Root>, - React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & { - type?: "auto" | "always" | "scroll" | "hover"; - showHorizontalScrollbar?: boolean; - } ->(({ className, children, type, showHorizontalScrollbar, ...props }, ref) => ( - <ScrollAreaPrimitive.Root - ref={ref} - className={cn("relative overflow-hidden", className)} - type={type} - {...props} - > - <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]"> - {children} - </ScrollAreaPrimitive.Viewport> - <ScrollBar /> - {showHorizontalScrollbar && <ScrollBar orientation="horizontal" />} - <ScrollAreaPrimitive.Corner /> - </ScrollAreaPrimitive.Root> -)); -ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName; - -const ScrollBar = React.forwardRef< - React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>, - React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar> ->(({ className, orientation = "vertical", ...props }, ref) => ( - <ScrollAreaPrimitive.ScrollAreaScrollbar + HTMLDivElement, + React.HTMLAttributes<HTMLDivElement> +>(({ className, children, ...props }, ref) => ( + <div ref={ref} - orientation={orientation} - className={cn( - "flex touch-none select-none transition-colors", - orientation === "vertical" && - "h-full w-2.5 border-l border-l-transparent p-px", - orientation === "horizontal" && - "h-2.5 flex-col border-t border-t-transparent p-px", - className - )} + className={cn("overflow-auto scrollbar-thin", className)} {...props} > - <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" /> - </ScrollAreaPrimitive.ScrollAreaScrollbar> + {children} + </div> )); -ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName; +ScrollArea.displayName = "ScrollArea"; -export { ScrollArea, ScrollBar }; +export { ScrollArea }; |