From a9efd9dc3a288e07d1b2bb5bd15331c30beedc73 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Wed, 13 Oct 2021 04:51:55 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Add=20an=20icon=20to=20`Resource?=
 =?UTF-8?q?DescriptionBox`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.tsx                                     | 5 +++--
 .../src/components/generic/ResourceDescriptionBox.tsx    | 9 ++++++---
 frontend/src/components/routing/ResourceRouter.tsx       | 5 +----
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index e0c420f..278d5da 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -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}
diff --git a/frontend/src/components/generic/ResourceDescriptionBox.tsx b/frontend/src/components/generic/ResourceDescriptionBox.tsx
index 6e58c42..a15d712 100644
--- a/frontend/src/components/generic/ResourceDescriptionBox.tsx
+++ b/frontend/src/components/generic/ResourceDescriptionBox.tsx
@@ -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}
diff --git a/frontend/src/components/routing/ResourceRouter.tsx b/frontend/src/components/routing/ResourceRouter.tsx
index dce7776..ba82982 100644
--- a/frontend/src/components/routing/ResourceRouter.tsx
+++ b/frontend/src/components/routing/ResourceRouter.tsx
@@ -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) {