initial app

app/frontend/src/components/common/Contact/Contact.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import { Paragraph } from "../Text";
+
+type ContactProps = {
+  phoneNumber: string;
+  email: string;
+};
+
+const Contact: React.FC<ContactProps> = (props) => {
+  const { email, phoneNumber } = props;
+
+  return (
+    <>
+      <Paragraph>
+        <a href={`mailto:${email}`}>{email}</a>
+      </Paragraph>
+      <Paragraph>
+        <a href={`tel:${phoneNumber}`}>{phoneNumber}</a>
+      </Paragraph>
+    </>
+  );
+};
+
+export default Contact;

app/frontend/src/components/common/Contact/index.ts

@@ -0,0 +1 @@
+export { default as Contact } from "./Contact";

app/frontend/src/components/common/Content/Content.tsx

@@ -0,0 +1,12 @@
+import styled from "@emotion/styled";
+
+const Content = styled("div")(({ theme }) => ({
+  padding: theme.spacing(0.5),
+  paddingLeft: theme.spacing(1),
+  "@media (min-width: 800px)": {
+    padding: theme.spacing(1),
+    paddingLeft: theme.spacing(2),
+  },
+}));
+
+export default Content;

app/frontend/src/components/common/Content/index.ts

@@ -0,0 +1 @@
+export { default as Content } from "./Content";

app/frontend/src/components/common/Headline/Headline.tsx

@@ -0,0 +1,52 @@
+import styled from "@emotion/styled";
+import React from "react";
+
+const StyledH1 = styled("h1")({
+  fontSize: "2rem",
+  lineHeight: 1.5,
+  margin: 0,
+  marginBottom: "0.2rem",
+});
+
+const StyledH2 = styled("h2")({
+  fontSize: "1.5rem",
+  lineHeight: 1.5,
+  margin: 0,
+  marginBottom: "0.2rem",
+});
+
+const StyledH3 = styled("h3")({
+  fontSize: "1.35rem",
+  lineHeight: 1.5,
+  margin: 0,
+  marginBottom: "0.2rem",
+});
+
+const StyledH4 = styled("h4")({
+  fontSize: "1.2rem",
+  lineHeight: 1.5,
+  margin: 0,
+  marginBottom: "0.2rem",
+});
+
+const ComponentMap = {
+  1: StyledH1,
+  2: StyledH2,
+  3: StyledH3,
+  4: StyledH4,
+};
+
+export type HeadlineProps = {
+  level: 1 | 2 | 3 | 4;
+  className?: string;
+};
+
+const Headline: React.FC<React.PropsWithChildren<HeadlineProps>> = (props) => {
+  const { level, ...rest } = props;
+
+  const Component = ComponentMap[level];
+
+  return <Component {...rest} />;
+};
+
+export default Headline;

app/frontend/src/components/common/Headline/SubHeadline.tsx

@@ -0,0 +1,15 @@
+import styled from "@emotion/styled";
+
+import { Headline } from ".";
+import { HeadlineProps } from "./Headline";
+
+type SubHeadlineProps = {
+  level: Exclude<HeadlineProps["level"], 1>;
+  className?: string;
+};
+
+const SubHeadline = styled(Headline)<SubHeadlineProps>(({ theme }) => ({
+  color: theme.palette.text.secondary,
+}));
+
+export default SubHeadline;

app/frontend/src/components/common/Headline/index.ts

@@ -0,0 +1,2 @@
+export { default as Headline } from "./Headline";
+export { default as SubHeadline } from "./SubHeadline";

app/frontend/src/components/common/Link/Link.tsx

@@ -0,0 +1,13 @@
+import styled from "@emotion/styled";
+import { Link as RouterLink } from "react-router-dom";
+
+const Link = styled(RouterLink)(({ theme }) => {
+  return {
+    color: theme.palette.link.main,
+    "&:hover": {
+      color: theme.palette.link.hover,
+    },
+  };
+});
+
+export default Link;

app/frontend/src/components/common/Link/index.ts

@@ -0,0 +1 @@
+export { default as Link } from "./Link";

app/frontend/src/components/common/List/List.tsx

