From a7c320e289fcffaa0b771925c4463dc329d59d8e Mon Sep 17 00:00:00 2001
From: Stephan <57194608+stephan418@users.noreply.github.com>
Date: Fri, 30 Sep 2022 22:21:31 +0200
Subject: [PATCH] Add tile component

---
 src/components/tile/Tile.module.scss | 75 ++++++++++++++++++++++++++++
 src/components/tile/Tile.tsx         | 27 ++++++++++
 src/components/tile/index.ts         |  3 ++
 src/stories/Tile.stories.tsx         | 19 +++++++
 src/styles/highlight.scss            | 11 ++++
 src/styles/position.scss             |  6 +++
 6 files changed, 141 insertions(+)
 create mode 100644 src/components/tile/Tile.module.scss
 create mode 100644 src/components/tile/Tile.tsx
 create mode 100644 src/components/tile/index.ts
 create mode 100644 src/stories/Tile.stories.tsx
 create mode 100644 src/styles/highlight.scss
 create mode 100644 src/styles/position.scss

diff --git a/src/components/tile/Tile.module.scss b/src/components/tile/Tile.module.scss
new file mode 100644
index 0000000..d8459fd
--- /dev/null
+++ b/src/components/tile/Tile.module.scss
@@ -0,0 +1,75 @@
+@import "../../styles/highlight.scss";
+@import "../../styles/position.scss";
+@import "../../styles/colors.scss";
+
+.tile {
+  display: block;
+  position: relative;
+
+  height: 8rem;
+  width: 8rem;
+  aspect-ratio: 1;
+  font-size: 1.5rem;
+
+  display: grid;
+  grid: 1fr 2.5rem / 1fr;
+
+  @include expand-bg();
+
+  text-decoration: none;
+
+  * {
+    color: black;
+  }
+
+  &:hover svg,
+  &:focus-visible svg {
+    fill: $accent;
+  }
+}
+
+@media only screen and (min-width: 900px) {
+  .tile {
+    width: 10rem;
+    height: 10rem;
+  }
+}
+
+.background {
+  transition: transform 100ms;
+
+  position: absolute;
+  @include fullInset();
+
+  @include highten;
+  border-radius: 32px;
+}
+
+.textContainer {
+  position: relative;
+  display: flex;
+
+  justify-content: center;
+}
+
+.iconContainer {
+  height: 70%;
+  width: 70%;
+  min-width: 0;
+  min-height: 0;
+  aspect-ratio: 1;
+
+  align-self: center;
+  justify-self: center;
+
+  * {
+    height: 100%;
+    width: 100%;
+  }
+
+  svg {
+    transition: fill 100ms;
+
+    fill: $unimportant;
+  }
+}
diff --git a/src/components/tile/Tile.tsx b/src/components/tile/Tile.tsx
new file mode 100644
index 0000000..d97bc6f
--- /dev/null
+++ b/src/components/tile/Tile.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { ReactComponent } from "../../assets/svgr-custom";
+import styles from "./Tile.module.scss";
+import { Link } from "react-router-dom";
+
+interface TileProps {
+  text: string;
+  icon: typeof ReactComponent;
+
+  linkTo: string;
+
+  onClick?: () => unknown;
+}
+
+const Tile: React.FC<TileProps> = ({ text, icon: Icon, linkTo, onClick }) => {
+  return (
+    <Link to={linkTo} onClick={onClick} className={styles.tile}>
+      <div className={styles.background}></div>
+      <span className={styles.iconContainer}>
+        <Icon />
+      </span>
+      <span className={styles.textContainer}>{text}</span>
+    </Link>
+  );
+};
+
+export default Tile;
diff --git a/src/components/tile/index.ts b/src/components/tile/index.ts
new file mode 100644
index 0000000..06d10c2
--- /dev/null
+++ b/src/components/tile/index.ts
@@ -0,0 +1,3 @@
+import Tile from "./Tile";
+
+export default Tile;
diff --git a/src/stories/Tile.stories.tsx b/src/stories/Tile.stories.tsx
new file mode 100644
index 0000000..2e6f41b
--- /dev/null
+++ b/src/stories/Tile.stories.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { withRouter } from "storybook-addon-react-router-v6";
+// @ts-ignore
+import { ReactComponent as Icon } from "../assets/search.svg";
+
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import Tile from "../components/tile";
+import { Link } from "react-router-dom";
+
+export default { title: "Tile", component: Tile, decorators: [withRouter] } as ComponentMeta<typeof Tile>;
+
+const Template: ComponentStory<typeof Tile> = (args) => <Tile {...args} />;
+
+export const defaultTile = Template.bind({});
+
+defaultTile.args = {
+  icon: Icon,
+};
diff --git a/src/styles/highlight.scss b/src/styles/highlight.scss
new file mode 100644
index 0000000..38b75ae
--- /dev/null
+++ b/src/styles/highlight.scss
@@ -0,0 +1,11 @@
+@mixin highten {
+  border-radius: 32px;
+  box-shadow: 0 6px 13px rgba($color: #000000, $alpha: 0.25);
+}
+
+@mixin expand-bg($selector: ".background") {
+  &:hover #{$selector},
+  &:focus-visible #{$selector} {
+    transform: scale(1.1);
+  }
+}
diff --git a/src/styles/position.scss b/src/styles/position.scss
new file mode 100644
index 0000000..44ab663
--- /dev/null
+++ b/src/styles/position.scss
@@ -0,0 +1,6 @@
+@mixin fullInset {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}