Change Choices component to astro component

src/views/Choices/Choices.tsx → src/components/VideoPlayer.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useState } from "react";
-import ProgressButton from "../../components/ProgressButton";
-import useMediaQuery from "../../hooks/useMediaQuery";
-import Video from "../../components/Video";
-import Icon from "../../components/Icon";
-import "./Choices.scss";
+import ProgressButton from "./ProgressButton";
+import useMediaQuery from "../hooks/useMediaQuery";
+import Video from "./Video";
+import Icon from "./Icon";
+import "../views/Choices/Choices.scss";
 
-const Choices = () => {
+const VideoPlayer = () => {
   const [position, setPosition] = useState(0);
   const theme = useMediaQuery("(prefers-color-scheme: dark)")
     ? "dark"
@@ -37,9 +37,6 @@ const Choices = () => {
   }, [position, duration, isMobile]);
 
   return (
-    <section className="choices" id="Features">
-      <h2>Euer Board – Eure Entscheidungen.</h2>
-      <p>Wählt eine beliebige Retrospektive, die zu eurem Team passt.</p>
       <div className="choices__content">
         <div className="choices__buttons">
           <ProgressButton
@@ -136,8 +133,7 @@ const Choices = () => {
           </ul>
         </div>
       </div>
-    </section>
   );
-};
+}
 
-export default Choices;
+export default VideoPlayer;

src/pages/[lang]/index.astro

@@ -1,7 +1,7 @@
 ---
 import type { GetStaticPaths } from "astro";
 import ReachNewHeights from "../../views/ReachNewHeights/ReachNewHeights.astro";
-import Choices from "../../views/Choices/Choices";
+import Choices from "../../views/Choices/Choices.astro";
 import Uniqueness from "../../views/Uniqueness/Uniqueness.astro";
 import Mobile from "../../views/Mobile/Mobile.astro";
 import Layout from "../../layouts/Layout.astro";
@@ -20,7 +20,7 @@ export const getStaticPaths = (() => {
 
 <Layout title="Scrumlr">
   <ReachNewHeights />
-  <Choices client:visible />
+  <Choices />
   <Uniqueness />
   <Mobile />
   <Features />

src/views/Choices/Choices.astro

@@ -0,0 +1,15 @@
+---
+import VideoPlayer from "../../components/VideoPlayer";
+import getTranslatedContent from "../../utils/directus";
+import "./Choices.scss";
+
+const {lang} = Astro.params;
+const content = await getTranslatedContent("Choices_Section", lang!);
+---
+
+<section class="choices" id="Features">
+  <h2>{content.header}</h2>
+  <p>{content.text}</p>
+  <VideoPlayer client:visible />
+</section>
+