86 lines
2.7 KiB
TypeScript
86 lines
2.7 KiB
TypeScript
import Head from 'next/head';
|
|
import React from 'react';
|
|
import { useMeasure } from 'react-use';
|
|
import { NAVIGATION, METADATA } from '../constants';
|
|
import { SideMenuItem } from '../state/navigation';
|
|
import { generateTitle, generateURL } from '../utils/metadata';
|
|
|
|
function Roadmap() {
|
|
const [ref, { width, height }] = useMeasure();
|
|
const aspectRatio = width / height;
|
|
|
|
// Control the aspect ratio of the page images
|
|
const horizontal = width > 600 && aspectRatio > 0.65;
|
|
|
|
console.log('roadmap ➡️ horizontal:', horizontal);
|
|
|
|
console.log('roadmap ➡️ height:', height);
|
|
console.log('roadmap ➡️ width:', width);
|
|
console.log('roadmap ➡️ ratio:', aspectRatio);
|
|
|
|
const pageTitle = generateTitle(
|
|
NAVIGATION.SIDE_MENU_ITEMS[SideMenuItem.ROADMAP].label,
|
|
);
|
|
const pageURL = generateURL(
|
|
NAVIGATION.SIDE_MENU_ITEMS[SideMenuItem.ROADMAP].href,
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{pageTitle}</title>
|
|
<meta name="description" content={METADATA.ROADMAP.DESCRIPTION}></meta>
|
|
<meta property="og:title" content={pageTitle} key="ogtitle" />
|
|
<meta
|
|
property="og:description"
|
|
content={METADATA.ROADMAP.DESCRIPTION}
|
|
key="ogdesc"
|
|
/>
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:image" content={'site-banner.png'} key="ogimage" />
|
|
<meta property="og:url" content={pageURL} />
|
|
|
|
<link rel="canonical" href={pageURL}></link>
|
|
</Head>
|
|
|
|
<div className="mx-4">
|
|
<div className="flex items-center justify-center mt-8">
|
|
<img
|
|
style={{ maxHeight: '90%' }}
|
|
src={`img/roadmap-${horizontal ? 'x' : 'y'}.png`}
|
|
className="w-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div ref={ref} className="w-full h-full">
|
|
<div className="flex flex-col px-6 pb-6 space-y-10">
|
|
<div>
|
|
<h2 className="mt-6 mb-3 text-3xl font-medium text-center tablet:text-4xl font-prompt text-primary">
|
|
Session in 2021
|
|
</h2>
|
|
<img
|
|
style={{ maxHeight: horizontal ? '90%' : 'auto' }}
|
|
src={`img/session-${horizontal ? 'x' : 'y'}.jpg`}
|
|
className="w-full rounded-md"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 className="mt-6 mb-3 text-3xl font-medium text-center tablet:text-4xl font-prompt text-primary">
|
|
Lokinet in 2021
|
|
</h2>
|
|
<img
|
|
style={{ maxHeight: '90%' }}
|
|
src={`img/lokinet-${horizontal ? 'x' : 'y'}.jpg`}
|
|
className="w-full rounded-md"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Roadmap;
|