a526243667
Demonstrate the use of token references by editing the greyscale color which is used by lots of components.
38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
import {
|
|
Button,
|
|
CunninghamProvider,
|
|
Pagination,
|
|
SUPPORTED_LOCALES,
|
|
Switch,
|
|
usePagination,
|
|
} 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 (
|
|
<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>
|
|
<Switch defaultChecked={true} />
|
|
<Button>World best button.</Button>
|
|
<h3>Primary-500 color is {tokens.theme.colors["primary-500"]}</h3>
|
|
<Pagination {...pagination} />
|
|
</div>
|
|
</CunninghamProvider>
|
|
);
|
|
};
|