70 lines
2.2 KiB
TypeScript
70 lines
2.2 KiB
TypeScript
import { useMeasure } from 'react-use';
|
|
|
|
import { NAVIGATION, METADATA } from '../constants';
|
|
import { SideMenuItem } from '../state/navigation';
|
|
|
|
import CustomHead from '../components/CustomHead';
|
|
|
|
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);
|
|
|
|
return (
|
|
<>
|
|
<CustomHead
|
|
title={NAVIGATION.SIDE_MENU_ITEMS[SideMenuItem.ROADMAP].label}
|
|
metadata={METADATA.ROADMAP_PAGE}
|
|
/>
|
|
<div className="mx-4">
|
|
<div className="flex items-center justify-center mt-8">
|
|
<img
|
|
style={{ maxHeight: '90%' }}
|
|
src={`img/roadmap-${horizontal ? 'x' : 'y'}.png`}
|
|
alt="Oxen's Roadmap and Plans for the future."
|
|
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'}.png`}
|
|
alt="Session's Roadmap and Plans for the future."
|
|
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'}.png`}
|
|
alt="Lokinet's Roadmap and Plans for the future."
|
|
className="w-full rounded-md"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Roadmap;
|