feat(odin): split componets for relay

apps/kampus/app/odin/mufredat/[[...lesson]]/OdinLesson.tsx

@@ -1,9 +1,13 @@
+"use client";
+
 import { graphql, usePreloadedQuery } from "react-relay";
 
 import { type SerializablePreloadedQuery } from "@kampus/relay";
 import useSerializablePreloadedQuery from "@kampus/relay/use-serializable-preloaded-query";
 
 import { type OdinLessonQuery } from "~/app/odin/mufredat/[[...lesson]]/__generated__/OdinLessonQuery.graphql";
+import { OdinLessonBody } from "./OdinLessonBody";
+import { OdinLessonTitle } from "./OdinLessonTitle";
 
 interface Props {
   preloadedQuery: SerializablePreloadedQuery<OdinLessonQuery>;
@@ -18,8 +22,9 @@ export const OdinLessonContainer = (props: Props) => {
         odin {
           lesson(id: $id) {
             body {
-              html
+              ...OdinLessonBody_body
             }
+            ...OdinLessonTitle_title
           }
         }
       }
@@ -30,9 +35,9 @@ export const OdinLessonContainer = (props: Props) => {
   const lesson = data.odin.lesson;
 
   return (
-    <div
-      className="prose dark:prose-invert lg:prose-xl hover:prose-a:text-blue-500"
-      dangerouslySetInnerHTML={{ __html: lesson?.body?.html ?? "" }}
-    />
+    <>
+      <OdinLessonTitle lesson={data.odin.lesson} />
+      <OdinLessonBody body={lesson?.body ?? null} />
+    </>
   );
 };

apps/kampus/app/odin/mufredat/[[...lesson]]/OdinLessonBody.tsx

@@ -0,0 +1,28 @@
+import { graphql, useFragment } from "react-relay";
+
+import { type OdinLessonBody_body$key } from "./__generated__/OdinLessonBody_body.graphql";
+
+interface Props {
+  body: OdinLessonBody_body$key | null;
+}
+
+const useOdinLessonBodyFragment = (key: OdinLessonBody_body$key | null) =>
+  useFragment(
+    graphql`
+      fragment OdinLessonBody_body on OdinLessonBody {
+        html
+      }
+    `,
+    key
+  );
+
+export const OdinLessonBody = (props: Props) => {
+  const body = useOdinLessonBodyFragment(props.body);
+
+  return (
+    <div
+      className="prose dark:prose-invert hover:prose-a:text-blue-500"
+      dangerouslySetInnerHTML={{ __html: body?.html ?? "" }}
+    />
+  );
+};

apps/kampus/app/odin/mufredat/[[...lesson]]/OdinLessonTitle.tsx

@@ -0,0 +1,23 @@
+import { graphql, useFragment } from "react-relay";
+
+import { type OdinLessonTitle_title$key } from "./__generated__/OdinLessonTitle_title.graphql";
+
+interface Props {
+  lesson: OdinLessonTitle_title$key | null;
+}
+
+const useOdinLessonTitleFragment = (key: OdinLessonTitle_title$key | null) =>
+  useFragment(
+    graphql`
+      fragment OdinLessonTitle_title on OdinLesson {
+        title
+      }
+    `,
+    key
+  );
+
+export const OdinLessonTitle = (props: Props) => {
+  const lesson = useOdinLessonTitleFragment(props.lesson);
+
+  return <h2 className="text-3xl font-bold">{lesson?.title}</h2>;
+};