(demo) upgrade demo app

Add the locale switching feature.
This commit is contained in:
Nathan Vasse
2023-03-06 16:32:02 +01:00
committed by NathanVss
parent 994d42578e
commit 2d80722a18
2 changed files with 29 additions and 12 deletions

View File

@@ -1,15 +1,35 @@
import { Button, usePagination, Pagination } from "@openfun/cunningham-react";
import React from "react";
import {
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">
<h1 className="test">Cunningham Demo.</h1>
<Button>World best button.</Button>
<h3>Primary-500 color is {tokens.theme.colors["primary-500"]}</h3>
<Pagination {...pagination} />
</div>
<CunninghamProvider currentLocale={locale}>
<div className="center">
<h1 className="test">Cunningham Demo.</h1>
<select
className="mb-s"
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>
);
};

View File

@@ -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 />
</CunninghamProvider>
<App />
</React.StrictMode>
);