mirror of
https://github.com/Steffo99/sophon.git
synced 2024-12-22 06:44:21 +00:00
✨ Generify ResourceDescriptionBox
This commit is contained in:
parent
222104e051
commit
c642ba62c4
3 changed files with 46 additions and 29 deletions
|
@ -6,8 +6,8 @@ import {AuthorizationRouter} from "./components/authorization/AuthorizationRoute
|
|||
import {AuthorizationStepPage} from "./components/authorization/AuthorizationStepPage"
|
||||
import {SophonFooter} from "./components/elements/SophonFooter"
|
||||
import {ErrorCatcherBox} from "./components/errors/ErrorCatcherBox"
|
||||
import {ResourceDescriptionBox} from "./components/generic/ResourceDescriptionBox"
|
||||
import {GroupCreateBox} from "./components/group/GroupCreateBox"
|
||||
import {GroupDescriptionBox} from "./components/group/GroupDescriptionBox"
|
||||
import {GroupListBox} from "./components/group/GroupListBox"
|
||||
import {GroupMembersBox} from "./components/group/GroupMembersBox"
|
||||
import {GroupRouter} from "./components/group/GroupRouter"
|
||||
|
@ -36,7 +36,9 @@ function App({..._}: RouteComponentProps) {
|
|||
<InstanceStepPage/>
|
||||
</>}
|
||||
selectedRoute={() => <>
|
||||
<InstanceDescriptionBox/>
|
||||
<Chapter>
|
||||
<InstanceDescriptionBox/>
|
||||
</Chapter>
|
||||
<AuthorizationProvider>
|
||||
<CacheProvider>
|
||||
<AuthorizationRouter
|
||||
|
@ -51,7 +53,7 @@ function App({..._}: RouteComponentProps) {
|
|||
</>}
|
||||
selectedRoute={({selection}) => <>
|
||||
<Chapter>
|
||||
<GroupDescriptionBox resource={selection}/>
|
||||
<ResourceDescriptionBox resource={selection}/>
|
||||
<GroupMembersBox resource={selection}/>
|
||||
</Chapter>
|
||||
<ProjectRouter
|
||||
|
@ -61,10 +63,17 @@ function App({..._}: RouteComponentProps) {
|
|||
<GroupCreateBox resource={selection}/>
|
||||
</>}
|
||||
selectedRoute={({selection}) => <>
|
||||
<Chapter>
|
||||
<ResourceDescriptionBox resource={selection}/>
|
||||
</Chapter>
|
||||
<NotebookRouter
|
||||
projectPk={selection.value.slug}
|
||||
unselectedRoute={({viewSet}) => <NotebookListBox viewSet={viewSet}/>}
|
||||
selectedRoute={DebugBox}
|
||||
unselectedRoute={({viewSet}) => <>
|
||||
<NotebookListBox viewSet={viewSet}/>
|
||||
</>}
|
||||
selectedRoute={(props) => <>
|
||||
<DebugBox {...props}/>
|
||||
</>}
|
||||
/>
|
||||
</>}
|
||||
/>
|
||||
|
|
32
frontend/src/components/generic/ResourceDescriptionBox.tsx
Normal file
32
frontend/src/components/generic/ResourceDescriptionBox.tsx
Normal file
|
@ -0,0 +1,32 @@
|
|||
import {Box, Heading, Idiomatic} from "@steffo/bluelib-react"
|
||||
import * as React from "react"
|
||||
import ReactMarkdown from "react-markdown"
|
||||
import {ManagedResource} from "../../hooks/useManagedViewSet"
|
||||
|
||||
|
||||
export interface NamedAndDescribed {
|
||||
name: string,
|
||||
description: string,
|
||||
}
|
||||
|
||||
|
||||
export interface ResourceDescriptionBoxProps<T extends NamedAndDescribed> {
|
||||
resource: ManagedResource<T>
|
||||
}
|
||||
|
||||
|
||||
export function ResourceDescriptionBox<T extends NamedAndDescribed>({resource}: ResourceDescriptionBoxProps<T>): JSX.Element {
|
||||
return React.useMemo(
|
||||
() => (
|
||||
<Box>
|
||||
<Heading level={3}>
|
||||
About <Idiomatic>{resource.value.name}</Idiomatic>
|
||||
</Heading>
|
||||
<ReactMarkdown>
|
||||
{resource.value.description}
|
||||
</ReactMarkdown>
|
||||
</Box>
|
||||
),
|
||||
[resource],
|
||||
)
|
||||
}
|
|
@ -1,24 +0,0 @@
|
|||
import {Box, Heading, Idiomatic} from "@steffo/bluelib-react"
|
||||
import * as React from "react"
|
||||
import ReactMarkdown from "react-markdown"
|
||||
import {ManagedResource} from "../../hooks/useManagedViewSet"
|
||||
import {SophonResearchGroup} from "../../types/SophonTypes"
|
||||
|
||||
|
||||
export interface GroupDescriptionBoxProps {
|
||||
resource: ManagedResource<SophonResearchGroup>
|
||||
}
|
||||
|
||||
|
||||
export function GroupDescriptionBox({resource}: GroupDescriptionBoxProps): JSX.Element {
|
||||
return (
|
||||
<Box>
|
||||
<Heading level={3}>
|
||||
About <Idiomatic>{resource.value.name}</Idiomatic>
|
||||
</Heading>
|
||||
<ReactMarkdown>
|
||||
{resource.value.description}
|
||||
</ReactMarkdown>
|
||||
</Box>
|
||||
)
|
||||
}
|
Loading…
Reference in a new issue