2021-11-30 02:46:31 -08:00
|
|
|
import React from 'react';
|
|
|
|
|
2021-12-02 18:09:13 -08:00
|
|
|
// import { networks } from '../../../data/networks/_overview';
|
|
|
|
import { NetworkWriteup, ShowcaseNetwork } from '../../../utils/showcase';
|
2021-11-30 02:46:31 -08:00
|
|
|
|
|
|
|
interface NetworkProps {
|
|
|
|
id: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
export const Network = ({ id }: NetworkProps): JSX.Element => {
|
2021-12-02 18:09:13 -08:00
|
|
|
import(`../../../data/networks/${id}`).then((data) => {
|
2021-11-30 02:46:31 -08:00
|
|
|
setNetworkWriteup(data.writeup as NetworkWriteup);
|
2021-12-02 18:09:13 -08:00
|
|
|
setMetadata(data.metadata as ShowcaseNetwork);
|
2021-11-30 02:46:31 -08:00
|
|
|
});
|
|
|
|
|
|
|
|
// console.log(data);
|
|
|
|
const [networkWriteup, setNetworkWriteup] = React.useState<NetworkWriteup>();
|
2021-12-02 18:09:13 -08:00
|
|
|
const [metadata, setMetadata] = React.useState<ShowcaseNetwork>();
|
2021-11-30 02:46:31 -08:00
|
|
|
React.useEffect(() => {
|
|
|
|
// data.then((data) => setNetworkWriteup(data));
|
|
|
|
}, []);
|
|
|
|
|
2021-12-02 18:09:13 -08:00
|
|
|
// const network = networks.find((network) => network.id === id);
|
2021-11-30 02:46:31 -08:00
|
|
|
|
2021-12-02 18:09:13 -08:00
|
|
|
return metadata && networkWriteup ? (
|
2021-11-30 02:46:31 -08:00
|
|
|
<div className="container">
|
2021-12-02 18:09:13 -08:00
|
|
|
<h1>{metadata.title}</h1>
|
|
|
|
<p>{metadata.description}</p>
|
2021-11-30 02:46:31 -08:00
|
|
|
<div className="avatar">
|
|
|
|
<img
|
|
|
|
src={networkWriteup.author.avatarUrl}
|
|
|
|
alt={networkWriteup.author.name}
|
|
|
|
className="avatar__photo"
|
|
|
|
/>
|
|
|
|
<div className="avatar__intro">
|
|
|
|
<div className="avatar__name">{networkWriteup.author.name}</div>
|
|
|
|
<div className="avatar__subtitle">{networkWriteup.author.about}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{networkWriteup.body.map((segment, index) => (
|
|
|
|
<div key={index}>
|
|
|
|
<h2>{segment.heading}</h2>
|
|
|
|
<p>{segment.body}</p>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
|
|
|
|
<div
|
|
|
|
className="card"
|
|
|
|
style={{
|
|
|
|
marginLeft: "auto",
|
|
|
|
marginRight: "auto",
|
|
|
|
maxWidth: "900px",
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<div
|
|
|
|
className="card__header"
|
|
|
|
style={{
|
|
|
|
margin: "8px",
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<h2>Bill of Materials</h2>
|
|
|
|
</div>
|
|
|
|
<div className="card__body">
|
|
|
|
{networkWriteup.bom.map((material, index) => (
|
|
|
|
<div
|
|
|
|
key={index}
|
|
|
|
style={{
|
|
|
|
borderTop: "2px solid gray",
|
|
|
|
display: "flex",
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<div
|
|
|
|
style={{
|
|
|
|
width: "4rem",
|
|
|
|
display: "flex",
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<img
|
|
|
|
src={material.image}
|
|
|
|
height="auto"
|
|
|
|
width="100%"
|
|
|
|
style={{
|
|
|
|
margin: "auto",
|
|
|
|
padding: "4px",
|
|
|
|
display: "block",
|
|
|
|
maxWidth: "60px",
|
|
|
|
maxHeight: "60px",
|
|
|
|
width: "auto",
|
|
|
|
height: "auto",
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
<div className="avatar__intro">
|
|
|
|
<div className="avatar__name">{material.name}</div>
|
|
|
|
<small className="avatar__subtitle">{material.details}</small>
|
|
|
|
</div>
|
|
|
|
<a
|
|
|
|
target="_blank"
|
|
|
|
href={material.url}
|
|
|
|
className="button button--outline button--secondary"
|
|
|
|
style={{
|
|
|
|
marginTop: "auto",
|
|
|
|
marginBottom: "auto",
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
View
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
) : (
|
|
|
|
<div>
|
|
|
|
<h1>Network not found</h1>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|