✨(demo) upgrade demo app
Add the locale switching feature.
This commit is contained in:
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user