add first try table #104

Sonatai · Jun 14, 2023 · 0869a53 · 0869a53
1 parent 010a97f
commit 0869a53
Show file tree

Hide file tree

Showing 3 changed files with 170 additions and 0 deletions.
diff --git a/src/components/shared/Table/Table.tsx b/src/components/shared/Table/Table.tsx
@@ -0,0 +1,40 @@
+import './styles.css';
+
+import { nanoid } from 'nanoid';
+import { ReactNode } from 'react';
+
+interface IRow {
+    row: Array<string | ReactNode>;
+}
+
+interface ITable {
+    headers: string[];
+    rows: IRow[];
+}
+
+export const Table = (props: ITable) => {
+    const { headers, rows } = props;
+
+    return (
+        <div className="table__container">
+            <table>
+                <thead>
+                    <tr>
+                        {headers.map((header) => (
+                            <th key={nanoid()}>{header}</th>
+                        ))}
+                    </tr>
+                </thead>
+                <tbody>
+                    {rows.map((row) => (
+                        <tr key={nanoid()}>
+                            {row.row.map((content) => (
+                                <td key={nanoid()}>{content}</td>
+                            ))}
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    );
+};
diff --git a/src/components/shared/Table/styles.css b/src/components/shared/Table/styles.css
@@ -0,0 +1,110 @@
+.table__container {
+    display: flex;
+    justify-content: center;
+    /* margin: 20vh auto; */
+    width: full;
+    /* background-color: #fff; */
+    /* border-radius: 10px; */
+    /* padding: 5px; */
+}
+
+table {
+    width: 100%;
+    /* box-shadow: 15px 15px #ffffff0d; */
+    border-collapse: collapse;
+}
+
+tr:nth-of-type(odd) {
+    background-color: #006cc6;
+    color: #fff;
+}
+tr:nth-of-type(even) {
+    background-color: #fff;
+    color: #333;
+}
+
+th {
+    background-color: #330835;
+    color: #fff;
+    font-weight: 800;
+    font-size: 20px;
+}
+
+td,
+th {
+    padding: 12px;
+    /* border: 1px solid #ccc; */
+    vertical-align: baseline;
+}
+
+@media only screen and (max-width: 768px),
+    (min-device-width: 768px) and (max-device-width: 992px) {
+    .table-container {
+        width: 95%;
+        background: transparent;
+    }
+
+    table,
+    thead,
+    tbody,
+    th,
+    td,
+    tr {
+        display: block;
+    }
+
+    thead tr {
+        position: absolute;
+        top: -9999px;
+        left: -9999px;
+    }
+
+    tr {
+        border: 1px solid #ccc;
+        margin-bottom: 10px;
+    }
+
+    td {
+        border: none;
+        border-bottom: 1px solid #eee;
+        position: relative;
+        padding-left: 50%;
+        text-align: right;
+    }
+
+    td::before {
+        position: absolute;
+        top: 6px;
+        left: 6px;
+        width: 45%;
+        padding-right: 10px;
+        white-space: nowrap;
+        font-size: 16px;
+        font-weight: 600;
+        text-align: left;
+    }
+
+    td:nth-of-type(1)::before {
+        content: '#';
+    }
+
+    td:nth-of-type(2)::before {
+        content: 'Full Name';
+    }
+
+    td:nth-of-type(3)::before {
+        content: 'Age';
+    }
+
+    td:nth-of-type(4)::before {
+        content: 'Status';
+    }
+
+    td:nth-of-type(5)::before {
+        content: 'Job Title';
+    }
+
+    td:nth-of-type(6)::before {
+        content: 'Action';
+    }
+}
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
@@ -10,6 +10,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Layout } from '../../components/shared/Layout/Layout';
 import { SyntaxHighlighter } from '../../components/shared/SyntaxHighlighter';
 import { CustomTab } from '../../components/shared/Tab/CustomTab';
+import { Table } from '../../components/shared/Table/Table';
 import { useScrollUp } from '../../Hooks/useScrollUp';
 
 const groovySnippet = {
@@ -47,6 +48,25 @@ export const Home = (): JSX.Element => {
 
     return (
         <Layout>
+            <Table
+                headers={['shape', 'mode', 'expected']}
+                rows={[
+                    {
+                        row: [
+                            '[2,3]',
+                            '"fap"',
+                            '(2x3):[\n[ -4.0 , -3.0 , -2.0 ],\n [ -1.0 , 0.0 , 1.0 ]\n]',
+                        ],
+                    },
+                    {
+                        row: [
+                            '[2,2,3,4]',
+                            '"fp"',
+                            '(2x2x3x4):[\n [\n [\n [ -4.0 , -3.0 , -2.0 , -1.0 ],\n [ 0.0 , 1.0 , 2.0 , 3.0 ],\n [ 4.0 , 5.0 , -4.0 , -3.0 ]\n ],\n [\n [ -2.0 , -1.0 , 0.0 , 1.0 ],\n [ 2.0 , 3.0 , 4.0 , 5.0 ],\n [ -4.0 , -3.0 , -2.0 , -1.0 ]\n ]\n ],\n [\n [\n [ 0.0 , 1.0 , 2.0 , 3.0 ],\n [ 4.0 , 5.0 , -4.0 , -3.0 ],\n [ -2.0 , -1.0 , 0.0 , 1.0 ]\n ],\n [\n [ 2.0 , 3.0 , 4.0 , 5.0 ],\n [ -4.0 , -3.0 , -2.0 , -1.0 ],\n [ 0.0 , 1.0 , 2.0 , 3.0 ]\n ]\n ]\n]',
+                        ],
+                    },
+                ]}
+            />
             <h1 className="home__headline">Neureka</h1>
             <p className="home__description">
                 A lightweight open source platform independent nd-array library