cards page finished

2022-02-10 16:19:53 +05:00 · 2022-02-10 16:19:53 +05:00 · b7ef625cd7
parent 3696509128
commit b7ef625cd7
8 changed files with 88 additions and 3 deletions
--- a/src/App.js
+++ b/src/App.js
@ -7,6 +7,7 @@ import "./styles/style.scss";

 // IMPORT PAGES
 import Base from "./pages/Base";
+import Cards from "./pages/Cards";

 // IMPORT PAGES
 import Main from "./pages/Main";
@ -22,7 +23,7 @@ const App = () => {
        <Route path="/sign-in" element={<SignIn />} />
        <Route path="/sign-up" element={<SignUp />} />
        <Route path="/home" element={<Home ChildEl={Base} />} />
-        <Route path="/home/cards" element={<Home ChildEl={Base} />} />
+        <Route path="/home/cards" element={<Home ChildEl={Cards} />} />
      </Routes>
    </div>
  );
--- a/src/components/global/Side.js
+++ b/src/components/global/Side.js
@ -27,7 +27,7 @@ const Side = ({ sideOpen }) => {
                setLinkStage(1);
              }}
            >
-              <Link to="">
+              <Link to="/home/cards">
                <div className="link-img">
                  <img src={card} alt="link" />
                </div>
