✨(demo) upgrade demo app

Add the locale switching feature.

apps/demo/src/App.tsx

@@ -1,15 +1,35 @@
-import { Button, usePagination, Pagination } from "@openfun/cunningham-react";
+import {
-import React from "react";
+  Button,
+  usePagination,
+  Pagination,
+  CunninghamProvider,
+  SUPPORTED_LOCALES,
+} from "@openfun/cunningham-react";
+import React, { useState } from "react";
 import { tokens } from "./cunningham-tokens";
 
 export const App = () => {
   const pagination = usePagination({ defaultPage: 50, defaultPagesCount: 100 });
+  const [locale, setLocale] = useState("en-US");
   return (
-    <div className="center">
+    <CunninghamProvider currentLocale={locale}>
-      <h1 className="test">Cunningham Demo.</h1>
+      <div className="center">
-      <Button>World best button.</Button>
+        <h1 className="test">Cunningham Demo.</h1>
-      <h3>Primary-500 color is {tokens.theme.colors["primary-500"]}</h3>
+        <select
-      <Pagination {...pagination} />
+          className="mb-s"
-    </div>
+          value={locale}
+          onChange={(e) => setLocale(e.target.value)}
+        >
+          {SUPPORTED_LOCALES.map((v) => (
+            <option key={v} value={v}>
+              {v}
+            </option>
+          ))}
+        </select>
+        <Button>World best button.</Button>
+        <h3>Primary-500 color is {tokens.theme.colors["primary-500"]}</h3>
+        <Pagination {...pagination} />
+      </div>
+    </CunninghamProvider>
   );
 };

apps/demo/src/main.tsx

@@ -1,13 +1,10 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.scss";
-import { CunninghamProvider } from "@openfun/cunningham-react";
 import { App } from "./App";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <CunninghamProvider>
+    <App />
-      <App />
-    </CunninghamProvider>
   </React.StrictMode>
 );