steffo/sophon
steffo/sophon
1
Fork 0
mirror of https://github.com/Steffo99/sophon.git synced 2024-12-22 14:54:22 +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 {RouteComponentProps} from "@reach/router"
import {Chapter, LayoutThreeCol} from "@steffo/bluelib-react"
@ -53,7 +54,7 @@ function App({..._}: RouteComponentProps) {
</>}
selectedRoute={({selection}) => <>
<Chapter>
<ResourceDescriptionBox resource={selection}/>
<ResourceDescriptionBox resource={selection} icon={faUsers}/>
<GroupMembersBox resource={selection}/>
</Chapter>
<ProjectRouter
@ -64,7 +65,7 @@ function App({..._}: RouteComponentProps) {
</>}
selectedRoute={({selection}) => <>
<Chapter>
<ResourceDescriptionBox resource={selection}/>
<ResourceDescriptionBox resource={selection} icon={faProjectDiagram}/>
</Chapter>
<NotebookRouter
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 * as React from "react"
import ReactMarkdown from "react-markdown"
@ -11,16 +13,17 @@ export interface 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(
() => (
<Box>
<Heading level={3}>
About <Idiomatic>{resource.value.name}</Idiomatic>
<FontAwesomeIcon icon={icon}/>&nbsp;About <Idiomatic>{resource.value.name}</Idiomatic>
</Heading>
<ReactMarkdown>
{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.
* @constructor
*/
export function ResourceRouter<Resource>({selection, unselectedRoute, selectedRoute}: ResourceRouterProps<Resource>): JSX.Element {
const UnselectedRoute = unselectedRoute
const SelectedRoute = selectedRoute
export function ResourceRouter<Resource>({selection, unselectedRoute: UnselectedRoute, selectedRoute: SelectedRoute}: ResourceRouterProps<Resource>): JSX.Element {
return React.useMemo(
() => {
if(selection) {