From c48001f2d55e01264962a876307f57018940c719 Mon Sep 17 00:00:00 2001
From: Stephan <57194608+stephan418@users.noreply.github.com>
Date: Thu, 29 Sep 2022 22:05:18 +0200
Subject: [PATCH] Add components

+ Finished card
+ Button
---
 package.json                             |  1 +
 src/components/button/Button.module.scss | 43 ++++++++++++++++++++++++
 src/components/button/Button.tsx         | 13 +++++++
 src/components/button/index.ts           |  3 ++
 src/components/card/Card.module.scss     | 15 +++++++++
 src/components/card/Card.tsx             | 11 ++++++
 src/components/card/index.ts             |  3 ++
 src/stories/Button.stories.tsx           | 15 +++++++++
 src/stories/Card.stories.tsx             | 15 +++++++++
 src/styles/colors.scss                   |  1 +
 10 files changed, 120 insertions(+)
 create mode 100644 src/components/button/Button.module.scss
 create mode 100644 src/components/button/Button.tsx
 create mode 100644 src/components/button/index.ts
 create mode 100644 src/components/card/Card.module.scss
 create mode 100644 src/components/card/Card.tsx
 create mode 100644 src/components/card/index.ts
 create mode 100644 src/stories/Button.stories.tsx
 create mode 100644 src/stories/Card.stories.tsx
 create mode 100644 src/styles/colors.scss

diff --git a/package.json b/package.json
index 4c0926c..1476caf 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^2.1.0",
     "babel-loader": "^8.2.5",
+    "sass": "^1.55.0",
     "typescript": "^4.6.4",
     "vite": "^3.1.0"
   }
diff --git a/src/components/button/Button.module.scss b/src/components/button/Button.module.scss
new file mode 100644
index 0000000..3b1c90a
--- /dev/null
+++ b/src/components/button/Button.module.scss
@@ -0,0 +1,43 @@
+@import "../../styles/colors";
+
+@mixin fullInset {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.button {
+  outline: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.05rem;
+
+  color: white;
+  background: transparent;
+  padding: 0.4rem 2rem;
+
+  position: relative;
+
+  &:hover .background {
+    transform: scale(1.1);
+  }
+}
+
+.background {
+  border-radius: 1rem;
+  background: $accent;
+
+  position: absolute;
+  @include fullInset();
+
+  transition: transform 100ms ease-in-out;
+}
+
+.children {
+  position: relative;
+  top: 50%;
+  left: 50%;
+
+  transform: translateX(-50%);
+}
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
new file mode 100644
index 0000000..92f512c
--- /dev/null
+++ b/src/components/button/Button.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import styles from "./Button.module.scss";
+
+const Button: React.FC<{ children: any }> = ({ children }) => {
+  return (
+    <button className={styles.button}>
+      <div className={styles.background}></div>
+      <div className={styles.children}>{children}</div>
+    </button>
+  );
+};
+
+export default Button;
diff --git a/src/components/button/index.ts b/src/components/button/index.ts
new file mode 100644
index 0000000..150e111
--- /dev/null
+++ b/src/components/button/index.ts
@@ -0,0 +1,3 @@
+import Button from "./Button";
+
+export default Button;
diff --git a/src/components/card/Card.module.scss b/src/components/card/Card.module.scss
new file mode 100644
index 0000000..6823aa6
--- /dev/null
+++ b/src/components/card/Card.module.scss
@@ -0,0 +1,15 @@
+.test {
+  background: white;
+
+  width: min(80%, 60rem);
+  padding: 1rem 0;
+
+  display: flex;
+  justify-content: center;
+
+  @media only screen and (min-width: 900px) {
+    border-radius: 32px;
+    box-shadow: 0 6px 13px rgba($color: #000000, $alpha: 0.25);
+    padding: 32px;
+  }
+}
diff --git a/src/components/card/Card.tsx b/src/components/card/Card.tsx
new file mode 100644
index 0000000..5959130
--- /dev/null
+++ b/src/components/card/Card.tsx
@@ -0,0 +1,11 @@
+import styles from "./Card.module.scss";
+
+const Card: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ children, ...props }) => {
+  return (
+    <div className={styles.test} {...props}>
+      {children}
+    </div>
+  );
+};
+
+export default Card;
diff --git a/src/components/card/index.ts b/src/components/card/index.ts
new file mode 100644
index 0000000..dfbd836
--- /dev/null
+++ b/src/components/card/index.ts
@@ -0,0 +1,3 @@
+import Card from "./Card";
+
+export default Card;
diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx
new file mode 100644
index 0000000..709ecca
--- /dev/null
+++ b/src/stories/Button.stories.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import Button from "../components/button";
+
+export default { title: "Button", component: Button } as ComponentMeta<typeof Button>;
+
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+
+export const defaultButton = Template.bind({});
+
+defaultButton.args = {
+  children: "Test",
+};
diff --git a/src/stories/Card.stories.tsx b/src/stories/Card.stories.tsx
new file mode 100644
index 0000000..2bf4500
--- /dev/null
+++ b/src/stories/Card.stories.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import Card from "../components/card";
+
+export default { title: "Card", component: Card } as ComponentMeta<typeof Card>;
+
+const Template: ComponentStory<typeof Card> = (args) => <Card {...args} />;
+
+export const DefaultCard = Template.bind({});
+
+DefaultCard.args = {
+  children: "Test",
+};
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
new file mode 100644
index 0000000..5f4d219
--- /dev/null
+++ b/src/styles/colors.scss
@@ -0,0 +1 @@
+$accent: #ff6565;