mirror of
https://github.com/Steffo99/sophon.git
synced 2024-12-23 07:14:21 +00:00
✨ Fix links
This commit is contained in:
parent
20efc56059
commit
0f8a00ad53
4 changed files with 43 additions and 16 deletions
32
frontend/src/components/Link.tsx
Normal file
32
frontend/src/components/Link.tsx
Normal file
|
@ -0,0 +1,32 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import {Anchor} from "@steffo/bluelib-react";
|
||||||
|
import {navigate} from "@reach/router";
|
||||||
|
import {AnchorProps} from "@steffo/bluelib-react/dist/components/common/Anchor";
|
||||||
|
|
||||||
|
|
||||||
|
interface LinkProps extends AnchorProps {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function Link({href, children, onClick, ...props}: AnchorProps): JSX.Element {
|
||||||
|
|
||||||
|
const onClickWrapped = React.useCallback(
|
||||||
|
event => {
|
||||||
|
event.preventDefault()
|
||||||
|
if(onClick) {
|
||||||
|
onClick(event)
|
||||||
|
}
|
||||||
|
if(href) {
|
||||||
|
// noinspection JSIgnoredPromiseFromCall
|
||||||
|
navigate(href)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[href]
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Anchor href={href} children={children} onClick={onClickWrapped} {...props}/>
|
||||||
|
)
|
||||||
|
}
|
|
@ -13,11 +13,6 @@
|
||||||
.Name {
|
.Name {
|
||||||
font-size: larger;
|
font-size: larger;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: rgb(var(--bluelib-accent-r), var(--bluelib-accent-g), var(--bluelib-accent-b));
|
|
||||||
}
|
|
||||||
|
|
||||||
.Name * {
|
|
||||||
color: rgb(var(--bluelib-accent-r), var(--bluelib-accent-g), var(--bluelib-accent-b));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.Owner {
|
.Owner {
|
||||||
|
|
|
@ -4,22 +4,22 @@ import Style from "./ResearchGroupPanel.module.css"
|
||||||
import {Panel, BringAttention as B, Button, Variable} from "@steffo/bluelib-react";
|
import {Panel, BringAttention as B, Button, Variable} from "@steffo/bluelib-react";
|
||||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
||||||
import {faEnvelope, faEye, faGlobe, faQuestion} from "@fortawesome/free-solid-svg-icons";
|
import {faEnvelope, faEye, faGlobe, faQuestion} from "@fortawesome/free-solid-svg-icons";
|
||||||
import {Link} from "@reach/router";
|
|
||||||
import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
|
import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
|
||||||
import {ResearchGroup} from "../types";
|
import {ResearchGroup} from "../types";
|
||||||
import {UserLink} from "./UserLink";
|
import {UserLink} from "./UserLink";
|
||||||
|
import {Link} from "./Link";
|
||||||
|
|
||||||
|
|
||||||
export function ResearchGroupPanel({owner, name, access, slug}: ResearchGroup): JSX.Element {
|
export function ResearchGroupPanel({owner, name, access, slug}: ResearchGroup): JSX.Element {
|
||||||
let accessIcon: IconDefinition
|
let accessIcon: JSX.Element
|
||||||
if(access === "OPEN") {
|
if(access === "OPEN") {
|
||||||
accessIcon = faGlobe
|
accessIcon = <FontAwesomeIcon icon={faGlobe} title={"Open"}/>
|
||||||
}
|
}
|
||||||
else if(access === "MANUAL") {
|
else if(access === "MANUAL") {
|
||||||
accessIcon = faEnvelope
|
accessIcon = <FontAwesomeIcon icon={faEnvelope} title={"Invite-only"}/>
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
accessIcon = faQuestion
|
accessIcon = <FontAwesomeIcon icon={faQuestion} title={"Unknown"}/>
|
||||||
}
|
}
|
||||||
|
|
||||||
// FIXME: use proper bluelib Anchors
|
// FIXME: use proper bluelib Anchors
|
||||||
|
@ -27,10 +27,10 @@ export function ResearchGroupPanel({owner, name, access, slug}: ResearchGroup):
|
||||||
return (
|
return (
|
||||||
<Panel className={Style.Panel}>
|
<Panel className={Style.Panel}>
|
||||||
<div className={Style.Access}>
|
<div className={Style.Access}>
|
||||||
<FontAwesomeIcon icon={accessIcon}/>
|
{accessIcon}
|
||||||
</div>
|
</div>
|
||||||
<div className={Style.Name} title={slug}>
|
<div className={Style.Name} title={slug}>
|
||||||
<Link to={`/g/${slug}/`}>{name}</Link>
|
<Link href={`/g/${slug}/`}>{name}</Link>
|
||||||
</div>
|
</div>
|
||||||
<div className={Style.Owner}>
|
<div className={Style.Owner}>
|
||||||
Created by <UserLink id={owner}/>
|
Created by <UserLink id={owner}/>
|
||||||
|
|
|
@ -5,7 +5,7 @@ import {Anchor} from "@steffo/bluelib-react";
|
||||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
||||||
import {faSpinner, faTimesCircle, faUser} from "@fortawesome/free-solid-svg-icons";
|
import {faSpinner, faTimesCircle, faUser} from "@fortawesome/free-solid-svg-icons";
|
||||||
import {useDRFViewSet} from "../hooks/useDRF";
|
import {useDRFViewSet} from "../hooks/useDRF";
|
||||||
import {Link} from "@reach/router";
|
import {Link} from "./Link";
|
||||||
|
|
||||||
|
|
||||||
interface UserLinkProps {
|
interface UserLinkProps {
|
||||||
|
@ -34,17 +34,17 @@ export function UserLink({id}: UserLinkProps): JSX.Element {
|
||||||
// FIXME: use proper bluelib Anchors
|
// FIXME: use proper bluelib Anchors
|
||||||
|
|
||||||
if(error) return (
|
if(error) return (
|
||||||
<Link to={`/u/${id}`}>
|
<Link href={`/u/${id}`} title={id.toString()}>
|
||||||
<FontAwesomeIcon icon={faTimesCircle}/> {id}
|
<FontAwesomeIcon icon={faTimesCircle}/> {id}
|
||||||
</Link>
|
</Link>
|
||||||
)
|
)
|
||||||
else if(!user) return (
|
else if(!user) return (
|
||||||
<Link to={`/u/${id}`}>
|
<Link href={`/u/${id}`} title={id.toString()}>
|
||||||
<FontAwesomeIcon icon={faSpinner} pulse={true}/> {id}
|
<FontAwesomeIcon icon={faSpinner} pulse={true}/> {id}
|
||||||
</Link>
|
</Link>
|
||||||
)
|
)
|
||||||
return (
|
return (
|
||||||
<Link to={`/u/${id}`}>
|
<Link href={`/u/${id}`} title={id.toString()}>
|
||||||
<FontAwesomeIcon icon={faUser}/> {user.username}
|
<FontAwesomeIcon icon={faUser}/> {user.username}
|
||||||
</Link>
|
</Link>
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in a new issue