Add new menu to homepage for most viewed platforms

Author: Alex Krawiec

.vscode/settings.json

@@ -12,5 +12,8 @@
   "git.ignoreLimitWarning": true,
   "search.exclude": {
     "**/src/wizard/**": true
-  }
+  },
+  "cSpell.words": [
+    "laravel"
+  ]
 }

next-env.d.ts

@@ -3,4 +3,4 @@
 /// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

src/components/platformFilter/client.tsx

@@ -47,8 +47,73 @@ export function PlatformFilterClient({platforms}: {platforms: Platform[]}) {
     })
   );
 
+  const mostViewedPlatforms: {icon: string; key: string; title: string; url: string}[] = [
+    {
+      url: '/platforms/javascript/guides/nextjs/',
+      key: 'javascript-nextjs',
+      icon: 'javascript-nextjs',
+      title: 'Next.JS',
+    },
+    {
+      url: '/platforms/javascript/guides/react/',
+      key: 'javascript-react',
+      icon: 'javascript-react',
+      title: 'React',
+    },
+    {
+      url: 'platforms/php/guides/laravel/',
+      key: 'php-laravel',
+      icon: 'php-laravel',
+      title: 'Laravel',
+    },
+    {
+      url: '/platforms/javascript/',
+      key: 'javascript',
+      icon: 'javascript',
+      title: 'JavaScript',
+    },
+    {url: '/platforms/python/', key: 'python', icon: 'python', title: 'Python'},
+    {
+      url: '/platforms/react-native/',
+      key: 'react-native',
+      icon: 'react-native',
+      title: 'React Native',
+    },
+  ];
+
   return (
     <div>
+      {/* TODO: Refactor a more elegant solution for this top grid, this was thrown together quickly for https://github.com/getsentry/projects/issues/548 */}
+      <div style={{marginBottom: '40px'}}>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 py-8 md:items-end">
+          <div className="lg:col-span-2 space-y-2">
+            <h2 className="text-2xl font-medium">Most Viewed Sentry SDKs</h2>
+          </div>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {mostViewedPlatforms.map(platform => (
+            <Link
+              href={platform.url}
+              key={platform.key}
+              style={{
+                textDecoration: 'none',
+                color: 'var(--foreground) !important',
+              }}
+            >
+              <div className={styles.StandalonePlatform}>
+                <PlatformIcon
+                  size={20}
+                  platform={platform.icon ?? platform.key}
+                  format="lg"
+                  className={`${styles.PlatformIcon} !border-none !shadow-none`}
+                />
+                {platform.title}
+              </div>
+            </Link>
+          ))}
+        </div>
+      </div>
+
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 py-8 md:items-end">
         <div className="lg:col-span-2 space-y-2">
           <h2 className="text-2xl font-medium">SDKs Supported by Sentry</h2>