From 231652889975be5e4467ce085250e323757345f6 Mon Sep 17 00:00:00 2001 From: Can Sirin <8138047+cansirin@users.noreply.github.com> Date: Sun, 3 Dec 2023 12:06:24 -0800 Subject: [PATCH] add typography components for md rendering --- apps/kampus/app/layout.tsx | 8 +++-- .../mufredat/[[...lesson]]/OdinLesson.tsx | 29 +++++++++++++++++-- 2 files changed, 33 insertions(+), 4 deletions(-) diff --git a/apps/kampus/app/layout.tsx b/apps/kampus/app/layout.tsx index e24ed557..6b27a907 100644 --- a/apps/kampus/app/layout.tsx +++ b/apps/kampus/app/layout.tsx @@ -8,8 +8,9 @@ import { RelayEnvironmentProvider } from "~/features/relay/RelayEnvironmentProvi import "./globals.css"; import { ThemeProvider } from "@kampus/ui"; +import { cn } from "~/../../packages/ui/utils"; -const inter = Inter({ subsets: ["latin"] }); +const inter = Inter({ subsets: ["latin"], variable: "--font-sans" }); export const metadata = { title: "kamp.us", @@ -19,7 +20,10 @@ export const metadata = { export default function RootLayout({ children }: { children: ReactNode }) { return ( - + {children} diff --git a/apps/kampus/app/odin/mufredat/[[...lesson]]/OdinLesson.tsx b/apps/kampus/app/odin/mufredat/[[...lesson]]/OdinLesson.tsx index 47742312..1a17ae7b 100644 --- a/apps/kampus/app/odin/mufredat/[[...lesson]]/OdinLesson.tsx +++ b/apps/kampus/app/odin/mufredat/[[...lesson]]/OdinLesson.tsx @@ -6,6 +6,16 @@ import { graphql, usePreloadedQuery } from "react-relay"; import { type SerializablePreloadedQuery } from "@kampus/relay"; import useSerializablePreloadedQuery from "@kampus/relay/use-serializable-preloaded-query"; +import { + TypographyBlockquote, + TypographyH1, + TypographyH2, + TypographyH3, + TypographyH4, + TypographyInlineCode, + TypographyList, + TypographyP, +} from "~/../../packages/ui"; import { type OdinLessonQuery } from "~/app/odin/mufredat/[[...lesson]]/__generated__/OdinLessonQuery.graphql"; interface Props { @@ -36,8 +46,23 @@ export const OdinLessonContainer = (props: Props) => { return ( <> - {lesson?.title} - {lesson?.body.html} + , + h2: ({ ...props }) => , + h3: ({ ...props }) => , + h4: ({ ...props }) => , + p: ({ ...props }) => , + a: ({ ...props }) => ( + + ), + blockquote: ({ ...props }) => , + code: ({ ...props }) => , + ul: ({ ...props }) => , + }} + > + {lesson?.body.html} + ); };