showGradient in profile page scroll-area

Vizzuality · Dec 17, 2024 · 7ed622d · 7ed622d
1 parent 69c1fc5
commit 7ed622d
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 36 deletions.
diff --git a/client/src/components/ui/scroll-area.tsx b/client/src/components/ui/scroll-area.tsx
@@ -13,21 +13,33 @@ const ScrollArea = React.forwardRef<
      * When true, adds a horizontal scrollbar to the scroll area
      */
     hasHorizontalScroll?: boolean;
+    /**
+     * When true, adds a gradient to the bottom of the scroll area
+     */
+    showGradient?: boolean;
   }
->(({ className, children, hasHorizontalScroll, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn("relative overflow-hidden", className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="relative h-full w-full scroll-smooth rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    {hasHorizontalScroll && <ScrollBar orientation="horizontal" />}
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-));
+>(
+  (
+    { className, children, hasHorizontalScroll, showGradient, ...props },
+    ref,
+  ) => (
+    <ScrollAreaPrimitive.Root
+      ref={ref}
+      className={cn("relative overflow-hidden", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport className="relative h-full w-full scroll-smooth rounded-[inherit]">
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      {showGradient && (
+        <div className="pointer-events-none absolute bottom-0 left-0 h-10 w-full bg-gradient-to-t from-big-stone-1000 to-big-stone-1000/0" />
+      )}
+      <ScrollBar />
+      {hasHorizontalScroll && <ScrollBar orientation="horizontal" />}
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  ),
+);
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
 const ScrollBar = React.forwardRef<

diff --git a/client/src/containers/profile/custom-projects/index.tsx b/client/src/containers/profile/custom-projects/index.tsx
@@ -4,7 +4,7 @@ import { ACTIVITY } from "@shared/entities/activity.enum";
 import { useSession } from "next-auth/react";
 
 import { client } from "@/lib/query-client";
-import { cn, getAuthHeader } from "@/lib/utils";
+import { getAuthHeader } from "@/lib/utils";
 
 import { DEFAULT_CUSTOM_PROJECTS_QUERY_KEY } from "@/app/my-projects/url-store";
 
@@ -17,24 +17,6 @@ import {
   TableRow,
 } from "@/components/ui/table";
 
-const GRADIENT_STYLES =
-  "absolute inset-0 bg-gradient-to-t from-big-stone-1000 to-transparent opacity-100" as const;
-
-const CustomTableHead: FC<{
-  title: string;
-  className?: HTMLDivElement["className"];
-}> = ({ title, className }) => (
-  <TableHead
-    className={cn("relative w-[260px] bg-transparent font-normal", className)}
-  >
-    <div className="relative">
-      {title}
-      <div className={GRADIENT_STYLES}></div>
-    </div>
-    <div className={GRADIENT_STYLES}></div>
-  </TableHead>
-);
-
 const CustomProjects: FC = () => {
   const { data: session } = useSession();
   const queryKey = DEFAULT_CUSTOM_PROJECTS_QUERY_KEY;
@@ -61,8 +43,12 @@ const CustomProjects: FC = () => {
     <Table>
       <TableHeader>
         <TableRow className="divide-x-0">
-          <CustomTableHead title="Project type" />
-          <CustomTableHead title="Number of projects" className="text-center" />
+          <TableHead className="w-[260px] bg-transparent font-normal">
+            Project type
+          </TableHead>
+          <TableHead className="w-[260px] bg-transparent text-center font-normal">
+            Number of projects
+          </TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>

diff --git a/client/src/containers/profile/index.tsx b/client/src/containers/profile/index.tsx
@@ -101,7 +101,7 @@ export default function Profile() {
         <ProfileSidebar
           navItems={sections.map((s) => ({ id: s.id, name: s.title }))}
         />
-        <ScrollArea ref={ref} className="pr-6">
+        <ScrollArea ref={ref} className="pr-6" showGradient>
           <div id="profile-sections-container" className="space-y-2 pb-80">
             {sections.map(({ Component, ...rest }) => (
               <ProfileSection key={rest.id} {...rest}>