refactor: /about uses Card, minor cleanups

This commit is contained in:
Vyacheslav Matyukhin 2022-04-24 01:02:04 +04:00
parent 10945a6dd5
commit ece3ac4780
No known key found for this signature in database
GPG Key ID: 3D2A774C5489F96C
3 changed files with 28 additions and 15 deletions

View File

@ -1,7 +1,9 @@
import { NextPage } from "next";
import React from "react";
import ReactMarkdown from "react-markdown";
import gfm from "remark-gfm";
import { Card } from "../web/display/Card";
import { Layout } from "../web/display/Layout";
const readmeMarkdownText = `# About
@ -26,16 +28,16 @@ Also note that, whatever other redeeming features they might have, prediction ma
`;
export default function About() {
const AboutPage: NextPage = () => {
return (
<Layout page="about">
<div className="px-2 py-2 bg-white rounded-md shadow place-content-stretch flex-grow place-self-center">
<ReactMarkdown
remarkPlugins={[gfm]}
children={readmeMarkdownText}
className="m-5"
/>
<Card highlightOnHover={false}>
<div className="p-4">
<ReactMarkdown remarkPlugins={[gfm]} children={readmeMarkdownText} />
</div>
</Card>
</Layout>
);
}
};
export default AboutPage;

View File

@ -1,3 +1,4 @@
import { NextPage } from "next";
import Link from "next/link";
import React from "react";
@ -45,7 +46,7 @@ const ToolCard: React.FC<Tool> = (tool) => {
}
};
export default function Tools({ lastUpdated }) {
const ToolsPage: NextPage = () => {
let tools: Tool[] = [
{
title: "Search",
@ -87,9 +88,11 @@ export default function Tools({ lastUpdated }) {
<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}`} />
<ToolCard {...tool} key={i} />
))}
</div>
</Layout>
);
}
};
export default ToolsPage;

View File

@ -2,12 +2,20 @@ const CardTitle: React.FC = ({ children }) => (
<div className="text-gray-800 text-lg font-medium">{children}</div>
);
type CardType = React.FC & {
interface Props {
highlightOnHover?: boolean;
}
type CardType = React.FC<Props> & {
Title: typeof CardTitle;
};
export const Card: CardType = ({ children }) => (
<div className="h-full px-4 py-3 bg-white hover:bg-gray-100 rounded-md shadow">
export const Card: CardType = ({ children, highlightOnHover = true }) => (
<div
className={`h-full px-4 py-3 bg-white rounded-md shadow ${
highlightOnHover ? "hover:bg-gray-100" : ""
}`}
>
{children}
</div>
);