🚧 Start working on "Create object" panel

frontend/src/components/NewResearchGroupPanel.tsx

@@ -0,0 +1,32 @@
+import * as React from "react"
+import {Field, Button, Select} from "@steffo/bluelib-react";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faPlus} from "@fortawesome/free-solid-svg-icons";
+import {ObjectPanel} from "./ObjectPanel";
+
+
+export function NewResearchGroupPanel(): JSX.Element {
+
+    return (
+        <ObjectPanel>
+            <ObjectPanel.Icon>
+                <Select>
+                    <Select.Option value={"🌐"}/>
+                    <Select.Option value={"🎓"}/>
+                    <Select.Option value={"🔒"}/>
+                </Select>
+            </ObjectPanel.Icon>
+            <ObjectPanel.Name>
+                <Field placeholder={"Project name"} required/>
+            </ObjectPanel.Name>
+            <ObjectPanel.Text>
+
+            </ObjectPanel.Text>
+            <ObjectPanel.Buttons>
+                <Button>
+                    <FontAwesomeIcon icon={faPlus}/>&nbsp;Create
+                </Button>
+            </ObjectPanel.Buttons>
+        </ObjectPanel>
+    )
+}

frontend/src/components/ObjectPanel.module.css

@@ -1,7 +1,8 @@
 .ObjectPanel {
     display: grid;
     grid-template-areas: "icon name text buttons";
-    grid-template-columns: auto 1fr 4fr auto;
+    /* Not sure about this, there probably is a better way */
+    grid-template-columns: auto minmax(25%, 1fr) auto auto;
     grid-gap: 8px;
 
     justify-content: center;

frontend/src/components/ObjectPanel.tsx

@@ -6,8 +6,8 @@ import {BluelibHTMLProps} from "@steffo/bluelib-react/dist/types";
 import classNames from "classnames"
 
 
-interface ObjectPanelProps extends PanelProps {}
+export interface ObjectPanelProps extends PanelProps {}
-interface ObjectSubPanelProps extends BluelibHTMLProps<HTMLDivElement> {}
+export interface ObjectSubPanelProps extends BluelibHTMLProps<HTMLDivElement> {}
 
 
 export function ObjectPanel({className, ...props}: ObjectPanelProps): JSX.Element {

frontend/src/components/ResearchProjectsByGroupListBox.tsx

@@ -1,11 +1,12 @@
 import * as React from "react"
-import * as ReactDOM from "react-dom"
 import {useDRFManagedList} from "../hooks/useDRF";
-import {ResearchGroup, ResearchProject} from "../types";
+import {ResearchProject} from "../types";
 import {Loading} from "./Loading";
-import {ResearchGroupPanel} from "./ResearchGroupPanel";
 import {Box, Heading} from "@steffo/bluelib-react";
 import {ResearchProjectPanel} from "./ResearchProjectPanel";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faPlus} from "@fortawesome/free-solid-svg-icons";
+import {NewResearchGroupPanel} from "./NewResearchGroupPanel";
 
 
 interface ProjectsListBoxProps {
@@ -35,6 +36,7 @@ export function ResearchProjectsByGroupListBox({group_pk}: ProjectsListBoxProps)
             </Heading>
             <div>
                 {groups}
+                <NewResearchGroupPanel/>
             </div>
         </Box>
     )