outsource section header

Author: StackOverflowIsBetterThanAnyAI

src/components/feed/Feed.tsx

@@ -19,6 +19,7 @@ import {
     CarouselNext,
     CarouselPrevious,
 } from '@/components/ui/carousel'
+import { SectionHeader } from '@/components/ui/sectionheader'
 import { Skeleton } from '@/components/ui/skeleton'
 import { ContextContentLoaded } from '@/context/ContextContentLoaded'
 import { ContextTopTenPosts } from '@/context/ContextTopTenPosts'
@@ -70,9 +71,7 @@ const Feed = () => {
         >
             <div className="w-full flex flex-col items-center px-14 sm:px-16 py-6 bg-stone-400/60 rounded-lg shadow-md shadow-stone-500">
                 <div className="w-full flex flex-col gap-4 max-w-3xl">
-                    <h2 className="self-start text-very-large font-semibold underline">
-                        Top 10 Posts of the Week
-                    </h2>
+                    <SectionHeader>Top 10 Posts of the Week</SectionHeader>
                     <div className="w-full">
                         <Carousel>
                             <CarouselContent>
@@ -130,9 +129,7 @@ const Feed = () => {
             </div>
             {feedItems.length > 10 && (
                 <div className="flex flex-col gap-4 lg:gap-6">
-                    <h2 className="self-start text-very-large font-semibold underline px-4">
-                        More Hot Posts
-                    </h2>
+                    <SectionHeader>More Hot Posts</SectionHeader>
                     <div className="grid grid-cols-[repeat(auto-fit,minmax(min(100%,448px),1fr))] grid-flow-row-dense w-full gap-4 lg:gap-6">
                         {feedItems.slice(10).map((item) => (
                             <Card key={item.id} className="gap-6">

src/components/quote/Quote.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useContext, useState } from 'react'
+import { SectionHeader } from '@/components/ui/sectionheader'
 import { ContextContentLoaded } from '@/context/ContextContentLoaded'
 import { ContextQuote } from '@/context/ContextQuote'
 import { QuoteType } from '@/types/types'
@@ -39,9 +40,7 @@ const Quote = () => {
     return (
         <section className="w-full max-w-7xl" ref={quoteRef}>
             <blockquote className="flex flex-col gap-2 sm:gap-4 text-center text-pretty bg-stone-100 text-stone-950 p-4 sm:p-8 lg:p-10 lg:px-12 my-6 lg:my-8">
-                <h2 className="self-start text-very-large font-semibold underline">
-                    Quote of the Day
-                </h2>
+                <SectionHeader>Quote of the Day</SectionHeader>
                 {quote ? (
                     <div className="flex flex-col text-normal">
                         <i>&quot;{quote.body}&quot;</i>

src/components/ui/sectionheader.tsx

@@ -0,0 +1,11 @@
+type SectionHeaderProps = {
+    children: string
+}
+
+export const SectionHeader = ({ children }: SectionHeaderProps) => {
+    return (
+        <h2 className="self-start text-very-large font-semibold underline">
+            {children}
+        </h2>
+    )
+}

src/components/users/Users.tsx

@@ -14,6 +14,7 @@ import {
     CardHeader,
     CardTitle,
 } from '@/components/ui/card'
+import { SectionHeader } from '@/components/ui/sectionheader'
 import { Skeleton } from '@/components/ui/skeleton'
 import { ContextContentLoaded } from '@/context/ContextContentLoaded'
 import { ContextTopUsers } from '@/context/ContextTopUsers'
@@ -61,9 +62,7 @@ const Users = () => {
         >
             <div className="w-full flex flex-col items-center">
                 <div className="w-full flex flex-col gap-0 sm:gap-4">
-                    <h2 className="text-very-large font-semibold text-zinc-50 underline">
-                        Most Active Users
-                    </h2>
+                    <SectionHeader>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