implement new movie page

src/components/buttons/BackButton.tsx

@@ -2,10 +2,15 @@ import Link from "next/link";
 import { MdArrowBack } from "react-icons/md";
 import { useLocaleText } from "@services/i18n/i18n";
 
-const BackButton = () => {
+type BackButtonProps = {
+  href?: string;
+};
+
+const BackButton = ({ href }: BackButtonProps) => {
   const { t } = useLocaleText("@components/buttons/BackButton");
+  href = href || "/";
   return (
-    <Link href="/">
+    <Link href={href}>
       <MdArrowBack
         size="2rem"
         title={t("target")}

src/pages/movies3/[id].tsx → src/pages/movies/[id].tsx

@@ -1,12 +1,11 @@
 import type { NextPage, GetStaticProps, GetStaticPaths } from "next";
-import Image from "next/image";
 import { BackButton } from "@components/buttons/BackButton";
 
 import { Locale, Locales } from "@services/i18n/i18n";
 import { MovieData } from ".";
 
 type PageProps = {
-  data: MovieData[];
+  data: MovieData | undefined;
   id: string;
 };
 
@@ -31,11 +30,11 @@ export const getStaticPaths: GetStaticPaths<PathParams> = async () => {
 export const getStaticProps: GetStaticProps<PageProps> = async ({ locale, params }) => {
   const id = (params?.id as string) || "";
   locale = locale as Locale;
-  const data =
+  const allData =
     locale === "ja"
       ? (await import(`json_in_repo/movies/ja.json`)).default
       : (await import(`json_in_repo/movies/en.json`)).default;
-
+  const data = allData.find(({ id: _id }) => _id === id);
   return {
     props: { data, id },
   };
@@ -45,32 +44,30 @@ const HeaderBar = () => {
   return (
     <div className="sticky top-0 flex w-full items-center bg-base-100/80 backdrop-blur-sm">
       <div className="ml-2">
-        <BackButton />
+        <BackButton href="./" />
       </div>
     </div>
   );
 };
 
 const Card = ({ data }: { data: MovieData["data"] }) => {
   return (
-    <div
-      style={{ width: data.thumbnail_width }}
-      className="w-[fit-content] rounded-md drop-shadow-md 
-      transition hover:opacity-60  hover:drop-shadow-xl"
-    >
-      <Image
-        width={data.thumbnail_width}
-        height={data.thumbnail_height}
-        src={data.thumbnail_url_with_play_button}
-        alt={data.title}
-      />
+    <div>
+      <HeaderBar />
+      <div className="relative p-0 pt-[56.25%]">
+        <iframe
+          src={data.player_url}
+          className="absolute left-0 top-0 h-full w-full border-0"
+        ></iframe>
+      </div>
+
       <div className="bg-base-200 p-3">{data.title}</div>
     </div>
   );
 };
 
 const QandAPage: NextPage<PageProps> = ({ data, id }: PageProps) => {
-  return <>{id}</>;
+  return <>{data ? <Card data={data.data} /> : `not found ${id}`}</>;
 };
 
 export default QandAPage;

src/pages/movies3/index.tsx → src/pages/movies/index.tsx

@@ -1,6 +1,7 @@
 import type { NextPage, GetStaticProps } from "next";
 import Head from "next/head";
 import Image from "next/image";
+import Link from "next/link";
 import { BackButton } from "@components/buttons/BackButton";
 
 import { Locale } from "@services/i18n/i18n";
@@ -63,13 +64,15 @@ const Card = ({ data }: { data: MovieData["data"] }) => {
       className="w-[fit-content] rounded-md drop-shadow-md 
       transition hover:opacity-60  hover:drop-shadow-xl"
     >
-      <Image
-        width={data.thumbnail_width}
-        height={data.thumbnail_height}
-        src={data.thumbnail_url_with_play_button}
-        alt={data.title}
-      />
-      <div className="bg-base-200 p-3">{data.title}</div>
+      <Link href={`./movies/${data.id}`}>
+        <Image
+          width={data.thumbnail_width}
+          height={data.thumbnail_height}
+          src={data.thumbnail_url_with_play_button}
+          alt={data.title}
+        />
+        <div className="bg-base-200 p-3">{data.title}</div>
+      </Link>
     </div>
   );
 };

src/services/urls.ts

@@ -33,13 +33,4 @@ const isValidItemUrlOrId = (urlOrId: string) => {
   return isValidShortId(id);
 };
 
-export {
-  origin,
-  useFullUrl,
-  itemUrlToId,
-  isValidItemUrlOrId,
-  itemIdToUrl,
-  objectiveIdToUrl,
-  qAndAUrl,
-  moviesDataUrl,
-};
+export { origin, useFullUrl, itemUrlToId, isValidItemUrlOrId, itemIdToUrl, objectiveIdToUrl };