fix: export theme

Author: calpa

src/components/Attraction/Attraction.d.ts

@@ -0,0 +1,13 @@
+export type Article = {
+  url: string;
+  title: string;
+};
+
+export type AttractionProps = {
+  description: string;
+  title: string;
+  location: string;
+  articles?: Article[];
+  Image: any;
+  Link?: React.ElementType;
+};

src/components/Attraction/index.tsx

@@ -1,20 +1,6 @@
-import React from "react";
 import { Grid, Typography } from "@mui/material";
 import EnhancedLink from "../EnhancedLink";
-
-type Article = {
-  url: string;
-  title: string;
-};
-
-type AttractionProps = {
-  description: string;
-  title: string;
-  location: string;
-  articles?: Article[];
-  Image: any;
-  Link?: React.ElementType;
-};
+import type { AttractionProps } from "./Attraction";
 
 function Attraction(props: AttractionProps) {
   const { description, title, location, articles, Image, Link } = props;
@@ -39,9 +25,11 @@ function Attraction(props: AttractionProps) {
           },
         }}
       >
-        <Grid item xs={12} sm={3}>
-          <Image />
-        </Grid>
+        {Image !== undefined && (
+          <Grid item xs={12} sm={3}>
+            <Image />
+          </Grid>
+        )}
 
         <Grid
           container
@@ -66,14 +54,14 @@ function Attraction(props: AttractionProps) {
             sx={{
               marginTop: {
                 xs: `10px`,
-                // sm: `0`
               },
             }}
           >
             <Typography>立刻探索{location}！</Typography>
             <ul
               style={{
                 paddingInlineStart: 0,
+                listStyleType: `none`,
               }}
             >
               {articles &&

src/index.ts

@@ -1 +1,2 @@
 export * from "./components";
+export * from "./themes";

src/themes/components/MuiTypography.js

@@ -2,12 +2,34 @@
 
 import { createTheme } from "@mui/material";
 import { blueGrey, cyan, pink } from "@mui/material/colors";
-import components from "./components";
+import typography from "./typography";
+
+declare module "@mui/material/styles" {
+  interface Palette {
+    blue: Palette["primary"];
+    navbar: Palette["primary"];
+  }
+
+  interface PaletteOptions {
+    blue: PaletteOptions["primary"];
+    navbar: PaletteOptions["primary"];
+  }
+}
 
 export const darkTheme = createTheme({
-  components,
+  // components,
+  typography,
   palette: {
     mode: "dark",
+    navbar: {
+      main: "#f5f5f5",
+      // contrastText: '#999'
+    },
+    blue: {
+      light: "#337ab7",
+      main: "#0056b3",
+      dark: "#0f457f",
+    },
     primary: {
       main: pink["A200"],
     },

src/themes/components/index.js

@@ -1,8 +1,7 @@
-// src/themes/dark.theme.js
+// src/themes/light.theme.ts
 
 import { createTheme } from "@mui/material";
-import components from "./components";
-
+import typography from "./typography";
 declare module "@mui/material/styles" {
   interface Palette {
     blue: Palette["primary"];
@@ -16,7 +15,7 @@ declare module "@mui/material/styles" {
 }
 
 export const lightTheme = createTheme({
-  components,
+  typography,
   palette: {
     mode: "light",
     navbar: {

src/themes/dark.theme.ts

@@ -0,0 +1,27 @@
+import { TypographyOptions } from "@mui/material/styles/createTypography";
+
+const typographyOptions: TypographyOptions = {
+  fontSize: 16,
+  h1: {
+    fontSize: 24,
+    fontWeight: 600,
+  },
+  h2: {
+    fontSize: 22,
+    fontWeight: 600,
+  },
+  h3: {
+    fontSize: 20,
+    fontWeight: 600,
+  },
+  h4: {
+    fontSize: 18,
+    fontWeight: 600,
+  },
+  h5: {
+    fontSize: 16,
+    fontWeight: 600,
+  },
+};
+
+export default typographyOptions;