From ece3ac4780bb864164877c63c68548f891ac1695 Mon Sep 17 00:00:00 2001
From: Vyacheslav Matyukhin <me@berekuk.ru>
Date: Sun, 24 Apr 2022 01:02:04 +0400
Subject: [PATCH] refactor: /about uses Card, minor cleanups

---
 src/pages/about.tsx      | 20 +++++++++++---------
 src/pages/tools.tsx      |  9 ++++++---
 src/web/display/Card.tsx | 14 +++++++++++---
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/pages/about.tsx b/src/pages/about.tsx
index 193d0fe..4a0a0c7 100644
--- a/src/pages/about.tsx
+++ b/src/pages/about.tsx
@@ -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"
-        />
-      </div>
+      <Card highlightOnHover={false}>
+        <div className="p-4">
+          <ReactMarkdown remarkPlugins={[gfm]} children={readmeMarkdownText} />
+        </div>
+      </Card>
     </Layout>
   );
-}
+};
+
+export default AboutPage;
diff --git a/src/pages/tools.tsx b/src/pages/tools.tsx
index eef031b..7463a07 100644
--- a/src/pages/tools.tsx
+++ b/src/pages/tools.tsx
@@ -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;
diff --git a/src/web/display/Card.tsx b/src/web/display/Card.tsx
index a77614e..636d739 100644
--- a/src/web/display/Card.tsx
+++ b/src/web/display/Card.tsx
@@ -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>
 );