import { Icon, Button, Flexbox, Text } from 'react-basics'; import Link from 'next/link'; import { GridRow, GridColumn } from 'components/layout/Grid'; import BrowsersTable from 'components/metrics/BrowsersTable'; import CountriesTable from 'components/metrics/CountriesTable'; import DevicesTable from 'components/metrics/DevicesTable'; import LanguagesTable from 'components/metrics/LanguagesTable'; import OSTable from 'components/metrics/OSTable'; import PagesTable from 'components/metrics/PagesTable'; import QueryParametersTable from 'components/metrics/QueryParametersTable'; import ReferrersTable from 'components/metrics/ReferrersTable'; import ScreenTable from 'components/metrics/ScreenTable'; import EventsTable from 'components/metrics/EventsTable'; import Icons from 'components/icons'; import SideNav from 'components/layout/SideNav'; import usePageQuery from 'hooks/usePageQuery'; import useMessages from 'hooks/useMessages'; import styles from './WebsiteMenuView.module.css'; const views = { url: PagesTable, title: PagesTable, referrer: ReferrersTable, browser: BrowsersTable, os: OSTable, device: DevicesTable, screen: ScreenTable, country: CountriesTable, language: LanguagesTable, event: EventsTable, query: QueryParametersTable, }; export default function WebsiteMenuView({ websiteId, websiteDomain }) { const { formatMessage, labels } = useMessages(); const { resolveUrl, query: { view }, } = usePageQuery(); const items = [ { key: 'url', label: formatMessage(labels.pages), url: resolveUrl({ view: 'url' }), }, { key: 'referrer', label: formatMessage(labels.referrers), url: resolveUrl({ view: 'referrer' }), }, { key: 'browser', label: formatMessage(labels.browsers), url: resolveUrl({ view: 'browser' }), }, { key: 'os', label: formatMessage(labels.os), url: resolveUrl({ view: 'os' }), }, { key: 'device', label: formatMessage(labels.devices), url: resolveUrl({ view: 'device' }), }, { key: 'country', label: formatMessage(labels.countries), url: resolveUrl({ view: 'country' }), }, { key: 'language', label: formatMessage(labels.languages), url: resolveUrl({ view: 'language' }), }, { key: 'screen', label: formatMessage(labels.screens), url: resolveUrl({ view: 'screen' }), }, { key: 'event', label: formatMessage(labels.events), url: resolveUrl({ view: 'event' }), }, { key: 'query', label: formatMessage(labels.query), url: resolveUrl({ view: 'query' }), }, ]; const DetailsComponent = views[view] || (() => null); return ( ); }