50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import { GscBreakdownTable } from '@/components/page/gsc-breakdown-table';
|
|
import { GscClicksChart } from '@/components/page/gsc-clicks-chart';
|
|
import { PageViewsChart } from '@/components/page/page-views-chart';
|
|
import { SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
|
|
|
|
type Props = {
|
|
type: 'page' | 'query';
|
|
projectId: string;
|
|
value: string;
|
|
};
|
|
|
|
export default function PageDetails({ type, projectId, value }: Props) {
|
|
return (
|
|
<SheetContent className="flex flex-col gap-6 overflow-y-auto sm:max-w-xl">
|
|
<SheetHeader>
|
|
<SheetTitle className="truncate pr-8 font-medium font-mono text-sm">
|
|
{value}
|
|
</SheetTitle>
|
|
</SheetHeader>
|
|
|
|
<div className="col gap-6">
|
|
{type === 'page' &&
|
|
(() => {
|
|
let origin: string;
|
|
let path: string;
|
|
try {
|
|
const url = new URL(value);
|
|
origin = url.origin;
|
|
path = url.pathname + url.search;
|
|
} catch {
|
|
// value is path-only (e.g. "/docs/foo")
|
|
origin =
|
|
typeof window !== 'undefined' ? window.location.origin : '';
|
|
path = value;
|
|
}
|
|
return (
|
|
<PageViewsChart
|
|
origin={origin}
|
|
path={path}
|
|
projectId={projectId}
|
|
/>
|
|
);
|
|
})()}
|
|
<GscClicksChart projectId={projectId} type={type} value={value} />
|
|
<GscBreakdownTable projectId={projectId} type={type} value={value} />
|
|
</div>
|
|
</SheetContent>
|
|
);
|
|
}
|