1
0
Fork 0
mirror of https://github.com/kou029w/_.git synced 2025-01-31 06:18:07 +00:00
_/styles/MainTheme.tsx

76 lines
2.1 KiB
TypeScript
Raw Normal View History

2019-07-09 15:46:11 +09:00
import { ThemeProvider } from "@material-ui/styles";
import { createMuiTheme } from "@material-ui/core/styles";
2019-04-23 16:48:33 +09:00
import { orange, teal } from "@material-ui/core/colors";
2019-07-09 15:46:11 +09:00
import Typography from "@material-ui/core/Typography";
import MuiLink from "@material-ui/core/Link";
import Box from "@material-ui/core/Box";
import Container from "@material-ui/core/Container";
import { MDXProvider } from "@mdx-js/react";
2019-04-24 00:23:29 +09:00
import React, { ReactNode } from "react";
2019-04-23 16:48:33 +09:00
import Head from "next/head";
2019-04-23 18:52:12 +09:00
import Link from "next/link";
import TopAppBar from "./TopAppBar";
2019-04-23 16:48:33 +09:00
2020-02-09 00:07:54 +09:00
const isValidURL = (url: string) => {
try {
new URL(url);
} catch {
return false;
}
return true;
};
2019-04-23 16:48:33 +09:00
export const theme = createMuiTheme({
palette: {
primary: {
main: orange[900]
},
secondary: {
main: teal[400]
}
},
typography: {
fontFamily: "sans-serif"
2019-04-23 16:48:33 +09:00
}
});
2019-04-23 18:52:12 +09:00
export const components = {
2019-04-24 00:23:29 +09:00
h1: (props: { children: ReactNode }) => (
<>
<Head>
<title>{props.children}</title>
</Head>
<Typography component="h1" variant="h3" {...props} />
</>
),
2019-04-23 22:31:38 +09:00
h2: (props: {}) => <Typography component="h2" variant="h4" {...props} />,
h3: (props: {}) => <Typography component="h3" variant="h5" {...props} />,
h4: (props: {}) => <Typography component="h4" variant="h6" {...props} />,
h5: (props: {}) => <Typography component="h5" variant="h6" {...props} />,
2019-04-23 18:52:12 +09:00
h6: (props: {}) => <Typography variant="h6" {...props} />,
2020-02-09 00:07:54 +09:00
a: ({ href, ...props }: { href: string }) => {
const url = isValidURL(href)
? href
: `${process.env.NEXT_BASE_PATH}${href}`;
return (
<Link prefetch href={href} as={url}>
<MuiLink variant="body1" color="secondary" href={url} {...props} />
</Link>
);
2020-02-09 02:46:41 +09:00
},
p: (props: {}) => <Typography component="p" variant="body1" {...props} />
2019-04-23 18:52:12 +09:00
};
2019-07-09 15:46:11 +09:00
const MainTheme: React.FC = ({ children }) => (
<ThemeProvider theme={theme}>
<MDXProvider components={components}>
<TopAppBar />
<Box paddingTop={6}>
2020-02-09 02:46:41 +09:00
<Container>{children}</Container>
2019-07-09 15:46:11 +09:00
</Box>
</MDXProvider>
</ThemeProvider>
);
2019-04-23 16:48:33 +09:00
export default MainTheme;