feat: add table

Author: UndeadMe

public/img/figma.png

@@ -0,0 +1,55 @@
+import styles from './CompanyTable.module.css'
+
+export default function CompanyTable() {
+    return (
+        <div className={styles["table"]}>
+            <div className={styles["table-header"]}>
+                <div className={styles["header__item"]}>CompanyName</div>
+                <div className={styles["header__item"]}>Type</div>
+                <div className={styles["header__item"]}>Date</div>
+                <div className={styles["header__item"]}>Amount</div>
+                <div className={styles["header__item"]}>Employee Status</div>
+            </div>
+            <div className={styles["table-content"]}>	
+                <div className={styles["table-row"]}>		
+                    <div className={styles["table-data"]}>
+                        <div className={styles["company-brand"]}>
+                            <div className={styles["company-brand-logo"]}>
+                                <img className={styles["company-brand-img"]} src="/img/figma.png" alt="" />
+                            </div>
+                            <div className={styles["company-brand-title"]}>
+                                <h1>Figma</h1>
+                                <h3>Application</h3>
+                            </div>
+                        </div>
+                    </div>
+                    <div className={styles["table-data"]}>Subscription</div>
+                    <div className={styles["table-data"]}>July 11.07.2023</div>
+                    <div className={styles["table-data"]}>$624,00.90</div>
+                    <div className={styles["table-data"]}>
+                        Completed
+                    </div>
+                </div>
+                <div className={styles["table-row"]}>		
+                    <div className={styles["table-data"]}>
+                        <div className={styles["company-brand"]}>
+                            <div className={styles["company-brand-logo"]}>
+                                <img className={styles["company-brand-img"]} src="/img/figma.png" alt="" />
+                            </div>
+                            <div className={styles["company-brand-title"]}>
+                                <h1>Figma</h1>
+                                <h3>Application</h3>
+                            </div>
+                        </div>
+                    </div>
+                    <div className={styles["table-data"]}>Subscription</div>
+                    <div className={styles["table-data"]}>July 11.07.2023</div>
+                    <div className={styles["table-data"]}>$624,00.90</div>
+                    <div className={styles["table-data"]}>
+                        Completed
+                    </div>
+                </div>
+            </div>	
+        </div>
+    )
+}

src/components/CompanyTable.jsx

@@ -0,0 +1,75 @@
+.table {
+    margin-top: 40px;
+	width:100%;
+    padding: 10px;
+    border-radius: 20px;
+    background-color: #FFF;
+    box-shadow: 0 0 10px rgb(218, 218, 218, 0.5);
+    padding-bottom: 30px;
+}
+
+.table-header {
+	display: flex;
+	width: 100%;
+    background-color: #F8F8FA;
+    padding: 30px 0;
+    border-radius: 15px;
+    color: #8b8b8f;
+}
+
+.table-content {
+    margin-top: 20px;
+    display: flex;
+    flex-direction: column;
+    row-gap: 30px;
+}
+
+.table-row {
+	display: flex;
+	width: 100%;
+}
+
+.table-data, .header__item {
+	flex: 1 1 20%;
+	text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.header__item {
+	text-transform: uppercase;
+}
+
+.filter__link {
+	color:white;
+	text-decoration: none;
+	position:relative;
+	display: inline-block;
+}
+.company-brand {
+    display: flex;
+    align-items: center;
+    column-gap: 20px;
+}
+.company-brand-logo {
+    width: 60px;
+    height: 60px;
+    border-radius: 100%;
+    background-color: #f5f5f5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.company-brand-img {
+    width: 25px;
+}
+.company-brand-title {
+    text-align: left;
+}
+.company-brand-title h1 {
+    margin-bottom: 10px;
+}
+.company-brand-title h3 {
+    color: rgba(0, 0, 0, 0.3);
+}

src/components/CompanyTable.module.css

@@ -2,6 +2,7 @@ import { WalletMoney, MoneySend, UsdCoin } from 'iconsax-react'
 
 import TotalBox from '../components/TotalBox'
 import Chart from '../components/Chart'
+import CompanyTable from '../components/CompanyTable'
 
 import { More, Calendar } from 'iconsax-react'
 
@@ -123,6 +124,8 @@ export default function Overview() {
                     </div>
                 </div>
             </div>
+
+            <CompanyTable />
         </div>
     )
 }