feat: add main image component

Author: calpa

src/components/MainImage/index.stories.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import MainImage from ".";
+
+export default {
+  title: "Components/MainImage",
+  component: MainImage,
+};
+
+const Template = (args) => <MainImage {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  backgroundImage: `https://images.unsplash.com/photo-1613487957484-32c977a8bd62?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1400&h=640&q=80`,
+};

src/components/MainImage/index.tsx

@@ -0,0 +1,30 @@
+import { Typography } from "@mui/material";
+import { useStyles } from "./makeStyles";
+
+type MainImageProps = {
+  backgroundImage: string;
+};
+
+function MainImage(props: MainImageProps) {
+  const { backgroundImage } = props;
+
+  const { classes, cx } = useStyles({
+    backgroundImage,
+  });
+  return (
+    <div id="mainImage" className={cx(classes.mainImage)}>
+      <div>
+        <figure>
+          <div className={cx(classes.image)}></div>
+        </figure>
+      </div>
+      <div className={cx(classes.mainCopy)}>
+        <Typography variant="h1" className={cx(classes.text)}>
+          秋葉原
+        </Typography>
+      </div>
+    </div>
+  );
+}
+
+export default MainImage;

src/components/MainImage/makeStyles.ts

@@ -0,0 +1,40 @@
+import { makeStyles } from "tss-react/mui";
+
+export const useStyles = makeStyles<{ backgroundImage: string }>({
+  name: "MainImage",
+})((theme, { backgroundImage }) => ({
+  mainImage: {
+    position: "fixed",
+    top: "0",
+    left: "0",
+    width: "100%",
+    "min-width": "1024px",
+    height: "640px",
+    overflow: "hidden",
+  },
+  image: {
+    height: "640px",
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "center",
+    backgroundSize: "cover",
+    backgroundImage: `url(${backgroundImage})`,
+  },
+  text: {
+    position: `relative`,
+    transition: `top 1s ease, opacity 0.7s ease`,
+    color: "#fff",
+    fontSize: "60px",
+    fontWeight: 400,
+    letterSpacing: `0.05em`,
+    lineHeight: `1.15`,
+    textShadow: `0 0 8px #000, 0 0 12px #000`,
+    textAlign: `center`,
+  },
+  mainCopy: {
+    position: "absolute",
+    top: "calc(50% + 60px)",
+    left: "50%",
+    width: "100%",
+    transform: "translate(-50%, -50%)",
+  },
+}));

src/themes/html5-reset.css

@@ -0,0 +1,173 @@
+/*
+html5doctor.com Reset Stylesheet
+v1.6.1
+Last Updated: 2010-09-17
+Author: Richard Clark - http://richclarkdesign.com
+Twitter: @rich_clark
+*/
+
+html,
+body,
+div,
+span,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+abbr,
+address,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+samp,
+small,
+strong,
+sub,
+sup,
+var,
+b,
+i,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+  background: transparent;
+}
+
+body {
+  line-height: 1;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+nav ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+
+a {
+  margin: 0;
+  padding: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+  background: transparent;
+}
+
+/* change colours to suit your needs */
+ins {
+  background-color: #ff9;
+  color: #000;
+  text-decoration: none;
+}
+
+/* change colours to suit your needs */
+mark {
+  background-color: #ff9;
+  color: #000;
+  font-style: italic;
+  font-weight: bold;
+}
+
+del {
+  text-decoration: line-through;
+}
+
+abbr[title],
+dfn[title] {
+  border-bottom: 1px dotted;
+  cursor: help;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* change border colour to suit your needs */
+hr {
+  display: block;
+  height: 1px;
+  border: 0;
+  border-top: 1px solid #cccccc;
+  margin: 1em 0;
+  padding: 0;
+}
+
+input,
+select {
+  vertical-align: middle;
+}

src/themes/index.ts

@@ -1,4 +1,5 @@
 import "./styles.css";
+import "./html5-reset.css";
 
 export { darkTheme } from "./dark.theme";
 export { lightTheme } from "./light.theme";