97 lines
3.0 KiB
TypeScript
Executable File
97 lines
3.0 KiB
TypeScript
Executable File
import React, {
|
|
cloneElement,
|
|
Fragment,
|
|
ReactElement,
|
|
ReactNode,
|
|
useState,
|
|
} from 'react';
|
|
import {DateRangeValue} from '@common/ui/forms/input-field/date/date-range-picker/date-range-value';
|
|
import {DateRangePresets} from '@common/ui/forms/input-field/date/date-range-picker/dialog/date-range-presets';
|
|
import {ReportDateSelector} from '@common/admin/analytics/report-date-selector';
|
|
import {Trans} from '@common/i18n/trans';
|
|
import {InsightsChartsContext} from '@app/admin/reports/insights/insights-charts-context';
|
|
import {IconButton} from '@common/ui/buttons/icon-button';
|
|
import {ArrowBackIcon} from '@common/icons/material/ArrowBack';
|
|
import {Link} from 'react-router-dom';
|
|
import {StaticPageTitle} from '@common/seo/static-page-title';
|
|
|
|
interface Props {
|
|
children: ReactNode;
|
|
reportModel: string;
|
|
name: string;
|
|
backLink?: string;
|
|
title?: ReactElement;
|
|
}
|
|
export function ModelInsightsPageLayout({
|
|
children,
|
|
reportModel,
|
|
title,
|
|
name,
|
|
backLink,
|
|
}: Props) {
|
|
const [dateRange, setDateRange] = useState<DateRangeValue>(() => {
|
|
// This week
|
|
return DateRangePresets[2].getRangeValue();
|
|
});
|
|
return (
|
|
<Fragment>
|
|
<StaticPageTitle>
|
|
<Trans message=":name insights" values={{name}} />
|
|
</StaticPageTitle>
|
|
<div className="h-full flex flex-col">
|
|
<div className="flex-auto bg-cover relative">
|
|
<div className="min-h-full p-12 md:p-24 overflow-x-hidden max-w-[1600px] mx-auto flex flex-col">
|
|
<div className="flex-auto">
|
|
<div className="md:flex items-center gap-12 h-48 mt-14 mb-38">
|
|
<IconButton
|
|
elementType={Link}
|
|
to={backLink || '../../'}
|
|
relative="path"
|
|
className="text-muted"
|
|
>
|
|
<ArrowBackIcon />
|
|
</IconButton>
|
|
{title}
|
|
<div className="ml-auto flex-shrink-0 flex items-center justify-between gap-10 md:gap-24">
|
|
<ReportDateSelector
|
|
value={dateRange}
|
|
onChange={setDateRange}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<InsightsChartsContext.Provider
|
|
value={{dateRange, model: reportModel}}
|
|
>
|
|
{children}
|
|
</InsightsChartsContext.Provider>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Fragment>
|
|
);
|
|
}
|
|
|
|
interface ModelInsightsPageTitleProps {
|
|
image: ReactElement<{size: string; className: string}>;
|
|
name: ReactElement;
|
|
description?: ReactElement;
|
|
}
|
|
export function ModelInsightsPageTitle({
|
|
image,
|
|
name,
|
|
description,
|
|
}: ModelInsightsPageTitleProps) {
|
|
return (
|
|
<div className="flex items-center gap-10">
|
|
{cloneElement(image, {size: 'w-48 h-48', className: 'rounded'})}
|
|
<div>
|
|
<h1 className="text-base whitespace-nowrap overflow-hidden overflow-ellipsis">
|
|
“{name}“ <Trans message="insights" />
|
|
</h1>
|
|
{description && <div className="text-muted text-sm">{description}</div>}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|