feat: Card component (#11)

* feat: Card component

src/components/Card/index.stories.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import styled from "styled-components";
+/* eslint-disable import/no-unresolved */
+import { Meta } from "@storybook/react/types-6-0";
+import Card from "./index";
+
+const Row = styled.div`
+  margin-bottom: 32px;
+
+  & > button + button {
+    margin-left: 16px;
+  }
+`;
+
+export default {
+  title: "Card",
+  component: Card,
+  argTypes: {},
+} as Meta;
+
+export const Default: React.FC = () => {
+  return (
+    <>
+      <Row>
+        <Card>Card</Card>
+      </Row>
+    </>
+  );
+};

src/components/Card/index.tsx

@@ -0,0 +1,16 @@
+import styled, { DefaultTheme } from "styled-components";
+
+interface CardProps {
+  theme: DefaultTheme;
+}
+
+const Card = styled.div<CardProps>`
+  background-color: ${({ theme }) => theme.colors.card.background};
+  border: 1px solid ${({ theme }) => theme.colors.card.borderColor};
+  border-radius: 32px;
+  box-shadow: ${({ theme }) => theme.shadows.level1};
+  color: ${({ theme }) => theme.colors.text};
+  padding: 24px;
+`;
+
+export default Card;

src/index.ts

@@ -2,6 +2,7 @@
 export { default as Button } from "./components/Button";
 export { default as ButtonMenu } from "./components/ButtonMenu";
 export { default as ButtonMenuItem } from "./components/ButtonMenu/ButtonMenuItem";
+export { default as Card } from "./components/Card";
 export { default as ResetCSS } from "./ResetCSS";
 
 export * from "./theme";

src/styled.d.ts

@@ -27,6 +27,13 @@ declare module "styled-components" {
       success: string;
       accent: string;
       light: string;
+      card: {
+        background: string;
+        borderColor: string;
+      };
     } & Pallete;
+    shadows: {
+      level1: string;
+    };
   }
 }

src/theme/dark.ts

@@ -15,6 +15,13 @@ const darkTheme: DefaultTheme = {
     textSubtle: pallete.lightSlate,
     accent: pallete.dorian,
     light: pallete.cloud,
+    card: {
+      background: "#2B223E",
+      borderColor: "rgba(14, 14, 44, 0.05)",
+    },
+  },
+  shadows: {
+    level1: "0px 2px 12px -8px rgba(25, 19, 38, 0.1), 0px 1px 1px rgba(25, 19, 38, 0.05)",
   },
 };
 

src/theme/light.ts

@@ -15,6 +15,13 @@ const lightTheme: DefaultTheme = {
     textSubtle: pallete.lightSlate,
     accent: pallete.dorian,
     light: pallete.cloud,
+    card: {
+      background: pallete.white,
+      borderColor: "rgba(14, 14, 44, 0.05)",
+    },
+  },
+  shadows: {
+    level1: "0px 2px 12px -8px rgba(25, 19, 38, 0.1), 0px 1px 1px rgba(25, 19, 38, 0.05)",
   },
 };