| 1 |
import React, { useState } from "react"; |
| 2 |
import "../scss/dashboard.scss"; |
| 3 |
import { PageHeader, AnalyticsNav } from "./Chrome"; |
| 4 |
import { |
| 5 |
OverviewTeaser, |
| 6 |
AiTrafficTeaser, |
| 7 |
ArticlesTeaser, |
| 8 |
SearchTeaser, |
| 9 |
EngagementTeaser, |
| 10 |
FeedbackTeaser, |
| 11 |
LinksTeaser, |
| 12 |
AuthorsTeaser, |
| 13 |
SettingsTeaser |
| 14 |
} from "./modules/Teasers"; |
| 15 |
|
| 16 |
/* Every route is a Pro teaser in Free — none operate on a live date window, |
| 17 |
so the date-range filter is hidden throughout. */ |
| 18 |
const NO_FILTERS = [ "overview", "ai-traffic", "settings", "articles", "search", "engagement", "feedback", "links", "authors" ]; |
| 19 |
|
| 20 |
export default function Dashboard() { |
| 21 |
const [ route, setRoute ] = useState( "overview" ); |
| 22 |
const [ days, setDays ] = useState( 30 ); |
| 23 |
|
| 24 |
const nav = ( id ) => { |
| 25 |
setRoute( id ); |
| 26 |
window.scrollTo( { top: 0 } ); |
| 27 |
}; |
| 28 |
|
| 29 |
return ( |
| 30 |
<div className="bda-app"> |
| 31 |
<div className="bda-container"> |
| 32 |
<PageHeader |
| 33 |
route={ route } |
| 34 |
days={ days } |
| 35 |
onDays={ setDays } |
| 36 |
showFilters={ ! NO_FILTERS.includes( route ) } |
| 37 |
/> |
| 38 |
<div className="bda-shell"> |
| 39 |
<AnalyticsNav active={ route } onNav={ nav } /> |
| 40 |
<main className="bda-main"> |
| 41 |
{ route === "overview" && <OverviewTeaser /> } |
| 42 |
{ route === "ai-traffic" && <AiTrafficTeaser /> } |
| 43 |
{ route === "articles" && <ArticlesTeaser /> } |
| 44 |
{ route === "search" && <SearchTeaser /> } |
| 45 |
{ route === "engagement" && <EngagementTeaser /> } |
| 46 |
{ route === "feedback" && <FeedbackTeaser /> } |
| 47 |
{ route === "links" && <LinksTeaser /> } |
| 48 |
{ route === "authors" && <AuthorsTeaser /> } |
| 49 |
{ route === "settings" && <SettingsTeaser /> } |
| 50 |
</main> |
| 51 |
</div> |
| 52 |
</div> |
| 53 |
</div> |
| 54 |
); |
| 55 |
} |
| 56 |
|
