Planner page

nextjs/app/[locale]/(frontend)/planner/loading.js

@@ -0,0 +1,9 @@
+/* * */
+
+import Loader from '@/components/Loader/Loader';
+
+/* * */
+
+export default function Loading() {
+  return <Loader visible full />;
+}

nextjs/app/[locale]/(frontend)/planner/opengraph-image.js

@@ -0,0 +1,40 @@
+/* * */
+
+import fs from 'fs';
+import { ImageResponse } from 'next/og';
+import OpenGraphDefault from 'opengraph/OpenGraphDefault';
+import OpenGraphLinesDefault from 'opengraph/OpenGraphLinesDefault';
+import OpenGraphLinesDynamic from 'opengraph/OpenGraphLinesDynamic';
+
+/* * */
+
+export const alt = 'Perguntas frequentes';
+export const size = { width: 1200, height: 630 };
+export const contentType = 'image/png';
+
+/* * */
+
+export default async function Image({ params }) {
+  //
+
+  //
+  // A. Setup fonts
+
+  const customFonts = [
+    { name: 'Inter', style: 'normal', weight: 500, data: fs.readFileSync(`${process.cwd()}/assets/fonts/Inter-Medium.ttf`).buffer },
+    { name: 'Inter', style: 'normal', weight: 600, data: fs.readFileSync(`${process.cwd()}/assets/fonts/Inter-SemiBold.ttf`).buffer },
+    { name: 'Inter', style: 'normal', weight: 700, data: fs.readFileSync(`${process.cwd()}/assets/fonts/Inter-Bold.ttf`).buffer },
+  ];
+
+  //
+  // B. Fetch data
+
+  // const lineData = await fetch(params.line_id?.length && `https://api.carrismetropolitana.pt/lines/${params.line_id}`).then((res) => res.json());
+
+  //
+  // D. Render dynamic component
+
+  return new ImageResponse(<OpenGraphDefault />, { ...size, fonts: customFonts });
+
+  //
+}

nextjs/app/[locale]/(frontend)/planner/page.js

@@ -0,0 +1,40 @@
+/* * */
+
+import { OneFullColumn } from '@/components/Layouts/Layouts';
+import FrontendPlanner from '@/components/FrontendPlanner/FrontendPlanner';
+
+/* * */
+
+export async function generateMetadata({ params }) {
+  //
+
+  // A. Fetch line data
+
+  // B. Render the titles
+  switch (params.locale) {
+    case 'pt':
+      return { title: 'Perguntas frequentes', description: 'Esclareça as dúvidas frequentes' };
+    default:
+    case 'en':
+      return { title: 'Frequently asked questions', description: 'Clarify your frequently asked questions' };
+  }
+
+  //
+}
+
+/* * */
+
+export default function Page({ params }) {
+  //
+
+  //
+  // A. Render components
+
+  return (
+    <OneFullColumn>
+        <FrontendPlanner />
+    </OneFullColumn>
+  );
+
+  //
+}

nextjs/components/FrontendPlanner/FrontendPlanner.js

@@ -0,0 +1,14 @@
+import { getTranslations } from "next-intl/server";
+import Panel from "../Panel/Panel";
+import FrontendPlannerVideo from "../FrontendPlannerVideo/FrontendPlannerVideo";
+
+export default async function FrontendPlanner({}){
+
+  let t = await getTranslations('FrontendPlanner');
+  return (
+    <Panel title={t('Panel_title')} rightSection={<FrontendPlannerVideo/>}>
+      <iframe style={{width:"100%",height:"600px",border:"none"}} src="https://moovitapp.com?customerId=3j8VGq2ULSUEr275vf81zA&amp;metroId=2460&amp;lang=pt" allow="geolocation 'src' 'self' https://moovitapp.com"></iframe>
+    </Panel>
+  )
+}
+

nextjs/components/FrontendPlannerVideo/FrontendPlannerVideo.js

@@ -0,0 +1,52 @@
+"use client"
+
+/* * */
+
+import { Modal, Button, ActionIcon } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconX } from "@tabler/icons-react";
+import { useTranslations } from "next-intl";
+import styles from './FrontendPlannerVideo.module.css';
+
+/* * */
+
+export default function FrontendPlannerVideo() {
+  //
+
+  //
+  // A. Setup variables
+
+  const [opened, { open, close }] = useDisclosure(false);
+  const t = useTranslations("FrontendPlanner");
+
+  console.log(styles)
+  //
+  // B. Render components
+
+  return (
+    <>
+      <Modal.Root opened={opened} onClose={close} centered size="calc(100vw - 3rem)" >
+        <Modal.Overlay />
+        <Modal.Content>
+          <Modal.Header classNames={{header:styles.modalHeader}} >
+            <h3>{t('how_to_use')}</h3>
+            <ActionIcon variant="subtle" color="white" size="md" aria-label="close" onClick={close}>
+              <IconX />
+            </ActionIcon>
+          </Modal.Header>
+          <Modal.Body p={0} className={styles.modalBody}> 
+            <iframe src="https://www.youtube-nocookie.com/embed/cckWfHTyDwQ" className={styles.iframe} frameborder="0" allow="autoplay; encrypted-media; picture-in-picture; web-share" allowfullscreen></iframe>
+          </Modal.Body>
+        </Modal.Content>
+      </Modal.Root>
+
+      <Button variant="default" leftSection={<svg xmlns='http://www.w3.org/2000/svg' width={16} height={16} viewBox='0 0 24 24' >
+        <path d='M3 22v-20l18 10-18 10z' />
+      </svg>}
+        onClick={open}>{t('open')}</Button>
+    </>
+  );
+
+  //
+}
+

nextjs/components/FrontendPlannerVideo/FrontendPlannerVideo.module.css

@@ -0,0 +1,15 @@
+.modalHeader {
+  background-color: black;
+  color: white;
+}
+
+.modalBody {
+  display: flex;
+  flex-direction: column;
+  background-color: black;
+}
+
+.iframe {
+  width: 100%;
+  aspect-ratio: 16/9;
+}

nextjs/translations/pt.json

@@ -1008,5 +1008,10 @@
     },
     "FrontendAlert": {
         "period": "Período"
+    },
+    "FrontendPlanner": {
+        "Panel_title": "Planeador de viagens",
+        "open": "Saiba como usar",
+        "how_to_use": "Como usar o planeador"
     }
 }