SearchConsolePage

Code

import { SearchConsolePage } from "@fadymondy/nasaq/web";import { useState } from "react";export function Seo({ service, data }: { service: React.ComponentProps<typeof SearchConsolePage>["service"]; data?: React.ComponentProps<typeof SearchConsolePage>["data"] }) {  const [period, setPeriod] = useState(28);  return <SearchConsolePage service={service} data={data} site="nasaq.dev" period={period} onPeriodChange={setPeriod} onConnect={async () => {}} onDisconnect={async () => {}} />;}

SEO · beta

Live examples and controls: SearchConsolePage in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/search-console-page.json

The Search Console page shows how a site performs in Google Search. Four MetricTiles (clicks, impressions, CTR, average position) select the metric a TimeSeriesPanel charts, with the previous period as comparison. Tabs hold SearchPerformanceTable for queries and pages, GeoList for countries and a devices BreakdownTable. Average position is lower-is-better everywhere. Until connected it shows AnalyticsConnect; the name is text, not a logo.

When to useCopy Anchor Link

• SEO reporting for a verified site.
• Any host that reads the Search Analytics API.

When not to useCopy Anchor Link

• Traffic on your site: use GoogleAnalyticsPage.
• Rank tracking by keyword over time: compose TimeSeriesPanel.

ImportCopy Anchor Link

import { SearchConsolePage } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

import { SearchConsolePage } from "@fadymondy/nasaq/web";
import { useState } from "react";

export function Seo({ service, data }: { service: React.ComponentProps<typeof SearchConsolePage>["service"]; data?: React.ComponentProps<typeof SearchConsolePage>["data"] }) {
  const [period, setPeriod] = useState(28);
  return <SearchConsolePage service={service} data={data} site="nasaq.dev" period={period} onPeriodChange={setPeriod} onConnect={async () => {}} onDisconnect={async () => {}} />;
}

AnatomyCopy Anchor Link

SearchConsolePage      AnalyticsPageFrame
  MetricTiles          selectable; drives the chart
  TimeSeriesPanel      clicks | impressions | CTR | position
  Tabs (underline)     Queries | Pages | Countries | Devices

APICopy Anchor Link

SearchConsolePageCopy Anchor Link

SearchConsoleDataCopy Anchor Link

summary (clicks, impressions, ctr as a fraction, position; each { value, previous?, trend? }), series (rows of date, clicks, impressions, ctr, position), previousSeries?, queries, pages (SearchPerformanceRow[]), countries (GeoRow[]) and devices (BreakdownRow[]).

ExamplesCopy Anchor Link

Open a query:

import { SearchConsolePage, type IntegrationService } from "@fadymondy/nasaq/web";

export const Drill = ({ service }: { service: IntegrationService }) => (
  <SearchConsolePage service={service} period={28} onPeriodChange={() => {}} onRowClick={(row, kind) => console.log(kind, row.label)} onConnect={async () => {}} onDisconnect={async () => {}} />
);

Sign-in expired:

import { SearchConsolePage } from "@fadymondy/nasaq/web";

export const Expired = () => (
  <SearchConsolePage
    service={{ id: "gsc", name: "Search Console", scopes: [{ id: "webmasters.readonly", label: "See your Search Console data", required: true }], status: "needs-reauth" }}
    period={28}
    onPeriodChange={() => {}}
    onConnect={async () => {}}
    onDisconnect={async () => {}}
  />
);

AccessibilityCopy Anchor Link

The page has one h1; tabs follow the WAI-ARIA tabs pattern (arrow keys move, the panel is labelled by its tab). Charts and tables carry text alternatives. Disconnect asks for confirmation. Localise every string you override through labels.

RTL & i18nCopy Anchor Link

• The whole page mirrors; charts run right to left.
• URLs, paths and identifiers stay left-to-right inside Arabic text.
• Every figure uses the active locale with Western digits and is bidi-isolated (Num), so +12.4% keeps its order in Arabic.
• Queries follow their own direction; page URLs stay left-to-right.

Styling & tokensCopy Anchor Link

• Colours come from tokens (--primary, --nq-success, --nq-warning, --nq-danger, --nq-tag-*); never pass raw hex.
• Composed from tokens only; extend with className.

Do / Don'tCopy Anchor Link

• Do give position a previous value; a lower number shows as an improvement.
• Do pass CTR as the API returns it.
• Don't draw a Search Console logo yourself; use only the official asset.

RelatedCopy Anchor Link

• metric-tiles
• time-series-panel
• search-performance-table
• geo-list
• breakdown-table
• analytics-connect

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-seo-pages-search-console--docs