@@ -17,6 +17,8 @@ export function Home() {
1717 const [ categories , setCategories ] = useState < string [ ] > ( [ ] ) ;
1818 const [ isLoadingCategories , setIsLoadingCategories ] = useState ( true ) ;
1919 const [ categoryCounts , setCategoryCounts ] = useState < Record < string , number > > ( { } ) ;
20+ const [ officialIntegrationCount , setOfficialIntegrationCount ] = useState ( 0 ) ;
21+ const [ referenceServerCount , setReferenceServerCount ] = useState ( 0 ) ;
2022
2123 useEffect ( ( ) => {
2224 const loadServers = async ( ) => {
@@ -89,6 +91,55 @@ export function Home() {
8991 fetchCategoryCounts ( ) ;
9092 } , [ categories , language , isLoadingCategories ] ) ;
9193
94+ // Fetch counts for official integrations and reference servers
95+ useEffect ( ( ) => {
96+ const fetchSpecialCounts = async ( ) => {
97+ try {
98+ // Fetch official integration count
99+ const officialResponse = await fetch ( `/v1/hub/search_servers` , {
100+ method : 'POST' ,
101+ headers : {
102+ 'Content-Type' : 'application/json'
103+ } ,
104+ body : JSON . stringify ( {
105+ locale : language || 'en' ,
106+ page : 1 ,
107+ size : 1 ,
108+ isOfficialIntegration : true
109+ } )
110+ } ) ;
111+
112+ if ( officialResponse . ok ) {
113+ const officialData = await officialResponse . json ( ) ;
114+ setOfficialIntegrationCount ( officialData . totalItems ) ;
115+ }
116+
117+ // Fetch reference server count
118+ const referenceResponse = await fetch ( `/v1/hub/search_servers` , {
119+ method : 'POST' ,
120+ headers : {
121+ 'Content-Type' : 'application/json'
122+ } ,
123+ body : JSON . stringify ( {
124+ locale : language || 'en' ,
125+ page : 1 ,
126+ size : 1 ,
127+ isReferenceServer : true
128+ } )
129+ } ) ;
130+
131+ if ( referenceResponse . ok ) {
132+ const referenceData = await referenceResponse . json ( ) ;
133+ setReferenceServerCount ( referenceData . totalItems ) ;
134+ }
135+ } catch ( error ) {
136+ console . error ( 'Error fetching special server counts:' , error ) ;
137+ }
138+ } ;
139+
140+ fetchSpecialCounts ( ) ;
141+ } , [ language ] ) ;
142+
92143 const handleSearch = ( query : string ) => {
93144 if ( query . trim ( ) ) {
94145 // Redirect to the listing page with the search keyword
@@ -207,6 +258,46 @@ export function Home() {
207258 />
208259 </ div >
209260
261+ { /* Official Integrations - using ServerList component */ }
262+ < div className = "mt-16" >
263+ < div className = "flex justify-between items-center mb-4" >
264+ < h3 className = "text-xl font-semibold text-gray-900" >
265+ { t ( 'home.officialIntegrations' ) || 'Official Integrations' } { officialIntegrationCount > 0 ? ` (${ officialIntegrationCount } : '' }
266+ </ h3 >
267+ < Link
268+ to = { `/listing/all?page=1&size=12&isOfficialIntegration=true` }
269+ className = "text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center"
270+ >
271+ { t ( 'common.viewAll' ) || 'View All' }
272+ < ChevronRight size = { 16 } className = "ml-1" />
273+ </ Link >
274+ </ div >
275+ < ServerList
276+ isOfficialIntegration = { true }
277+ initialPageSize = { 6 }
278+ />
279+ </ div >
280+
281+ { /* Reference Servers - using ServerList component */ }
282+ < div className = "mt-16" >
283+ < div className = "flex justify-between items-center mb-4" >
284+ < h3 className = "text-xl font-semibold text-gray-900" >
285+ { t ( 'home.referenceServers' ) || 'Reference Servers' } { referenceServerCount > 0 ? ` (${ referenceServerCount } : '' }
286+ </ h3 >
287+ < Link
288+ to = { `/listing/all?page=1&size=12&isReferenceServer=true` }
289+ className = "text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center"
290+ >
291+ { t ( 'common.viewAll' ) || 'View All' }
292+ < ChevronRight size = { 16 } className = "ml-1" />
293+ </ Link >
294+ </ div >
295+ < ServerList
296+ isReferenceServer = { true }
297+ initialPageSize = { 6 }
298+ />
299+ </ div >
300+
210301 { /* Categories section - showing all categories in a unified style */ }
211302 < div className = "mt-16" >
212303 < h2 className = "text-2xl font-bold text-gray-900 mb-8 text-center" >
0 commit comments