feat: Toast default styles (#65)
This commit is contained in:
parent
3382ae3ada
commit
1ea43d6b99
1302
package-lock.json
generated
1302
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -19,7 +19,7 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@brojs/cli": "^1.6.3",
|
"@brojs/cli": "^1.6.3",
|
||||||
"@chakra-ui/icons": "^2.2.4",
|
"@chakra-ui/icons": "^2.2.4",
|
||||||
"@chakra-ui/react": "^2.4.2",
|
"@chakra-ui/react": "^2.10.5",
|
||||||
"@emotion/react": "^11.4.1",
|
"@emotion/react": "^11.4.1",
|
||||||
"@emotion/styled": "^11.3.0",
|
"@emotion/styled": "^11.3.0",
|
||||||
"@fontsource/open-sans": "^5.1.0",
|
"@fontsource/open-sans": "^5.1.0",
|
||||||
|
@ -1,14 +1,31 @@
|
|||||||
import React, { FC, PropsWithChildren } from 'react';
|
import React, { ComponentType, FC, PropsWithChildren } from 'react';
|
||||||
import { ChakraProvider } from '@chakra-ui/react';
|
import { ChakraProvider } from '@chakra-ui/react';
|
||||||
|
|
||||||
import { default as landingTheme } from './theme-config';
|
import { default as landingTheme } from './theme-config';
|
||||||
import Fonts from './Fonts';
|
import Fonts from './Fonts';
|
||||||
|
import { toastOptions } from './toast-options';
|
||||||
|
|
||||||
export const LandingThemeProvider: FC<PropsWithChildren> = ({ children }) => {
|
export const LandingThemeProvider: FC<PropsWithChildren> = ({ children }) => {
|
||||||
return (
|
return (
|
||||||
<ChakraProvider theme={landingTheme}>
|
<ChakraProvider theme={landingTheme} toastOptions={toastOptions}>
|
||||||
<Fonts />
|
<Fonts />
|
||||||
{children}
|
{children}
|
||||||
</ChakraProvider>
|
</ChakraProvider>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export function withLandingThemeProvider<T extends JSX.IntrinsicAttributes>(WrappedComponent: ComponentType<T>) {
|
||||||
|
const displayName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
|
||||||
|
|
||||||
|
const ComponentWithLandingThemeProvider = (props: T) => {
|
||||||
|
return (
|
||||||
|
<LandingThemeProvider>
|
||||||
|
<WrappedComponent {...props} />
|
||||||
|
</LandingThemeProvider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
ComponentWithLandingThemeProvider.displayName = `withLandingThemeProvider(${displayName})`;
|
||||||
|
|
||||||
|
return ComponentWithLandingThemeProvider;
|
||||||
|
}
|
||||||
|
@ -1 +1 @@
|
|||||||
export { LandingThemeProvider } from './LandingThemeProvider';
|
export { LandingThemeProvider, withLandingThemeProvider } from './LandingThemeProvider';
|
8
src/containers/LandingThemeProvider/toast-options.ts
Normal file
8
src/containers/LandingThemeProvider/toast-options.ts
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import { ToastProviderProps } from "@chakra-ui/react";
|
||||||
|
|
||||||
|
export const toastOptions: ToastProviderProps = {
|
||||||
|
defaultOptions: {
|
||||||
|
position: 'top-right',
|
||||||
|
isClosable: true,
|
||||||
|
}
|
||||||
|
};
|
Loading…
Reference in New Issue
Block a user