👌 IMPROVE: Refactor Title component and add Title to Stats component.…

… Add loading component

src/components/Title.tsx

@@ -1,4 +1,4 @@
-export function Title() {
+export function Title({ title }: { title: string }) {
   return (
     <h1
       className="text-6xl font-bold dark:text-purple-700 text-black"
@@ -8,7 +8,7 @@ export function Title() {
         WebkitTextFillColor: "transparent",
       }}
     >
-      Dico
+      {title}
     </h1>
   );
 }

src/components/TranslationDirection.tsx

@@ -15,7 +15,7 @@ export function TitleAndDirection({
 }: TranslationDirectionProps) {
   return (
     <section className="flex flex-col h-[20%] items-center gap-5">
-      <Title />
+      <Title title="Dico" />
       <div className="grid place-items-center  w-full  ">
         {isFr ? (
           <div

src/components/stats/Stats.tsx

@@ -1,10 +1,11 @@
+import { Title } from "../Title";
 import WordsList from "./WordsList";
 
 export default function Stats() {
   return (
     <main className="pt-24 mx-auto h-full w-full justify-start">
-      <header className="flex flex-col gap-4 gap-y-12 pb-10">
-        <h1 className="text-5xl">Dico en nombres</h1>
+      <header className="flex flex-col  items-center gap-4 gap-y-12 pb-10">
+        <Title title="Statistiques" />
       </header>
       <section className="w-full flex gap-4 gap-y-8 flex-col md:flex-row px-4">
         <WordsList />

src/components/stats/WordsList.tsx

@@ -1,10 +1,18 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import React from "react";
 import { AxisOptions, Chart } from "react-charts";
+import { LoadingGlass } from "../LoadingGlass";
 
+// async function fetchWords() {
+//   const response = await import("@/utils/schemas/top-searches.json");
+//   return response.default;
+// }
 async function fetchWords() {
-  const response = await import("@/utils/schemas/top-searches.json");
-  return response.default;
+  const response = await fetch("/api/stats");
+  if (!response.ok) {
+    throw new Error("Failed to fetch data");
+  }
+  return response.json();
 }
 
 interface WordSearches {
@@ -39,7 +47,7 @@ export default function WordsList() {
     return <div>Failed to load data</div>;
   }
   if (query.isLoading) {
-    return <div>Loading...</div>;
+    return <LoadingGlass />;
   }
   return (
     <article className="w-full h-full">

src/unit-tests/components/title.spec.tsx

@@ -5,7 +5,7 @@ import React from "react";
 
 describe("Title", () => {
   it("should work", () => {
-    render(<Title />);
+    render(<Title title="Dico" />);
     const title = screen.getByText("Dico");
     expect(title).toBeDefined();
   });