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

🔧 Add an icon to ResourceDescriptionBox

Browse source
This commit is contained in:
Steffo 2021-10-13 04:51:55 +02:00
parent 5896fad3a6
commit 21ebec42ac
Signed by: steffo
GPG key ID: 6965406171929D01
3 changed files with 10 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/App.tsx
View file

@ -1,3 +1,4 @@
import {faProjectDiagram, faUsers} from "@fortawesome/free-solid-svg-icons"
import * as Reach from "@reach/router" import * as Reach from "@reach/router"
import {RouteComponentProps} from "@reach/router" import {RouteComponentProps} from "@reach/router"
import {Chapter, LayoutThreeCol} from "@steffo/bluelib-react" import {Chapter, LayoutThreeCol} from "@steffo/bluelib-react"
@ -53,7 +54,7 @@ function App({..._}: RouteComponentProps) {
</>} </>}
selectedRoute={({selection}) => <> selectedRoute={({selection}) => <>
<Chapter> <Chapter>
<ResourceDescriptionBox resource={selection}/> <ResourceDescriptionBox resource={selection} icon={faUsers}/>
<GroupMembersBox resource={selection}/> <GroupMembersBox resource={selection}/>
</Chapter> </Chapter>
<ProjectRouter <ProjectRouter
@ -64,7 +65,7 @@ function App({..._}: RouteComponentProps) {
</>} </>}
selectedRoute={({selection}) => <> selectedRoute={({selection}) => <>
<Chapter> <Chapter>
<ResourceDescriptionBox resource={selection}/> <ResourceDescriptionBox resource={selection} icon={faProjectDiagram}/>
</Chapter> </Chapter>
<NotebookRouter <NotebookRouter
projectPk={selection.value.slug} projectPk={selection.value.slug}

9
frontend/src/components/generic/ResourceDescriptionBox.tsx
View file

@ -1,3 +1,5 @@
import {IconDefinition} from "@fortawesome/fontawesome-svg-core"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import {Box, Heading, Idiomatic} from "@steffo/bluelib-react" import {Box, Heading, Idiomatic} from "@steffo/bluelib-react"
import * as React from "react" import * as React from "react"
import ReactMarkdown from "react-markdown" import ReactMarkdown from "react-markdown"
@ -11,16 +13,17 @@ export interface NamedAndDescribed {
export interface ResourceDescriptionBoxProps<T extends NamedAndDescribed> { export interface ResourceDescriptionBoxProps<T extends NamedAndDescribed> {
resource: ManagedResource<T> resource: ManagedResource<T>,
icon: IconDefinition,
} }
export function ResourceDescriptionBox<T extends NamedAndDescribed>({resource}: ResourceDescriptionBoxProps<T>): JSX.Element { export function ResourceDescriptionBox<T extends NamedAndDescribed>({resource, icon}: ResourceDescriptionBoxProps<T>): JSX.Element {
return React.useMemo( return React.useMemo(
() => ( () => (
<Box> <Box>
<Heading level={3}> <Heading level={3}>
About <Idiomatic>{resource.value.name}</Idiomatic> <FontAwesomeIcon icon={icon}/>&nbsp;About <Idiomatic>{resource.value.name}</Idiomatic>
</Heading> </Heading>
<ReactMarkdown> <ReactMarkdown>
{resource.value.description} {resource.value.description}

5
frontend/src/components/routing/ResourceRouter.tsx
View file

@ -20,10 +20,7 @@ export interface ResourceRouterProps<Resource> {
* @warning Due to some particular memoization, changes to `unselectedRoute` and `selectedRoute` will apply **only** when `selection` changes. * @warning Due to some particular memoization, changes to `unselectedRoute` and `selectedRoute` will apply **only** when `selection` changes.
* @constructor * @constructor
*/ */
export function ResourceRouter<Resource>({selection, unselectedRoute, selectedRoute}: ResourceRouterProps<Resource>): JSX.Element { export function ResourceRouter<Resource>({selection, unselectedRoute: UnselectedRoute, selectedRoute: SelectedRoute}: ResourceRouterProps<Resource>): JSX.Element {
const UnselectedRoute = unselectedRoute
const SelectedRoute = selectedRoute
return React.useMemo( return React.useMemo(
() => { () => {
if(selection) { if(selection) {