allow for additional header styling

Author: StackOverflowIsBetterThanAnyAI

src/components/ui/sectionheader.tsx

@@ -1,17 +1,12 @@
 type SectionHeaderProps = {
+    className?: string
     children: string
-    light?: boolean
 }
 
-export const SectionHeader = ({
-    children,
-    light = false,
-}: SectionHeaderProps) => {
+export const SectionHeader = ({ className, children }: SectionHeaderProps) => {
     return (
         <h2
-            className={`self-start text-very-large font-semibold underline ${
-                light ? 'text-zinc-50' : ''
-            }`}
+            className={`self-start text-very-large font-semibold underline ${className}`}
         >
             {children}
         </h2>

src/components/users/Users.tsx

@@ -62,7 +62,9 @@ const Users = () => {
         >
             <div className="w-full flex flex-col items-center">
                 <div className="w-full flex flex-col gap-0 sm:gap-4">
-                    <SectionHeader light>Most Active Users</SectionHeader>
+                    <SectionHeader className="text-zinc-50">
+                        Most Active Users
+                    </SectionHeader>
                     <div className="grid grid-cols-1 md:grid-cols-3 gap-4 w-full">
                         <div className="md:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-4">
                             {users.length > 0