import "./boot";
import { ThemeProvider, makeStyles } from "@material-ui/styles";
import {
CssBaseline,
createMuiTheme,
Typography,
Link as MuiLink,
Grid
} from "@material-ui/core";
import { orange, teal } from "@material-ui/core/colors";
import { MDXProvider } from "@mdx-js/tag";
import React from "react";
import Head from "next/head";
import Link from "next/link";
import TopAppBar from "./TopAppBar";
export const theme = createMuiTheme({
palette: {
primary: {
main: orange[900]
},
secondary: {
main: teal[400]
}
},
typography: {
useNextVariants: true,
fontFamily: '"Noto Sans JP", "Helvetica", "Arial", sans-serif'
}
});
export const components = {
h1: (props: {}) => ,
h2: (props: {}) => ,
h3: (props: {}) => ,
h4: (props: {}) => ,
h5: (props: {}) => ,
h6: (props: {}) => ,
a: ({ href, ...props }: { href: string }) => (
)
};
const useStyles = makeStyles({
container: {
padding: [8, 3, 1].map(n => `${n * theme.spacing.unit}px`).join(" "),
[theme.breakpoints.up("sm")]: {
padding: [9, 4, 1].map(n => `${n * theme.spacing.unit}px`).join(" ")
}
}
});
const MainTheme: React.FC<{}> = ({ children }) => {
const classes = useStyles();
return (
{children}
);
};
export default MainTheme;