--- a/src/icons/add.svg
+++ b/src/icons/add.svg
@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9767 8.55814H5.02323C4.71811 8.55814 4.46509 8.30512 4.46509 8C4.46509 7.69489 4.71811 7.44186 5.02323 7.44186H10.9767C11.2818 7.44186 11.5349 7.69489 11.5349 8C11.5349 8.30512 11.2818 8.55814 10.9767 8.55814Z" fill="white"/>
+<path d="M8.00003 11.5349C7.69492 11.5349 7.44189 11.2819 7.44189 10.9767V5.02326C7.44189 4.71814 7.69492 4.46512 8.00003 4.46512C8.30515 4.46512 8.55817 4.71814 8.55817 5.02326V10.9767C8.55817 11.2819 8.30515 11.5349 8.00003 11.5349Z" fill="white"/>
+<path d="M10.2326 16H5.76744C1.72651 16 0 14.2735 0 10.2326V5.76744C0 1.72651 1.72651 0 5.76744 0H10.2326C14.2735 0 16 1.72651 16 5.76744V10.2326C16 14.2735 14.2735 16 10.2326 16ZM5.76744 1.11628C2.33674 1.11628 1.11628 2.33674 1.11628 5.76744V10.2326C1.11628 13.6633 2.33674 14.8837 5.76744 14.8837H10.2326C13.6633 14.8837 14.8837 13.6633 14.8837 10.2326V5.76744C14.8837 2.33674 13.6633 1.11628 10.2326 1.11628H5.76744Z" fill="white"/>
+</svg>
--- a/src/icons/card-black.svg
+++ b/src/icons/card-black.svg
@ -0,0 +1,7 @@
+<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.8605 9.1159H0.627907C0.284651 9.1159 0 8.83693 0 8.50052C0 8.16411 0.284651 7.88513 0.627907 7.88513H14.8605C15.2037 7.88513 15.4884 8.16411 15.4884 8.50052C15.4884 8.83693 15.2037 9.1159 14.8605 9.1159Z" fill="#3A3A3A"/>
+<path d="M11.6958 16H3.79258C0.920955 16 0 15.1056 0 12.3241V6.58868C0 4.3815 0.510716 3.07688 3.10607 2.92919C3.32374 2.92099 3.54979 2.91278 3.79258 2.91278H11.6958C14.5674 2.91278 15.4884 3.80714 15.4884 6.58868V12.4554C15.4549 15.1384 14.5339 16 11.6958 16ZM3.79258 4.14355C3.56654 4.14355 3.35723 4.15176 3.16468 4.15996C1.66607 4.25022 1.25581 4.56201 1.25581 6.58868V12.3241C1.25581 14.4246 1.60747 14.7692 3.79258 14.7692H11.6958C13.8558 14.7692 14.2074 14.441 14.2326 12.4471V6.58868C14.2326 4.48817 13.8809 4.14355 11.6958 4.14355H3.79258Z" fill="#3A3A3A"/>
+<path d="M14.8604 13.0708C14.7014 13.0708 14.5423 13.0133 14.4335 12.9067C14.3079 12.7918 14.2325 12.6277 14.2325 12.4554V6.58872C14.2325 4.48821 13.8809 4.14359 11.6958 4.14359H3.79255C3.56651 4.14359 3.3572 4.1518 3.16464 4.16C2.9972 4.16821 2.82972 4.10257 2.70414 3.9877C2.57856 3.87282 2.5116 3.70872 2.5116 3.53641C2.54509 0.86154 3.46604 0 6.30418 0H14.2074C17.079 0 18 0.894359 18 3.6759V9.41129C18 11.6185 17.4893 12.9231 14.8939 13.0708C14.8855 13.0708 14.8688 13.0708 14.8604 13.0708ZM3.79255 2.91282H11.6958C14.5674 2.91282 15.4883 3.80718 15.4883 6.58872V11.7744C16.4595 11.6021 16.7442 11.1098 16.7442 9.41129V3.6759C16.7442 1.57539 16.3925 1.23077 14.2074 1.23077H6.30418C4.39534 1.23077 3.90139 1.48513 3.79255 2.91282Z" fill="#3A3A3A"/>
+<path d="M4.7807 13.3826H3.34068C2.99742 13.3826 2.71277 13.1037 2.71277 12.7672C2.71277 12.4308 2.99742 12.1519 3.34068 12.1519H4.7807C5.12396 12.1519 5.40861 12.4308 5.40861 12.7672C5.40861 13.1037 5.13233 13.3826 4.7807 13.3826Z" fill="#3A3A3A"/>
+<path d="M9.4603 13.3826H6.5803C6.23704 13.3826 5.95239 13.1037 5.95239 12.7672C5.95239 12.4308 6.23704 12.1519 6.5803 12.1519H9.4603C9.80356 12.1519 10.0882 12.4308 10.0882 12.7672C10.0882 13.1037 9.81193 13.3826 9.4603 13.3826Z" fill="#3A3A3A"/>
+</svg>
--- a/src/pages/Cards.js
+++ b/src/pages/Cards.js
@ -0,0 +1,54 @@
+// IMPORT MODULES
+import React from "react";
+
+// IMPORT COMPONENTS
+import Breadcrumb from "../components/global/Breadcrumb";
+
+// IMPORT IMAGES
+import card from "../icons/card-black.svg";
+import add from "../icons/add.svg";
+
+const Cards = () => {
+  return (
+    <section className="cards">
+      <Breadcrumb
+        image={card}
+        link={"/home/cards"}
+        linkTitle={"Пластиковые карты"}
+      />
+      <div className="container">
+        <div className="cards-inner">
+          <div className="card-title">
+            <h2 className="cards-title">Онлайн-заявка для получения карты</h2>
+            <button type="button" className="card-btn sign-btn">
+              <div className="card-img">
+                <img src={add} alt="add" />
+              </div>
+              <h3>Заполнить заявку</h3>
+            </button>
+          </div>
+          <table className="home-table">
+            <tbody>
+              <tr className="table-head">
+                <th>ID</th>
+                <th>Тип</th>
+                <th>Дата</th>
+                <th>Статус</th>
+                <th>Действие</th>
+              </tr>
+              <tr>
+                <td>Заявок на карту нет</td>
+                <td></td>
+                <td></td>
+                <td></td>
+                <td></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Cards;
--- a/src/styles/_cards.scss
+++ b/src/styles/_cards.scss
@ -0,0 +1,17 @@
+.card-title {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3rem;
+  align-items: center;
+}
+
+.cards-inner {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.card-btn {
+  max-width: 22.6rem;
+  justify-self: right;
+}
--- a/src/styles/_side.scss
+++ b/src/styles/_side.scss
@ -84,7 +84,7 @@
  background: $dark-green;

  span {
-    font-size: 1.2rem;
+    font-size: 1.6rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@ -15,3 +15,4 @@
@import "./side";
@import "./base";
@import "./breadcrumb";
+@import "./cards";