Merge pull request #57 from SELab-2/react-components

Aanmaken react table + button component

frontend/package.json

@@ -29,4 +29,4 @@
     "typescript": "^5.2.2",
     "vite": "^5.1.4"
   }
-}
+}

frontend/src/assets/styles/table.css

@@ -0,0 +1,27 @@
+.title_lines {
+    position: relative;
+    font-size: 25px;
+    z-index: 1;
+    overflow: hidden;
+    text-align: center;
+}
+
+.title_lines:before, .title_lines:after {
+    position: absolute;
+    top: 51%;
+    overflow: hidden;
+    width: 48%;
+    height: 1px;
+    content: '\a0';
+    background-color: #cccccc;
+    margin-left: 2%;
+}
+
+.title_lines:before {
+    margin-left: -50%;
+    text-align: right;
+}
+
+body {
+    padding: 50px 0;
+}

frontend/src/components/RegularButton.tsx

@@ -0,0 +1,15 @@
+import {JSX} from "react";
+import {IoMdAdd} from "react-icons/io";
+
+export function RegularButton(props: { placeholder: string, add: boolean }): JSX.Element {
+    return (
+        <button className="button is-rounded">
+            {props.add ? (
+                <span className="icon">
+                    <IoMdAdd/>
+                </span>
+            ) : null}
+            <span>{props.placeholder}</span>
+        </button>
+    );
+}

frontend/src/components/SearchBar.tsx

@@ -0,0 +1,15 @@
+import {JSX} from "react";
+import { FaSearch } from "react-icons/fa";
+
+export function SearchBar(props: {placeholder: string}): JSX.Element {
+    return (
+    <div className={"field mt-4 ml-5"}>
+        <p className={"control has-icons-left"}>
+            <input className={"input is-rounded"} type="text" placeholder={props.placeholder}/>
+            <span className={"icon is-small is-left"}>
+                <FaSearch/>
+            </span>
+        </p>
+    </div>
+    );
+}

frontend/src/components/Table.tsx

@@ -0,0 +1,48 @@
+import {JSX} from "react";
+import "../assets/styles/table.css"
+
+const TableData: { "Naam": string, "Aantal projecten": number, "Kortste deadline": string }[] = [
+    {
+        "Naam": "Automaten, berekenbaarheid & complexiteit",
+        "Aantal projecten": 3,
+        "Kortste deadline": "17:00 - 23/02/2024"
+    },
+    {
+        "Naam": "Computationele Biologie",
+        "Aantal projecten": 2,
+        "Kortste deadline": "19:00 - 25/02/2024"
+    }
+];
+
+interface TableRow {
+    "Naam": string;
+    "Aantal projecten": number;
+    "Kortste deadline": string;
+}
+
+export function Table(props: { title: string, keys: (keyof TableRow)[] }): JSX.Element {
+    return (
+        <>
+            <div className="title_lines">{props.title}</div>
+            <table className={"table is-fullwidth"}>
+                <thead>
+                <tr>
+                    {props.keys.map((field, index) => (
+                        <th key={index}>{field}</th>
+                    ))}
+                </tr>
+                </thead>
+                <tbody>
+                {TableData.map((row, rowIndex) => (
+                    <tr key={rowIndex}>
+                        {props.keys.map((field, colIndex) => (
+                            <td key={colIndex}>{row[field]}</td>
+                        ))}
+                    </tr>
+                ))}
+                </tbody>
+            </table>
+        </>
+
+    );
+}