mirror of
https://github.com/Steffo99/sophon.git
synced 2024-12-22 23:04:21 +00:00
🔧 Generify DescriptionBox
This commit is contained in:
parent
21ebec42ac
commit
58b92a8f8f
7 changed files with 64 additions and 67 deletions
|
@ -12,9 +12,10 @@ import {GroupCreateBox} from "./components/group/GroupCreateBox"
|
||||||
import {GroupListBox} from "./components/group/GroupListBox"
|
import {GroupListBox} from "./components/group/GroupListBox"
|
||||||
import {GroupMembersBox} from "./components/group/GroupMembersBox"
|
import {GroupMembersBox} from "./components/group/GroupMembersBox"
|
||||||
import {GroupRouter} from "./components/group/GroupRouter"
|
import {GroupRouter} from "./components/group/GroupRouter"
|
||||||
|
import {SophonDescriptionBox} from "./components/informative/SophonDescriptionBox"
|
||||||
import {InstanceDescriptionBox} from "./components/instance/InstanceDescriptionBox"
|
import {InstanceDescriptionBox} from "./components/instance/InstanceDescriptionBox"
|
||||||
|
import {InstanceFormBox} from "./components/instance/InstanceFormBox"
|
||||||
import {InstanceRouter} from "./components/instance/InstanceRouter"
|
import {InstanceRouter} from "./components/instance/InstanceRouter"
|
||||||
import {InstanceStepPage} from "./components/instance/InstanceStepPage"
|
|
||||||
import {NotebookListBox} from "./components/notebook/NotebookListBox"
|
import {NotebookListBox} from "./components/notebook/NotebookListBox"
|
||||||
import {NotebookRouter} from "./components/notebook/NotebookRouter"
|
import {NotebookRouter} from "./components/notebook/NotebookRouter"
|
||||||
import {DebugBox} from "./components/placeholder/DebugBox"
|
import {DebugBox} from "./components/placeholder/DebugBox"
|
||||||
|
@ -30,16 +31,15 @@ import {ThemeProvider} from "./contexts/theme"
|
||||||
|
|
||||||
function App({..._}: RouteComponentProps) {
|
function App({..._}: RouteComponentProps) {
|
||||||
return React.useMemo(
|
return React.useMemo(
|
||||||
() => (
|
() => <>
|
||||||
|
<SophonDescriptionBox/>
|
||||||
<InstanceProvider>
|
<InstanceProvider>
|
||||||
<InstanceRouter
|
<InstanceRouter
|
||||||
unselectedRoute={() => <>
|
unselectedRoute={() => <>
|
||||||
<InstanceStepPage/>
|
<InstanceFormBox/>
|
||||||
</>}
|
</>}
|
||||||
selectedRoute={() => <>
|
selectedRoute={() => <>
|
||||||
<Chapter>
|
<InstanceDescriptionBox/>
|
||||||
<InstanceDescriptionBox/>
|
|
||||||
</Chapter>
|
|
||||||
<AuthorizationProvider>
|
<AuthorizationProvider>
|
||||||
<CacheProvider>
|
<CacheProvider>
|
||||||
<AuthorizationRouter
|
<AuthorizationRouter
|
||||||
|
@ -64,9 +64,7 @@ function App({..._}: RouteComponentProps) {
|
||||||
<GroupCreateBox resource={selection}/>
|
<GroupCreateBox resource={selection}/>
|
||||||
</>}
|
</>}
|
||||||
selectedRoute={({selection}) => <>
|
selectedRoute={({selection}) => <>
|
||||||
<Chapter>
|
<ResourceDescriptionBox resource={selection} icon={faProjectDiagram}/>
|
||||||
<ResourceDescriptionBox resource={selection} icon={faProjectDiagram}/>
|
|
||||||
</Chapter>
|
|
||||||
<NotebookRouter
|
<NotebookRouter
|
||||||
projectPk={selection.value.slug}
|
projectPk={selection.value.slug}
|
||||||
unselectedRoute={({viewSet}) => <>
|
unselectedRoute={({viewSet}) => <>
|
||||||
|
@ -87,7 +85,7 @@ function App({..._}: RouteComponentProps) {
|
||||||
</>}
|
</>}
|
||||||
/>
|
/>
|
||||||
</InstanceProvider>
|
</InstanceProvider>
|
||||||
),
|
</>,
|
||||||
[],
|
[],
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
29
frontend/src/components/elements/DescriptionBox.tsx
Normal file
29
frontend/src/components/elements/DescriptionBox.tsx
Normal file
|
@ -0,0 +1,29 @@
|
||||||
|
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"
|
||||||
|
|
||||||
|
|
||||||
|
export interface DescriptionBox {
|
||||||
|
icon: IconDefinition,
|
||||||
|
name: string,
|
||||||
|
description: string,
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function DescriptionBox({icon, name, description}: DescriptionBox): JSX.Element {
|
||||||
|
return React.useMemo(
|
||||||
|
() => (
|
||||||
|
<Box>
|
||||||
|
<Heading level={3}>
|
||||||
|
<FontAwesomeIcon icon={icon}/> About <Idiomatic>{name}</Idiomatic>
|
||||||
|
</Heading>
|
||||||
|
<ReactMarkdown>
|
||||||
|
{description}
|
||||||
|
</ReactMarkdown>
|
||||||
|
</Box>
|
||||||
|
),
|
||||||
|
[icon, name, description],
|
||||||
|
)
|
||||||
|
}
|
|
@ -1,9 +1,7 @@
|
||||||
import {IconDefinition} from "@fortawesome/fontawesome-svg-core"
|
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 * as React from "react"
|
||||||
import ReactMarkdown from "react-markdown"
|
|
||||||
import {ManagedResource} from "../../hooks/useManagedViewSet"
|
import {ManagedResource} from "../../hooks/useManagedViewSet"
|
||||||
|
import {DescriptionBox} from "../elements/DescriptionBox"
|
||||||
|
|
||||||
|
|
||||||
export interface NamedAndDescribed {
|
export interface NamedAndDescribed {
|
||||||
|
@ -21,14 +19,11 @@ export interface ResourceDescriptionBoxProps<T extends NamedAndDescribed> {
|
||||||
export function ResourceDescriptionBox<T extends NamedAndDescribed>({resource, icon}: ResourceDescriptionBoxProps<T>): JSX.Element {
|
export function ResourceDescriptionBox<T extends NamedAndDescribed>({resource, icon}: ResourceDescriptionBoxProps<T>): JSX.Element {
|
||||||
return React.useMemo(
|
return React.useMemo(
|
||||||
() => (
|
() => (
|
||||||
<Box>
|
<DescriptionBox
|
||||||
<Heading level={3}>
|
icon={icon}
|
||||||
<FontAwesomeIcon icon={icon}/> About <Idiomatic>{resource.value.name}</Idiomatic>
|
name={resource.value.name}
|
||||||
</Heading>
|
description={resource.value.description}
|
||||||
<ReactMarkdown>
|
/>
|
||||||
{resource.value.description}
|
|
||||||
</ReactMarkdown>
|
|
||||||
</Box>
|
|
||||||
),
|
),
|
||||||
[resource],
|
[resource],
|
||||||
)
|
)
|
||||||
|
|
14
frontend/src/components/informative/SophonDescriptionBox.tsx
Normal file
14
frontend/src/components/informative/SophonDescriptionBox.tsx
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
import {faServer} from "@fortawesome/free-solid-svg-icons"
|
||||||
|
import * as React from "react"
|
||||||
|
import {DescriptionBox} from "../elements/DescriptionBox"
|
||||||
|
|
||||||
|
|
||||||
|
export function SophonDescriptionBox(): JSX.Element {
|
||||||
|
return (
|
||||||
|
<DescriptionBox
|
||||||
|
icon={faServer}
|
||||||
|
name={"Sophon"}
|
||||||
|
description={"Sophon is software that allows you to store, execute, and optionally share your research in a secure cloud hosted by your institution."}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
|
@ -1,16 +0,0 @@
|
||||||
import {Box, Heading} from "@steffo/bluelib-react"
|
|
||||||
import * as React from "react"
|
|
||||||
|
|
||||||
|
|
||||||
export function WhatIsSophonBox(): JSX.Element {
|
|
||||||
return (
|
|
||||||
<Box>
|
|
||||||
<Heading level={3}>
|
|
||||||
What is Sophon?
|
|
||||||
</Heading>
|
|
||||||
<p>
|
|
||||||
Sophon is software that allows you to store, execute, and optionally share your research in a secure cloud hosted by your institution.
|
|
||||||
</p>
|
|
||||||
</Box>
|
|
||||||
)
|
|
||||||
}
|
|
|
@ -1,7 +1,7 @@
|
||||||
import {Box, Heading, Idiomatic} from "@steffo/bluelib-react"
|
import {faUniversity} from "@fortawesome/free-solid-svg-icons"
|
||||||
import * as React from "react"
|
import * as React from "react"
|
||||||
import ReactMarkdown from "react-markdown"
|
|
||||||
import {useInstanceContext} from "../../contexts/instance"
|
import {useInstanceContext} from "../../contexts/instance"
|
||||||
|
import {DescriptionBox} from "../elements/DescriptionBox"
|
||||||
import {ErrorBox} from "../errors/ErrorBox"
|
import {ErrorBox} from "../errors/ErrorBox"
|
||||||
|
|
||||||
|
|
||||||
|
@ -21,13 +21,10 @@ export function InstanceDescriptionBox(): JSX.Element | null {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box>
|
<DescriptionBox
|
||||||
<Heading level={3}>
|
icon={faUniversity}
|
||||||
About <Idiomatic>{instance.state.details.name}</Idiomatic>
|
name={instance.state.details.name}
|
||||||
</Heading>
|
description={instance.state.details.description}
|
||||||
<ReactMarkdown>
|
/>
|
||||||
{instance.state.details.description}
|
|
||||||
</ReactMarkdown>
|
|
||||||
</Box>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,20 +0,0 @@
|
||||||
import {Chapter} from "@steffo/bluelib-react"
|
|
||||||
import * as React from "react"
|
|
||||||
import {WhatIsSophonBox} from "../informative/WhatIsSophonBox"
|
|
||||||
import {InstanceFormBox} from "./InstanceFormBox"
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Page displayed by the {@link InstanceRouter} whenever no instance is selected, providing some information about Sophon to the user and allowing
|
|
||||||
* them to select an instance and proceed to login.
|
|
||||||
*
|
|
||||||
* @constructor
|
|
||||||
*/
|
|
||||||
export function InstanceStepPage(): JSX.Element {
|
|
||||||
return (
|
|
||||||
<Chapter>
|
|
||||||
<WhatIsSophonBox/>
|
|
||||||
<InstanceFormBox/>
|
|
||||||
</Chapter>
|
|
||||||
)
|
|
||||||
}
|
|
Loading…
Reference in a new issue