@@ -22,9 +22,12 @@ const Header = ({
2222 const [ isArrowUp , setIsArrowUp ] = useState ( true ) ;
2323 const [ calendarArrowUp , setCalendarArrowUp ] = useState ( true ) ;
2424
25+ // Extract colors from config
26+ const { primary, secondary, accent, text, background } = config . colors
27+
2528 const categories = config . categories && config . categories . length > 0
2629 ? config . categories . map ( cat => cat . label )
27- : [ 'All' , 'Energy' ] ;
30+ : [ 'All' ] ;
2831
2932 const handleSearchInputChange = ( event ) => {
3033 onSearchChange ( event . target . value ) ;
@@ -49,73 +52,129 @@ const Header = ({
4952 onCategoryChange ( category ) ;
5053 } ;
5154
55+ // Style for category buttons
56+ const categoryButtonStyle = ( isActive ) => ( {
57+ padding : '0.25rem 1rem' ,
58+ fontSize : '0.75rem' ,
59+ fontWeight : '600' ,
60+ borderRadius : '9999px' ,
61+ transition : 'colors 0.3s' ,
62+ backgroundColor : isActive ? primary : background ,
63+ color : isActive ? 'white' : primary ,
64+ border : isActive ? 'none' : `1px solid ${ primary }
65+ } ) ;
66+
67+ // Style for filter tags
68+ const filterTagStyle = {
69+ display : 'flex' ,
70+ alignItems : 'center' ,
71+ backgroundColor : primary ,
72+ color : 'white' ,
73+ padding : '0.25rem 0.75rem' ,
74+ borderRadius : '9999px' ,
75+ marginRight : '0.5rem' ,
76+ marginBottom : '0.5rem'
77+ } ;
78+
79+ // Gradient text style
80+ const gradientTextStyle = {
81+ background : `linear-gradient(to right, ${ primary } ${ secondary } ,
82+ WebkitBackgroundClip : 'text' ,
83+ WebkitTextFillColor : 'transparent' ,
84+ backgroundClip : 'text' ,
85+ display : 'inline-block'
86+ } ;
87+
5288 return (
53- < header className = "bg-white text-black font-mono relative z-10 pt-2 md:p-8" >
89+ < header style = { {
90+ backgroundColor : background ,
91+ color : text ,
92+ position : 'relative' ,
93+ zIndex : 10 ,
94+ paddingTop : '0.5rem'
95+ } } className = "font-mono pt-2 md:p-8" >
5496 < div className = "flex flex-col items-start ml-6 md:ml-8 mt-8 mb-6" >
5597 < Link to = "/" >
56- < img src = { config . logo } alt = { config . organization } className = "h-12 md:h-16 " />
98+ < img src = { config . logo } alt = { config . organization } className = "h-12 md:h-20 " />
5799 </ Link >
58- < span className = "reverse-gradient-text mt-4 mb-4 text-2xl md:text-4xl" >
100+ < span
101+ className = "mt-4 mb-4 text-2xl md:text-4xl"
102+ style = { gradientTextStyle }
103+ >
59104 { config . title || "Open Source Software" }
60105 </ span >
61106 < div className = "flex space-x-4" >
62107 { categories . map ( ( category ) => (
63108 < button
64109 key = { category }
65110 onClick = { ( ) => handleCategoryChange ( category ) }
66- className = { `px-4 py-1 text-xs font-semibold rounded-full transition-colors duration-300 ${
67- activeCategory === category
68- ? 'bg-light-blue-2 text-white'
69- : 'text-dark-blue-2 bg-white border border-dark-blue-2'
70- } `}
111+ style = { categoryButtonStyle ( activeCategory === category ) }
71112 >
72113 { category }
73114 </ button >
74115 ) ) }
75116 </ div >
76117 </ div >
77118 < div className = "flex items-center w-full px-6 md:px-8" >
78- < div className = "flex-grow flex border border-dark-blue-2 rounded-full overflow-hidden" >
119+ < div className = "flex-grow flex overflow-hidden" style = { {
120+ border : `1px solid ${ primary } ,
121+ borderRadius : '9999px'
122+ } } >
79123 < input
80124 type = "text"
81- className = "flex-grow ml-6 p-2 bg-white outline-none text-dark-blue-2 placeholder-dark-blue-2 "
125+ className = "flex-grow ml-6 p-2 outline-none"
82126 placeholder = "Search"
83127 value = { searchTerm }
84128 onChange = { handleSearchInputChange }
129+ style = { {
130+ backgroundColor : background ,
131+ color : text ,
132+ '::placeholder' : { color : text }
133+ } }
85134 />
86- < button className = "px-4 py-2 bg-white flex items-center justify-center" >
87- < FontAwesomeIcon icon = { faSearch } className = "text-dark-blue-2" />
135+ < button style = { {
136+ padding : '0.5rem 1rem' ,
137+ backgroundColor : background ,
138+ display : 'flex' ,
139+ alignItems : 'center' ,
140+ justifyContent : 'center'
141+ } } >
142+ < FontAwesomeIcon icon = { faSearch } style = { { color : primary } } />
88143 </ button >
89144 </ div >
90145 < div className = "hidden md:flex items-center ml-4" >
91- < span className = "text-dark-blue-2" > Sort: </ span >
146+ < span style = { { color : primary } } > Sort: </ span >
92147 < div className = "ml-2 flex items-center" >
93- < FontAwesomeIcon icon = { faStarRegular } className = "text-dark-blue-2 text-md ml-2" />
148+ < FontAwesomeIcon icon = { faStarRegular } style = { { color : primary , marginLeft : '0.5rem' } } />
94149 < button
95150 onClick = { toggleArrow }
96- className = { `focus:outline-none ${
97- sortByRepos ? 'opacity-50 cursor-not-allowed' : ''
98- } `}
151+ className = "focus:outline-none"
152+ style = { {
153+ opacity : sortByRepos ? 0.5 : 1 ,
154+ cursor : sortByRepos ? 'not-allowed' : 'pointer'
155+ } }
99156 disabled = { ! ! sortByRepos }
100157 >
101158 < FontAwesomeIcon
102159 icon = { isArrowUp ? faArrowUp : faArrowDown }
103- className = "text-dark-blue-2 text-md ml-1"
160+ style = { { color : primary , marginLeft : '0.25rem' } }
104161 />
105162 </ button >
106163 </ div >
107164 < div className = "ml-2 flex items-center" >
108- < FontAwesomeIcon icon = { faCodeBranch } className = "text-dark-blue-2 text-md ml-2" />
165+ < FontAwesomeIcon icon = { faCodeBranch } style = { { color : primary , marginLeft : '0.5rem' } } />
109166 < button
110167 onClick = { toggleCalendarArrow }
111- className = { `focus:outline-none ${
112- sortByStars ? 'opacity-50 cursor-not-allowed' : ''
113- } `}
168+ className = "focus:outline-none"
169+ style = { {
170+ opacity : sortByStars ? 0.5 : 1 ,
171+ cursor : sortByStars ? 'not-allowed' : 'pointer'
172+ } }
114173 disabled = { ! ! sortByStars }
115174 >
116175 < FontAwesomeIcon
117176 icon = { calendarArrowUp ? faArrowUp : faArrowDown }
118- className = "text-dark-blue-2 text-md ml-1"
177+ style = { { color : primary , marginLeft : '0.25rem' } }
119178 />
120179 </ button >
121180 </ div >
@@ -125,12 +184,12 @@ const Header = ({
125184 { activeFilters . map ( ( filter , index ) => (
126185 < div
127186 key = { index }
128- className = "flex items-center bg-light-blue-2 text-white px-3 py-1 rounded-full mr-2 mb-2"
187+ style = { filterTagStyle }
129188 >
130189 < span > { filter } </ span >
131190 < FontAwesomeIcon
132191 icon = { faTimes }
133- className = "ml-2 cursor- pointer"
192+ style = { { marginLeft : '0.5rem' , cursor : ' pointer' } }
134193 onClick = { ( ) => onRemoveTag ( filter ) }
135194 />
136195 </ div >
0 commit comments