79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
const queries = [
|
|
{
|
|
query: 'openpanel analytics',
|
|
clicks: 312,
|
|
impressions: '4.1k',
|
|
pos: 1.2,
|
|
},
|
|
{
|
|
query: 'open source mixpanel alternative',
|
|
clicks: 187,
|
|
impressions: '3.8k',
|
|
pos: 2.4,
|
|
},
|
|
{
|
|
query: 'web analytics without cookies',
|
|
clicks: 98,
|
|
impressions: '2.2k',
|
|
pos: 4.7,
|
|
},
|
|
];
|
|
|
|
export function GoogleSearchConsoleIllustration() {
|
|
return (
|
|
<div className="col h-full gap-2 px-4 pt-5 pb-3">
|
|
{/* Top stats */}
|
|
<div className="row mb-1 gap-2">
|
|
<div className="col flex-1 gap-0.5 rounded-lg border bg-card px-2.5 py-2">
|
|
<span className="text-[8px] text-muted-foreground uppercase tracking-wider">
|
|
Clicks
|
|
</span>
|
|
<span className="font-bold font-mono text-sm">740</span>
|
|
</div>
|
|
<div className="col flex-1 gap-0.5 rounded-lg border bg-card px-2.5 py-2">
|
|
<span className="text-[8px] text-muted-foreground uppercase tracking-wider">
|
|
Impr.
|
|
</span>
|
|
<span className="font-bold font-mono text-sm">13k</span>
|
|
</div>
|
|
<div className="col flex-1 gap-0.5 rounded-lg border bg-card px-2.5 py-2">
|
|
<span className="text-[8px] text-muted-foreground uppercase tracking-wider">
|
|
Avg. CTR
|
|
</span>
|
|
<span className="font-bold font-mono text-sm">5.7%</span>
|
|
</div>
|
|
<div className="col flex-1 gap-0.5 rounded-lg border bg-card px-2.5 py-2">
|
|
<span className="text-[8px] text-muted-foreground uppercase tracking-wider">
|
|
Avg. Pos
|
|
</span>
|
|
<span className="font-bold font-mono text-sm">2.8</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Query table */}
|
|
<div className="flex-1 overflow-hidden rounded-xl border border-border bg-card">
|
|
<div className="row border-border border-b px-3 py-1.5">
|
|
<span className="flex-1 text-[8px] text-muted-foreground uppercase tracking-wider">
|
|
Query
|
|
</span>
|
|
<span className="w-10 text-right text-[8px] text-muted-foreground uppercase tracking-wider">
|
|
Pos
|
|
</span>
|
|
</div>
|
|
{queries.map((q, i) => (
|
|
<div
|
|
className="row items-center border-border/50 border-b px-3 py-1.5 last:border-0"
|
|
key={q.query}
|
|
style={{ opacity: 1 - i * 0.18 }}
|
|
>
|
|
<span className="flex-1 truncate text-[9px]">{q.query}</span>
|
|
<span className="w-10 text-right font-mono text-[9px] text-muted-foreground">
|
|
{q.pos}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|