feat(devtools): add SEO tab navigation and enhance SocialPreviewsSection

This commit introduces a navigation bar in the SeoTab component, allowing users to switch between 'Social Previews' and 'SERP Preview' sections. It also updates the SocialPreviewsSection to conditionally render its title based on a new prop, improving flexibility in display options. New styles for the navigation elements are added to enhance the user interface.

Author: abedshaaban

packages/devtools/src/styles/use-styles.ts

@@ -119,6 +119,32 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       margin-bottom: 2rem;
       border-radius: 0.75rem;
     `,
+    seoSubNav: css`
+      display: flex;
+      flex-direction: row;
+      gap: 0;
+      margin-bottom: 1rem;
+      border-bottom: 1px solid ${t(colors.gray[200], colors.gray[800])};
+    `,
+    seoSubNavLabel: css`
+      padding: 0.5rem 1rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: ${t(colors.gray[600], colors.gray[400])};
+      background: none;
+      border: none;
+      border-bottom: 2px solid transparent;
+      margin-bottom: -1px;
+      cursor: pointer;
+      font-family: inherit;
+      &:hover {
+        color: ${t(colors.gray[800], colors.gray[200])};
+      }
+    `,
+    seoSubNavLabelActive: css`
+      color: ${t(colors.gray[900], colors.gray[100])};
+      border-bottom-color: ${t(colors.gray[900], colors.gray[100])};
+    `,
     seoPreviewSection: css`
       display: flex;
       flex-direction: row;

packages/devtools/src/tabs/seo-tab/index.tsx

@@ -1,10 +1,39 @@
+import { Show, createSignal } from 'solid-js'
 import { MainPanel } from '@tanstack/devtools-ui'
+import { useStyles } from '../../styles/use-styles'
 import { SocialPreviewsSection } from './social-previews'
+import { SerpPreviewSection } from './serp-preview'
+
+type SeoSubView = 'social-previews' | 'serp-preview'
 
 export const SeoTab = () => {
+  const [activeView, setActiveView] = createSignal<SeoSubView>('social-previews')
+  const styles = useStyles()
+
   return (
     <MainPanel withPadding>
-      <SocialPreviewsSection />
+      <nav class={styles().seoSubNav} aria-label="SEO sections">
+        <button
+          type="button"
+          class={`${styles().seoSubNavLabel} ${activeView() === 'social-previews' ? styles().seoSubNavLabelActive : ''}`}
+          onClick={() => setActiveView('social-previews')}
+        >
+          Social previews
+        </button>
+        <button
+          type="button"
+          class={`${styles().seoSubNavLabel} ${activeView() === 'serp-preview' ? styles().seoSubNavLabelActive : ''}`}
+          onClick={() => setActiveView('serp-preview')}
+        >
+          SERP Preview
+        </button>
+      </nav>
+      <Show when={activeView() === 'social-previews'}>
+        <SocialPreviewsSection noTitle />
+      </Show>
+      <Show when={activeView() === 'serp-preview'}>
+        <SerpPreviewSection noTitle />
+      </Show>
     </MainPanel>
   )
 }

packages/devtools/src/tabs/seo-tab/serp-preview.tsx

@@ -0,0 +1,38 @@
+import {
+  Section,
+  SectionDescription,
+  SectionIcon,
+  SectionTitle,
+} from '@tanstack/devtools-ui'
+import { PageSearch } from '@tanstack/devtools-ui/icons'
+
+const DUMMY_SERP = {
+  title: 'Example Page Title - Your Site Name',
+  description:
+    'This is a short meta description that shows how your page might appear in Google search results. Keep it under 160 characters.',
+  url: 'https://example.com/page-path',
+}
+
+export function SerpPreviewSection(props: { noTitle?: boolean } = {}) {
+  return (
+    <Section>
+      {!props.noTitle && (
+        <SectionTitle>
+          <SectionIcon>
+            <PageSearch />
+          </SectionIcon>
+          SERP Preview
+        </SectionTitle>
+      )}
+      <SectionDescription>
+        See how your title tag and meta description to see your website's SERP
+        snippet preview in Google search results.
+      </SectionDescription>
+      <div>
+        <p>{DUMMY_SERP.title}</p>
+        <p>{DUMMY_SERP.description}</p>
+        <p>{DUMMY_SERP.url}</p>
+      </div>
+    </Section>
+  )
+}

packages/devtools/src/tabs/seo-tab/social-previews.tsx

@@ -146,7 +146,7 @@ function SocialPreview(props: {
   )
 }
 
-export function SocialPreviewsSection() {
+export function SocialPreviewsSection(props: { noTitle?: boolean } = {}) {
   const [reports, setReports] = createSignal<Array<SocialReport>>(analyzeHead())
   const styles = useStyles()
 
@@ -184,12 +184,14 @@ export function SocialPreviewsSection() {
 
   return (
     <Section>
-      <SectionTitle>
-        <SectionIcon>
-          <SocialBubble />
-        </SectionIcon>
-        Social previews
-      </SectionTitle>
+      {!props.noTitle && (
+        <SectionTitle>
+          <SectionIcon>
+            <SocialBubble />
+          </SectionIcon>
+          Social previews
+        </SectionTitle>
+      )}
       <SectionDescription>
         See how your current page will look when shared on popular social
         networks. The tool checks for essential meta tags and highlights any