@@ -0,0 +1,17 @@
+import styled from "@emotion/styled";
+import React from "react";
+
+const Ul = styled("ul")({
+  listStyle: "none",
+  margin: 0,
+  padding: 0,
+  paddingLeft: "0.5rem",
+});
+
+const List: React.FC<React.PropsWithChildren> = (props) => {
+  const { children } = props;
+
+  return <Ul>{children}</Ul>;
+};
+
+export default List;

app/frontend/src/components/common/List/ListItem.tsx

@@ -0,0 +1,20 @@
+import styled from "@emotion/styled";
+import React from "react";
+
+const Li = styled("li")(({ theme }) => ({
+  listStyle: "none",
+  margin: 0,
+  padding: 0,
+  marginBottom: theme.spacing(1),
+  "&:last-child": {
+    marginBottom: 0,
+  },
+}));
+
+const ListItem: React.FC<React.PropsWithChildren> = (props) => {
+  const { children } = props;
+
+  return <Li>{children}</Li>;
+};
+
+export default ListItem;

app/frontend/src/components/common/List/index.ts

@@ -0,0 +1,2 @@
+export { default as List } from "./List";
+export { default as ListItem } from "./ListItem";

app/frontend/src/components/common/Spacer/Divider.tsx

@@ -0,0 +1,12 @@
+import styled from "@emotion/styled";
+
+const Divider = styled("hr")({
+  background:
+    "linear-gradient(90deg, transparent, rgba(200, 200, 200, 0.5) 1.5rem calc(100% - 1.5rem), transparent 100%);",
+  border: "0 none",
+  height: 1,
+  position: "relative",
+  width: "100%",
+});
+
+export default Divider;

app/frontend/src/components/common/Spacer/Spacer.tsx

@@ -0,0 +1,50 @@
+import styled from "@emotion/styled";
+import React from "react";
+
+import Divider from "./Divider";
+
+type SpaceProps = {
+  spacing?: number;
+};
+
+const shouldForwardProp = (prop: string) =>
+  prop !== "spacing" && prop !== "inline";
+
+const Root = styled("div")({
+  width: "100%",
+});
+
+type SpacerProps = SpaceProps & {
+  /**
+   * Displays the dividing line
+   */
+  withDivider?: boolean;
+};
+
+const Space = styled("div", { shouldForwardProp })<SpaceProps>(
+  ({ spacing, theme }) => ({
+    width: "100%",
+    height: theme.spacing(spacing === undefined ? 1 : spacing),
+  })
+);
+
+const Spacer: React.FC<SpacerProps> = (props) => {
+  const { spacing, withDivider } = props;
+
+  if (!withDivider) {
+    const spaceSize = typeof spacing === undefined ? 2 : spacing;
+    return <Space spacing={spaceSize} />;
+  }
+
+  const spaceSize = typeof spacing === undefined ? 1 : spacing;
+
+  return (
+    <Root>
+      <Space spacing={spaceSize} />
+      {withDivider && <Divider />}
+      <Space spacing={spaceSize} />
+    </Root>
+  );
+};
+
+export default Spacer;

app/frontend/src/components/common/Spacer/index.ts

@@ -0,0 +1 @@
+export { default as Spacer } from "./Spacer";

app/frontend/src/components/common/Text/Caption.tsx

@@ -0,0 +1,14 @@
+import styled from "@emotion/styled";
+
+const Caption = styled("caption")(({ theme }) => ({
+  color: theme.palette.text.secondary,
+  fontSize: "0.75rem",
+  lineHeight: 1.5,
+  margin: 0,
+  marginBottom: "0.5rem",
+  display: "block",
+  textAlign: "unset",
+  textTransform: "uppercase",
+}));
+
+export default Caption;

app/frontend/src/components/common/Text/Paragraph.tsx

@@ -0,0 +1,10 @@
+import styled from "@emotion/styled";
+
+const Paragraph = styled("p")({
+  fontSize: "0.875rem",
+  lineHeight: 1.5,
+  margin: 0,
+  marginBottom: "0.5rem",
+});
+
+export default Paragraph;

app/frontend/src/components/common/Text/index.ts

@@ -0,0 +1,2 @@
+export { default as Caption } from "./Caption";
+export { default as Paragraph } from "./Paragraph";