Add components

+ Finished card
+ Button

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"
   }

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%);
+}

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;

src/components/button/index.ts

@@ -0,0 +1,3 @@
+import Button from "./Button";
+
+export default Button;

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;
+  }
+}

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;

src/components/card/index.ts

@@ -0,0 +1,3 @@
+import Card from "./Card";
+
+export default Card;

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",
+};

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",
+};

src/styles/colors.scss

@@ -0,0 +1 @@
+$accent: #ff6565;