DMleadgen
46d973904b
Next.js website for Rocky Mountain Vending company featuring: - Product catalog with Stripe integration - Service areas and parts pages - Admin dashboard with Clerk authentication - SEO optimized pages with JSON-LD structured data Co-authored-by: Cursor <cursoragent@cursor.com>
106 lines
2.9 KiB
Text
106 lines
2.9 KiB
Text
/**
|
|
* @license
|
|
* Copyright 2021 Google LLC
|
|
* SPDX-License-Identifier: Apache-2.0
|
|
*/
|
|
|
|
import {FunctionComponent} from 'preact';
|
|
|
|
import {ReportUtils} from '../../../report/renderer/report-utils.js';
|
|
import {Separator} from '../common';
|
|
import {useI18n, useLocalizedStrings} from '../i18n/i18n';
|
|
import {CpuIcon, EnvIcon, NetworkIcon, SummaryIcon} from '../icons';
|
|
import {classNames, useHashState, useFlowResult} from '../util';
|
|
import {SidebarFlow} from './flow';
|
|
|
|
const SidebarSummary: FunctionComponent = () => {
|
|
const hashState = useHashState();
|
|
const strings = useLocalizedStrings();
|
|
|
|
return (
|
|
<a
|
|
href="#"
|
|
className={classNames('SidebarSummary', {'Sidebar--current': hashState === null})}
|
|
data-testid="SidebarSummary"
|
|
>
|
|
<div className="SidebarSummary__icon">
|
|
<SummaryIcon/>
|
|
</div>
|
|
<div className="SidebarSummary__label">{strings.summary}</div>
|
|
</a>
|
|
);
|
|
};
|
|
|
|
const SidebarRuntimeSettings: FunctionComponent<{settings: LH.ConfigSettings}> =
|
|
({settings}) => {
|
|
const strings = useLocalizedStrings();
|
|
const env = ReportUtils.getEmulationDescriptions(settings);
|
|
const deviceEmulationString = env.screenEmulation ?
|
|
`${env.deviceEmulation} - ${env.screenEmulation}` :
|
|
env.deviceEmulation;
|
|
|
|
return (
|
|
<div className="SidebarRuntimeSettings">
|
|
<div className="SidebarRuntimeSettings__item" title={strings.runtimeSettingsDevice}>
|
|
<div className="SidebarRuntimeSettings__item--icon">
|
|
<EnvIcon/>
|
|
</div>
|
|
{
|
|
deviceEmulationString
|
|
}
|
|
</div>
|
|
<div
|
|
className="SidebarRuntimeSettings__item"
|
|
title={strings.runtimeSettingsNetworkThrottling}
|
|
>
|
|
<div className="SidebarRuntimeSettings__item--icon">
|
|
<NetworkIcon/>
|
|
</div>
|
|
{
|
|
env.summary
|
|
}
|
|
</div>
|
|
<div className="SidebarRuntimeSettings__item" title={strings.runtimeSettingsCPUThrottling}>
|
|
<div className="SidebarRuntimeSettings__item--icon">
|
|
<CpuIcon/>
|
|
</div>
|
|
{
|
|
`${settings.throttling.cpuSlowdownMultiplier}x slowdown`
|
|
}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const SidebarHeader: FunctionComponent<{title: string, date: string}> = ({title, date}) => {
|
|
const i18n = useI18n();
|
|
return (
|
|
<div className="SidebarHeader">
|
|
<div className="SidebarHeader__title">{title}</div>
|
|
<div className="SidebarHeader__date">{i18n.formatter.formatDateTime(date)}</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const Sidebar: FunctionComponent = () => {
|
|
const flowResult = useFlowResult();
|
|
const firstLhr = flowResult.steps[0].lhr;
|
|
return (
|
|
<div className="Sidebar">
|
|
<SidebarHeader title={flowResult.name} date={firstLhr.fetchTime}/>
|
|
<Separator/>
|
|
<SidebarSummary/>
|
|
<Separator/>
|
|
<SidebarFlow/>
|
|
<Separator/>
|
|
<SidebarRuntimeSettings settings={firstLhr.configSettings}/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export {
|
|
SidebarSummary,
|
|
SidebarRuntimeSettings,
|
|
SidebarHeader,
|
|
Sidebar,
|
|
};
|