From eaefb52dca20c5236e11fbe3428c55a2283456a8 Mon Sep 17 00:00:00 2001
From: lucas <lucas.solcher@digitalservice.bund.de>
Date: Fri, 18 Oct 2024 15:21:21 +0200
Subject: [PATCH] Add Prinzip subpage

---
 ...igitaltauglichkeit.prinzipien.$prinzip.tsx | 45 +++++++++++++++++++
 .../digitaltauglichkeit.prinzipien/route.tsx  | 17 ++++---
 2 files changed, 53 insertions(+), 9 deletions(-)
 create mode 100644 packages/dito/app/routes/digitaltauglichkeit.prinzipien.$prinzip.tsx

diff --git a/packages/dito/app/routes/digitaltauglichkeit.prinzipien.$prinzip.tsx b/packages/dito/app/routes/digitaltauglichkeit.prinzipien.$prinzip.tsx
new file mode 100644
index 0000000..fd1e10b
--- /dev/null
+++ b/packages/dito/app/routes/digitaltauglichkeit.prinzipien.$prinzip.tsx
@@ -0,0 +1,45 @@
+import Background from "@digitalcheck/shared/components/Background.tsx";
+import Container from "@digitalcheck/shared/components/Container.tsx";
+import { json, useLoaderData, useOutletContext } from "@remix-run/react";
+
+import DetailInfo from "@digitalcheck/shared/components/DetailInfo.tsx";
+import { LoaderFunction } from "@remix-run/node";
+import { type Prinzip } from "../utils/strapiData.server.ts";
+
+export const loader: LoaderFunction = async ({ params }) => {
+  const slug = params.prinzip;
+  if (!slug) throw new Response("Prinzip not found", { status: 404 });
+  return json({ slug });
+};
+
+export default function Digitaltauglichkeit_Prinzipien_Detail() {
+  const { slug } = useLoaderData<typeof loader>();
+  const prinzips: Prinzip[] = useOutletContext();
+  const prinzip = prinzips.find((prinzip) => prinzip.slug === slug);
+  if (!prinzip) {
+    return (
+      <Background backgroundColor="blue">
+        <Container>
+          <h1>Prinzip not found</h1>
+          <p>Sorry, the requested principle could not be found.</p>
+        </Container>
+      </Background>
+    );
+  }
+  return (
+    <>
+      <Container>
+        <DetailInfo label={["asa", "abc"]} />
+
+        <h2>All Properties:</h2>
+        <ul>
+          {Object.entries(prinzip).map(([key, value]) => (
+            <li key={key}>
+              <strong>{key}:</strong> {JSON.stringify(value, null, 2)}
+            </li>
+          ))}
+        </ul>
+      </Container>
+    </>
+  );
+}
diff --git a/packages/dito/app/routes/digitaltauglichkeit.prinzipien/route.tsx b/packages/dito/app/routes/digitaltauglichkeit.prinzipien/route.tsx
index 9626525..ef2d20a 100644
--- a/packages/dito/app/routes/digitaltauglichkeit.prinzipien/route.tsx
+++ b/packages/dito/app/routes/digitaltauglichkeit.prinzipien/route.tsx
@@ -1,7 +1,13 @@
 import Background from "@digitalcheck/shared/components/Background.tsx";
 import Container from "@digitalcheck/shared/components/Container.tsx";
 import { redirect } from "@remix-run/node";
-import { json, Link, MetaFunction, useLoaderData } from "@remix-run/react";
+import {
+  json,
+  Link,
+  MetaFunction,
+  Outlet,
+  useLoaderData,
+} from "@remix-run/react";
 import {
   ROUTE_LANDING,
   ROUTE_PRINZIPLES,
@@ -44,13 +50,6 @@ export default function Prinzipien() {
 */}
         </Container>
       </Background>
-      {/*      <Container>
-        <DetailInfo
-          isSelectable={true}
-          selectOptions={prinzips.map((prinzip: Prinzip) => prinzip.Name)}
-          onChange={(e) => handleSelectChange(e.target.value)}
-        />
-      </Container>*/}
       <div>
         <h1>Prinzipien</h1>
         <nav>
@@ -71,7 +70,7 @@ export default function Prinzipien() {
           )}
         </nav>
       </div>
-      {/*<Outlet />*/}
+      <Outlet context={prinzips} />
     </>
   );
 }