add type, center content

src/pages/index.tsx

@@ -2,7 +2,12 @@ import React, { useState, useEffect } from 'react';
 import ActivityCalendar from "react-activity-calendar";
 import { Tooltip } from '@mui/material';
 
-const PROVIDERS_MAP = {
+interface ProviderInfo {
+  color: string;
+  authors: string[];
+}
+
+const PROVIDERS_MAP: Record<string, ProviderInfo> = {
   "Mistral AI": { color: "#ff7000", authors: ["mistralai"] },
   "Meta": { color: "#1877F2", authors: ["facebook", "meta-llama"] },
   "OpenAI": { color: "#10A37F", authors: ["openai"] },
@@ -125,34 +130,32 @@ export default function OpenSourceHeatmap() {
       {isLoading ? (
         <p className="text-center">Loading...</p>
       ) : (
-        <div className="space-y-8 mx-10">
+        <div className="space-y-8">
           {Object.entries(PROVIDERS_MAP)
             .sort(([keyA], [keyB]) => 
               calendarData[keyB].reduce((sum, day) => sum + day.count, 0) -
               calendarData[keyA].reduce((sum, day) => sum + day.count, 0)
             )
             .map(([providerName, { color }]) => (
-              <div key={providerName} className="flex flex-col">
-                <h2 className="text-xl font-bold mb-2">{providerName}</h2>
-                <div className="w-full overflow-x-auto">
-                  <div className="inline-block mx-auto">
-                    <ActivityCalendar 
-                      data={calendarData[providerName]}
-                      theme={{
-                        dark: ['#161b22', color],
-                        light: ['#e0e0e0', color],
-                      }}
-                      hideTotalCount
-                      renderBlock={(block, activity) => (
-                        <Tooltip
-                          title={`${activity.count} models created on ${activity.date}`}
-                          arrow
-                        >
-                          {block}
-                        </Tooltip>
-                      )}
-                    />
-                  </div>
+              <div key={providerName} className="flex flex-col items-center">
+                <h2 className="text-xl font-bold mb-4">{providerName}</h2>
+                <div className="w-full overflow-x-auto flex justify-center">
+                  <ActivityCalendar 
+                    data={calendarData[providerName]}
+                    theme={{
+                      dark: ['#161b22', color],
+                      light: ['#e0e0e0', color],
+                    }}
+                    hideTotalCount
+                    renderBlock={(block, activity) => (
+                      <Tooltip
+                        title={`${activity.count} models created on ${activity.date}`}
+                        arrow
+                      >
+                        {block}
+                      </Tooltip>
+                    )}
+                  />
                 </div>
               </div>
             ))