feat: card detail in card build

src/ui/BuildDeck/CardDetail.module.scss

+.detail {
+  z-index: 10;
+  position: absolute;
+  left: -100%;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0 10px 20px 10px;
+  transition: 0.2s;
+}
+
+.detail.open {
+  left: 0;
+}
+
+.container {
+  height: 100%;
+  background-color: rgba(141, 133, 166, 0.245);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(20px);
+  border-radius: 4px;
+}
+
+.btn-close {
+  position: absolute;
+  right: 5px;
+  top: 5px;
+}

src/ui/BuildDeck/CardDetail.tsx

+import { Button } from "antd";
+import styles from "./CardDetail.module.scss";
+import { LineOutlined } from "@ant-design/icons";
+import classNames from "classnames";
+
+export const CardDetail: React.FC<{
+  code: number;
+  open: boolean;
+  onClose: () => void;
+}> = ({ code, open, onClose }) => {
+  return (
+    <div className={classNames(styles.detail, { [styles.open]: open })}>
+      <div className={styles.container}>
+        <Button
+          className={styles["btn-close"]}
+          icon={<LineOutlined />}
+          type="text"
+          onClick={onClose}
+        />
+      </div>
+    </div>
+  );
+};

src/ui/BuildDeck/index.tsx

@@ -20,6 +20,7 @@ import { Background } from "../Shared";
 import styles from "./index.module.scss";
 
 import { DeckSelect } from "./DeckSelect";
+import { CardDetail } from "./CardDetail";
 
 const { Content, Sider } = Layout;
 
@@ -48,6 +49,7 @@ export const Component: React.FC = () => {
             onDownload={(id) => console.log(id)}
             onAdd={() => console.log("add")}
           />
+          <CardDetail code={123} open={false} onClose={() => {}} />
         </Sider>
         <Content className={styles.content}>
           <Deck />