96 lines
2.8 KiB
TypeScript
96 lines
2.8 KiB
TypeScript
import Link from "next/link";
|
||
import React from "react";
|
||
|
||
import { Card } from "../web/display/Card";
|
||
import { Layout } from "../web/display/Layout";
|
||
|
||
type AnyTool = {
|
||
title: string;
|
||
description: string;
|
||
img?: string;
|
||
};
|
||
|
||
type InnerTool = AnyTool & { innerLink: string };
|
||
type ExternalTool = AnyTool & { externalLink: string };
|
||
type UpcomingTool = AnyTool;
|
||
|
||
type Tool = InnerTool | ExternalTool | UpcomingTool;
|
||
|
||
/* Display one tool */
|
||
const ToolCard: React.FC<Tool> = (tool) => {
|
||
const inner = (
|
||
<Card>
|
||
<div className="grid content-start gap-3">
|
||
<div className="text-gray-800 text-lg font-medium">{tool.title}</div>
|
||
<div className="text-gray-500">{tool.description}</div>
|
||
{tool.img && <img src={tool.img} className="text-gray-500" />}
|
||
</div>
|
||
</Card>
|
||
);
|
||
|
||
if ("innerLink" in tool) {
|
||
return (
|
||
<Link href={tool.innerLink} passHref>
|
||
<a className="text‑inherit no-underline">{inner}</a>
|
||
</Link>
|
||
);
|
||
} else if ("externalLink" in tool) {
|
||
return (
|
||
<a href={tool.externalLink} className="text‑inherit no-underline">
|
||
{inner}
|
||
</a>
|
||
);
|
||
} else {
|
||
return inner;
|
||
}
|
||
};
|
||
|
||
export default function Tools({ lastUpdated }) {
|
||
let tools: Tool[] = [
|
||
{
|
||
title: "Search",
|
||
description: "Find forecasting questions on many platforms.",
|
||
innerLink: "/",
|
||
img: "https://i.imgur.com/Q94gVqG.png",
|
||
},
|
||
{
|
||
title: "[Beta] Present",
|
||
description: "Present forecasts in dashboards.",
|
||
innerLink: "/dashboards",
|
||
img: "https://i.imgur.com/x8qkuHQ.png",
|
||
},
|
||
{
|
||
title: "Capture",
|
||
description:
|
||
"Capture forecasts save them to Imgur. Useful for posting them somewhere else as images. Currently rate limited by Imgur, so if you get a .gif of a fox falling flat on his face, that's why.",
|
||
innerLink: "/capture",
|
||
img: "https://i.imgur.com/EXkFBzz.png",
|
||
},
|
||
{
|
||
title: "Summon",
|
||
description:
|
||
"Summon metaforecast on Twitter by mentioning @metaforecast, or on Discord by using Fletcher and !metaforecast, followed by search terms.",
|
||
externalLink: "https://twitter.com/metaforecast",
|
||
img: "https://i.imgur.com/BQ4Zzjw.png",
|
||
},
|
||
{
|
||
title: "[Upcoming] Request",
|
||
description:
|
||
"Interact with metaforecast's API and fetch forecasts for your application. Currently possible but documentation is poor, get in touch.",
|
||
},
|
||
{
|
||
title: "[Upcoming] Record",
|
||
description: "Save your forecasts or bets.",
|
||
},
|
||
];
|
||
return (
|
||
<Layout page="tools">
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-4 mb-8 place-content-stretch">
|
||
{tools.map((tool, i) => (
|
||
<ToolCard {...tool} key={`tool-${i}`} />
|
||
))}
|
||
</div>
|
||
</Layout>
|
||
);
|
||
}
|