mirror of
https://github.com/Steffo99/sophon.git
synced 2024-12-23 07:14:21 +00:00
52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
|
import * as React from "react"
|
||
|
import * as ReactDOM from "react-dom"
|
||
|
import Style from "./ResearchGroupPanel.module.css"
|
||
|
import {Panel, BringAttention as B, Button, Variable} from "@steffo/bluelib-react";
|
||
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
||
|
import {faEnvelope, faEye, faGlobe, faQuestion} from "@fortawesome/free-solid-svg-icons";
|
||
|
import {navigate} from "@reach/router";
|
||
|
import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
|
||
|
|
||
|
|
||
|
export interface ResearchGroupPanelProps {
|
||
|
owner: number,
|
||
|
members: number[],
|
||
|
name: string,
|
||
|
description: string,
|
||
|
access: "OPEN" | "MANUAL",
|
||
|
slug: string,
|
||
|
}
|
||
|
|
||
|
|
||
|
export function ResearchGroupPanel({owner, name, access, slug}: ResearchGroupPanelProps): JSX.Element {
|
||
|
let accessIcon: IconDefinition
|
||
|
if(access === "OPEN") {
|
||
|
accessIcon = faGlobe
|
||
|
}
|
||
|
else if(access === "MANUAL") {
|
||
|
accessIcon = faEnvelope
|
||
|
}
|
||
|
else {
|
||
|
accessIcon = faQuestion
|
||
|
}
|
||
|
|
||
|
return (
|
||
|
<Panel className={Style.Panel}>
|
||
|
<div className={Style.Access}>
|
||
|
<FontAwesomeIcon icon={accessIcon}/>
|
||
|
</div>
|
||
|
<div className={Style.Name} title={slug}>
|
||
|
{name}
|
||
|
</div>
|
||
|
<div className={Style.Owner}>
|
||
|
Created by <span>{owner}</span>
|
||
|
</div>
|
||
|
<div className={Style.Buttons}>
|
||
|
<Button className={Style.ViewButton} onClick={() => navigate(`/g/${slug}/`)}>
|
||
|
<FontAwesomeIcon icon={faEye}/> View
|
||
|
</Button>
|
||
|
</div>
|
||
|
</Panel>
|
||
|
)
|
||
|
}
|