🚧 Add WIP RepositorySummary component

code/frontend/src/components/RepositorySummary.js

@@ -0,0 +1,39 @@
+import React from "react"
+import Style from "./RepositorySummary.module.css"
+import classNames from "classnames"
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
+import Button from "./Button"
+import { faArchive, faPencilAlt, faTrash } from "@fortawesome/free-solid-svg-icons"
+
+
+export default function RepositorySummary({ className, icon, title, details, buttons, startDate, canDelete, canEdit, canArchive, ...props }) {
+    return (
+        <div className={classNames(Style.RepositorySummary, className)} {...props}>
+            <div className={Style.Left}>
+                <div className={Style.IconContainer}>
+                    <FontAwesomeIcon icon={icon}/>
+                </div>
+                <div className={Style.Title}>
+                    {title}
+                </div>
+                <div className={Style.StartDate}>
+                    {startDate}
+                </div>
+            </div>
+            <div className={Style.Middle}>
+                {details}
+            </div>
+            <div className={Style.Right}>
+                {canDelete ?
+                    <Button color={"Red"} icon={faTrash}>Delete</Button>
+                : null}
+                {canEdit ?
+                    <Button color={"Yellow"} icon={faPencilAlt}>Edit</Button>
+                : null}
+                {canArchive ?
+                    <Button color={"Grey"} icon={faArchive}>Archive</Button>
+                : null}
+            </div>
+        </div>
+    )
+}

code/frontend/src/components/RepositorySummary.module.css

@@ -0,0 +1,82 @@
+.RepositorySummary {
+    width: 100%;
+    height: 60px;
+
+    margin: 10px 0;
+
+    display: flex;
+}
+
+
+.Left {
+    width: 250px;
+    height: 60px;
+
+    display: grid;
+    grid-template-areas:
+        "a b"
+        "a c"
+        "a d"
+        "a e"
+    ;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: 5px 1fr 1fr 5px;
+
+    background-color: var(--bg-accent);
+    border-radius: 30px 0 0 30px;
+}
+
+.IconContainer {
+    margin-top: 5px;
+    margin-right: 15px;
+    margin-left: 5px;
+    margin-bottom: 5px;
+    width: 50px;
+    height: 50px;
+    border-radius: 50px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    background-color: var(--bg-light);
+    color: var(--fg-primary);
+
+    font-size: x-large;
+
+    grid-area: a;
+}
+
+.Title {
+    grid-area: c;
+
+    align-self: flex-end;
+}
+
+.StartDate {
+    grid-area: d;
+    font-size: small;
+
+    align-self: flex-start;
+}
+
+.Middle {
+    flex-grow: 1;
+
+    height: 60px;
+
+    background-color: var(--bg-light);
+}
+
+.Right {
+    width: 261px;
+    height: 60px;
+    padding: 5px;
+
+    background-color: var(--bg-accent);
+    border-radius: 0 30px 30px 0;
+
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+}