wip: started the comments

src/components/Comment.tsx

@@ -0,0 +1,17 @@
+import Mdown from './Mdown'
+
+interface Props {
+    author: string
+    content: string
+}
+
+export default function Comment({ author, content }: Props) {
+    return (
+        <div className="bg-[#161718] w-xl max-w-4/5 p-5 flex flex-col gap-5 rounded-xl self-center hover:shadow-xl/20 hover:shadow-white transition-shadow mb-5">
+            <h1 className="text-white text-xl font-bold">{author}</h1>
+            <div className=" flex flex-col space-y-1 text-[#9e9b97]">
+                <Mdown>{content}</Mdown>
+            </div>
+        </div>
+    )
+}

src/components/Header.tsx

@@ -33,9 +33,11 @@ export default function Header() {
                     </div>
 
                     <div className="px-2">
-                        {lang == 'fr'
-                            ? "[WIP] Livre d'Or"
-                            : '[WIP] Golden Book'}
+                        <Link to="/comments">
+                            {lang == 'fr'
+                                ? "[WIP] Livre d'Or"
+                                : '[WIP] Golden Book'}
+                        </Link>
                     </div>
                 </div>
                 <button className="cursor-pointer" onClick={toggleLang}>

src/routeTree.gen.ts

@@ -12,6 +12,7 @@ import { Route as rootRouteImport } from './routes/__root'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as ProjectsIndexRouteImport } from './routes/projects/index'
 import { Route as LessonsIndexRouteImport } from './routes/lessons/index'
+import { Route as CommentsIndexRouteImport } from './routes/comments/index'
 import { Route as LessonsLessonNameRouteImport } from './routes/lessons/$lessonName'
 
 const IndexRoute = IndexRouteImport.update({
@@ -29,6 +30,11 @@ const LessonsIndexRoute = LessonsIndexRouteImport.update({
   path: '/lessons/',
   getParentRoute: () => rootRouteImport,
 } as any)
+const CommentsIndexRoute = CommentsIndexRouteImport.update({
+  id: '/comments/',
+  path: '/comments/',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const LessonsLessonNameRoute = LessonsLessonNameRouteImport.update({
   id: '/lessons/$lessonName',
   path: '/lessons/$lessonName',
@@ -38,12 +44,14 @@ const LessonsLessonNameRoute = LessonsLessonNameRouteImport.update({
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
   '/lessons/$lessonName': typeof LessonsLessonNameRoute
+  '/comments': typeof CommentsIndexRoute
   '/lessons': typeof LessonsIndexRoute
   '/projects': typeof ProjectsIndexRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
   '/lessons/$lessonName': typeof LessonsLessonNameRoute
+  '/comments': typeof CommentsIndexRoute
   '/lessons': typeof LessonsIndexRoute
   '/projects': typeof ProjectsIndexRoute
 }
@@ -51,20 +59,33 @@ export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/': typeof IndexRoute
   '/lessons/$lessonName': typeof LessonsLessonNameRoute
+  '/comments/': typeof CommentsIndexRoute
   '/lessons/': typeof LessonsIndexRoute
   '/projects/': typeof ProjectsIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/lessons/$lessonName' | '/lessons' | '/projects'
+  fullPaths:
+    | '/'
+    | '/lessons/$lessonName'
+    | '/comments'
+    | '/lessons'
+    | '/projects'
   fileRoutesByTo: FileRoutesByTo
-  to: '/' | '/lessons/$lessonName' | '/lessons' | '/projects'
-  id: '__root__' | '/' | '/lessons/$lessonName' | '/lessons/' | '/projects/'
+  to: '/' | '/lessons/$lessonName' | '/comments' | '/lessons' | '/projects'
+  id:
+    | '__root__'
+    | '/'
+    | '/lessons/$lessonName'
+    | '/comments/'
+    | '/lessons/'
+    | '/projects/'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
   IndexRoute: typeof IndexRoute
   LessonsLessonNameRoute: typeof LessonsLessonNameRoute
+  CommentsIndexRoute: typeof CommentsIndexRoute
   LessonsIndexRoute: typeof LessonsIndexRoute
   ProjectsIndexRoute: typeof ProjectsIndexRoute
 }
@@ -92,6 +113,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LessonsIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/comments/': {
+      id: '/comments/'
+      path: '/comments'
+      fullPath: '/comments'
+      preLoaderRoute: typeof CommentsIndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/lessons/$lessonName': {
       id: '/lessons/$lessonName'
       path: '/lessons/$lessonName'
@@ -105,6 +133,7 @@ declare module '@tanstack/react-router' {
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   LessonsLessonNameRoute: LessonsLessonNameRoute,
+  CommentsIndexRoute: CommentsIndexRoute,
   LessonsIndexRoute: LessonsIndexRoute,
   ProjectsIndexRoute: ProjectsIndexRoute,
 }

src/routes/comments/index.tsx

@@ -0,0 +1,35 @@
+import Comment from '@/components/Comment'
+import type { CommentType } from '@/types/comments'
+import { createFileRoute } from '@tanstack/react-router'
+
+// ===================
+// =====< UTILS >=====
+// ===================
+
+async function fetchData(): Promise<CommentType[]> {
+    let data = await fetch(`${import.meta.env.VITE_API}/comments`)
+    return await data.json()
+}
+
+// =======================
+// =====< COMPONENT >=====
+// =======================
+
+export const Route = createFileRoute('/comments/')({
+    loader: async () => fetchData(),
+    component: Comments,
+})
+
+export default function Comments() {
+    let data = Route.useLoaderData()
+
+    const items = data.map((e, i) => (
+        <Comment author={e.author} content={e.content} key={i} />
+    ))
+
+    return (
+        <div className="bg-[url(/public/bg.jpeg)] bg-cover bg-no-repeat bg-center min-h-screen">
+            <div className="flex flex-col pt-10">{items}</div>
+        </div>
+    )
+}

src/types/comments.tsx

@@ -0,0 +1,4 @@
+export type CommentType = {
+    author: string
+    content: string
+}