✨(demo) new demo

This new demo aims to take advantage of all the new Cunningham's
components. The old demo was kind of a draft, this new one gives
a better overview of what Cunningham is capable of.

apps/demo/src/App.tsx

@@ -1,62 +1,69 @@
-import {
-  Button,
-  CunninghamProvider,
-  Pagination,
-  Select,
-  SUPPORTED_LOCALES,
-  Switch,
-  usePagination,
-} from "@openfun/cunningham-react";
-import React, { useState } from "react";
-import { tokens } from "./cunningham-tokens";
+import { Button, CunninghamProvider } from "@openfun/cunningham-react";
+import React, { useEffect, useState } from "react";
+import { Create } from "./Create";
+import { Home } from "./Home";
 
 enum Theme {
   DEFAULT = "default",
   DARK = "dark",
 }
 
-const THEMES: Theme[] = [Theme.DEFAULT, Theme.DARK];
+export enum Page {
+  HOME,
+  CREATE,
+}
+
+export interface PageProps {
+  changePage: (page: Page) => void;
+}
+
+const preferredScheme = window.matchMedia("(prefers-color-scheme: dark)")
+  .matches
+  ? Theme.DARK
+  : Theme.DEFAULT;
 
 export const App = () => {
-  const pagination = usePagination({ defaultPage: 50, defaultPagesCount: 100 });
-  const [locale, setLocale] = useState("en-US");
-  const [theme, setTheme] = useState<Theme>(Theme.DEFAULT);
+  const [locale] = useState("en-US");
+  const [theme, setTheme] = useState<Theme>(preferredScheme);
+  const [page, setPage] = useState<Page>(Page.HOME);
+  const handleThemeChange = (event: MediaQueryListEvent) =>
+    setTheme(event.matches ? Theme.DARK : Theme.DEFAULT);
+
+  useEffect(() => {
+    const query = window.matchMedia("(prefers-color-scheme: dark)");
+    query.addEventListener("change", handleThemeChange);
+
+    return () => {
+      query.removeEventListener("change", handleThemeChange);
+    };
+  }, []);
+
   return (
     <CunninghamProvider currentLocale={locale} theme={theme}>
-      <div className="center">
-        <h1 className="clr-greyscale-900">Cunningham Demo.</h1>
-
-        <div className="mb-s">
-          <Select
-            label="Locale"
-            options={SUPPORTED_LOCALES.map((v) => ({
-              label: v,
-            }))}
-            clearable={false}
-            value={locale}
-            onChange={(e) => setLocale(e.target.value as string)}
-          />
-        </div>
-
-        <Select
-          label="Theme"
-          options={THEMES.map((v) => ({
-            label: v,
-          }))}
-          clearable={false}
-          value={THEMES[0]}
-          onChange={(e) => setTheme(e.target.value as Theme)}
+      <div className="container">
+        <img
+          className="pattern"
+          src={
+            theme === Theme.DARK ? "pattern_dark.png" : "pattern_default.png"
+          }
+          alt="Background pattern"
         />
+        {page === Page.HOME && <Home changePage={(p) => setPage(p)} />}
+        {page === Page.CREATE && <Create changePage={(p) => setPage(p)} />}
+      </div>
 
-        <div className="p-s">
-          <Switch defaultChecked={true} label="Switch" />
-        </div>
-        <Button>World best button.</Button>
-        <h3 className="clr-greyscale-900">
-          Primary-500 color is{" "}
-          {tokens.themes[theme].theme.colors["primary-500"]}
-        </h3>
-        <Pagination {...pagination} />
+      <div className="theme-switch">
+        <Button
+          color="tertiary"
+          icon={
+            <span className="material-icons">
+              {theme === Theme.DARK ? "light_mode" : "dark_mode"}
+            </span>
+          }
+          onClick={() => {
+            setTheme(theme === Theme.DARK ? Theme.DEFAULT : Theme.DARK);
+          }}
+        />
       </div>
     </CunninghamProvider>
   );