modmapper-web/components/PluginData.tsx

95 lines
2.4 KiB
TypeScript
Raw Normal View History

2022-02-27 07:25:34 +00:00
import Head from "next/head";
import React from "react";
import styles from "../styles/PluginData.module.css";
2022-03-12 19:00:40 +00:00
import { formatBytes } from "../lib/plugins";
2022-02-27 07:25:34 +00:00
export interface Plugin {
2022-03-12 19:00:40 +00:00
hash: string;
size: number;
author?: string;
description?: string;
masters: string[];
file_name: string;
2022-03-12 19:00:40 +00:00
cell_count: number;
2022-02-27 07:25:34 +00:00
}
type Props = {
plugin: Plugin;
2022-02-27 07:25:34 +00:00
};
const PluginData: React.FC<Props> = ({ plugin }) => {
2022-02-27 07:25:34 +00:00
if (!plugin) {
return <h3>Plugin could not be found.</h3>;
2022-02-27 07:25:34 +00:00
}
return (
<>
<Head>
<title key="title">{`Modmapper - ${plugin.file_name}`}</title>
2022-02-27 07:25:34 +00:00
<meta
key="description"
name="description"
2022-03-12 19:00:40 +00:00
content={`Map of Skyrim showing ${plugin.cell_count} cell edits from the plugin: ${plugin.file_name}`}
2022-02-27 07:25:34 +00:00
/>
<meta
key="og:title"
property="og:title"
content={`Modmapper - ${plugin.file_name}`}
2022-02-27 07:25:34 +00:00
/>
<meta
key="og:description"
property="og:description"
2022-03-12 19:00:40 +00:00
content={`Map of Skyrim showing ${plugin.cell_count} cell edits from the plugin: ${plugin.file_name}`}
2022-02-27 07:25:34 +00:00
/>
<meta
key="twitter:title"
name="twitter:title"
content={`Modmapper - ${plugin.file_name}`}
2022-02-27 07:25:34 +00:00
/>
<meta
key="twitter:description"
name="twitter:description"
2022-03-12 19:00:40 +00:00
content={`Map of Skyrim showing ${plugin.cell_count} cell edits from the plugin: ${plugin.file_name}`}
2022-02-27 07:25:34 +00:00
/>
<meta
key="og:url"
property="og:url"
content={`https://modmapper.com/?plugin=${plugin.hash}`}
/>
</Head>
<h1 className={styles.name}>{plugin.file_name}</h1>
{plugin.author && (
2022-02-27 07:25:34 +00:00
<div>
<strong>Author:&nbsp;</strong>
{plugin.author}
2022-02-27 07:25:34 +00:00
</div>
)}
{plugin.masters.length > 0 && (
2022-02-27 07:25:34 +00:00
<div>
<strong>Master plugins:&nbsp;</strong>
{plugin.masters.join(", ")}
2022-02-27 07:25:34 +00:00
</div>
)}
2022-03-12 19:00:40 +00:00
<div>
<strong>Size:&nbsp;</strong>
{formatBytes(plugin.size)}
</div>
<div>
<strong>Cell edits:&nbsp;</strong>
2022-03-12 19:00:40 +00:00
{plugin.cell_count}
</div>
{plugin.description ? (
2022-02-27 07:25:34 +00:00
<div>
<h3>Description:</h3>
<p>{plugin.description}</p>
2022-02-27 07:25:34 +00:00
</div>
) : (
<div className={styles.spacer} />
2022-02-27 07:25:34 +00:00
)}
</>
);
};
export default PluginData;