1
Fork 0
mirror of https://github.com/Steffo99/sophon.git synced 2024-12-22 23:04:21 +00:00

🔧 Add status text to the NotebookListBox

This commit is contained in:
Steffo 2021-10-07 19:26:46 +02:00
parent 161c154918
commit 5e74e9b8d7
Signed by: steffo
GPG key ID: 6965406171929D01
3 changed files with 38 additions and 1 deletions

View file

@ -0,0 +1,4 @@
.Empty {
opacity: 0.5;
font-style: italic;
}

View file

@ -0,0 +1,18 @@
import {faExpand} from "@fortawesome/free-solid-svg-icons"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import * as React from "react"
import Style from "./Empty.module.css"
export interface EmptyProps {
children: React.ReactNode,
}
export function Empty({children}: EmptyProps): JSX.Element {
return (
<span className={Style.Empty}>
<FontAwesomeIcon icon={faExpand}/>&nbsp;{children}
</span>
)
}

View file

@ -2,6 +2,8 @@ import {Box, Heading} from "@steffo/bluelib-react"
import * as React from "react"
import {ManagedViewSet} from "../../hooks/useManagedViewSet"
import {SophonNotebook} from "../../types/SophonTypes"
import {Empty} from "../elements/Empty"
import {Loading} from "../elements/Loading"
import {NotebookResourcePanel} from "./NotebookResourcePanel"
@ -11,6 +13,19 @@ export interface NotebookListBoxProps {
export function NotebookListBox({viewSet}: NotebookListBoxProps): JSX.Element {
const resources = React.useMemo(
() => {
if(!viewSet.resources) {
return <Loading/>
}
if(viewSet.resources.length === 0) {
return <Empty>This project has no notebooks.</Empty>
}
return viewSet.resources?.map(res => <NotebookResourcePanel resource={res} key={res.value.slug}/>)
},
[viewSet],
)
return (
<Box>
<Heading level={3}>
@ -19,7 +34,7 @@ export function NotebookListBox({viewSet}: NotebookListBoxProps): JSX.Element {
<p>
Notebooks are interactive Python documents that you can edit in your browser and run on Sophon server.
</p>
{viewSet.resources?.map(res => <NotebookResourcePanel resource={res} key={res.value.slug}/>)}
{resources}
</Box>
)
}