Feature improve comparison page

package.json

@@ -16,10 +16,13 @@
   "dependencies": {
     "@emotion/core": "^11.0.0",
     "@emotion/styled": "^11.3.0",
+    "@fontsource/roboto": "^4.5.0",
+    "@material-ui/core": "^4.12.1",
     "@sentry/gatsby": "^6.4.1",
     "algoliasearch": "^4.9.1",
     "bottleneck": "^2.19.5",
     "capture-website": "^1.4.0",
+    "material-table": "^1.69.3",
     "node-fetch": "^2.6.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -40,7 +43,7 @@
   },
   "devDependencies": {
     "gatsby": "^3.5.1",
-    "gatsby-cli": "^3.5.0",
+    "gatsby-cli": "^3.10.0",
     "gatsby-plugin-algolia": "^0.20.0",
     "gatsby-plugin-emotion": "^6.5.0",
     "gatsby-plugin-postcss": "^4.5.0",
@@ -52,7 +55,9 @@
     "gatsby-transformer-remark": "^4.2.0",
     "gatsby-transformer-yaml": "^3.5.0",
     "gatsby-transformer-yaml-full": "^0.4.2",
-    "prettier": "2.3.0"
+    "prettier": "2.3.0",
+    "webpack": "^5.46.0",
+    "webpack-cli": "^4.7.2"
   },
   "repository": {
     "type": "git",
@@ -61,4 +66,4 @@
   "bugs": {
     "url": "https://github.com/gatsbyjs/gatsby/issues"
   }
-}
+}

src/components/layout/nav.js

@@ -11,6 +11,7 @@ const Nav = () => {
       <div tw="w-full">
         <div tw="w-full container mx-auto flex flex-row items-center justify-center text-sm font-bold uppercase mt-0">
           <NavLink to="/compare">Compare</NavLink>
+           {/* <NavLink to="/compare">Compare2</NavLink> */}
           <NavLink to="/tools">Categories</NavLink>
           <NavLink to="/blog">Blog</NavLink>
           <NavLink to="/sponsor">Sponsor</NavLink>

src/pages/compare.js

@@ -1,72 +1,128 @@
-import React from "react"
+import React, { useState } from "react"
 import { Link, graphql } from "gatsby"
 import Layout from "../components/layout_wide"
-import "twin.macro"
+import Container from '@material-ui/core/Container';
+import Table from '@material-ui/core/Table';
+import Vote from "../components/vote"
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+import Box from '@material-ui/core/Box';
+
+
+
+
+
 
 const Compare = d => {
-  const tools = d.data.allToolsYaml.nodes
+
+  let tools = d.data.allToolsYaml.nodes;
+
+  const [toolsFiltered, setToolsFiltered] = useState(tools)
+  const [showProprietary, setShowProprietary] = useState(false)
+  const filterTools = showProprietary => {
+    setShowProprietary(!showProprietary)
+    console.log(showProprietary)
+    tools = tools.filter(t => {
+      if (showProprietary) {
+        return true
+      } else {
+        return t.license !== "proprietary"
+      }
+    })
+    setToolsFiltered(tools)
+  }
+
+  const heading = ["Votes", "Tool", "Category", "Type", "Tags", "License"]
+  heading.sort(function (a, b) {
+    if (a < b) { return -1; }
+    if (a > b) { return 1; }
+    return 0;
+  });
+
   return (
     <Layout>
-      <article tw="shadow w-full p-2 md:p-8">
-        <h1 tw="text-3xl font-semibold pb-10">
+      <Container fixed>
+        <Typography variant="h5" gutterBottom style={{ fontWeight: 600 }}>
           Compare {tools.length} Analysis Tools
-        </h1>
-        <table tw="w-full overflow-x-auto block border">
-          <thead>
-            <tr>
-              <th tw="sticky top-0 md:py-2 text-gray-900 bg-gray-100">Votes</th>
-              <th tw="sticky top-0 md:py-2 text-gray-900 bg-gray-100">Tool</th>
-              <th tw="sticky top-0 md:py-2 text-gray-900 bg-gray-100">
-                Category
-              </th>
-              <th tw="sticky top-0 md:py-2 text-gray-900 bg-gray-100">Type</th>
-              <th tw="sticky top-0 md:py-2 text-gray-900 bg-gray-100">Tags</th>
-              <th tw="sticky top-0 md:py-2 text-gray-900 bg-gray-100">
-                License
-              </th>
-            </tr>
-          </thead>
-          <tbody tw="divide-y">
-            {tools.map(tool => (
-              <tr>
-                <td tw="text-center md:py-2">{tool.children[0].sum}</td>
-                <td tw="text-center md:py-2">
-                  <Link to={tool.fields.slug} tw="underline">
-                    {tool.name}
-                  </Link>
-                </td>
-                <td tw="text-center md:py-2">{tool.categories.join(", ")}</td>
-                <td tw="text-center md:py-2">{tool.types.join(", ")}</td>
-                <td tw="text-center md:py-2">
-                  <ul tw="list-none max-w-sm inline-block align-top">
-                    {tool.tags &&
-                      tool.tags.slice(0, 3).map(tag => (
-                        <li
-                          tw="mb-2 mr-1 inline-block"
-                          key={`${tool.fields.slug}${tag}`}
-                        >
-                          <a href={"/tag/" + tag}>
-                            <span tw="bg-gray-300 hover:bg-gray-400 px-2 py-1 rounded">
-                              {tag}
-                            </span>
-                          </a>
-                        </li>
-                      ))}
-                    {tool.tags.length > 3 && (
-                      <a href={tool.fields.slug}>
-                        <span tw="bg-gray-300 hover:bg-gray-400 px-2 py-1 rounded">
-                          more...
-                        </span>
-                      </a>
-                    )}
-                  </ul>
-                </td>
-                <td tw="text-center md:py-2">{tool.license}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </article>
+        </Typography>
+
+        <Box style={{ backgroundColor: "#d3d3d3 " }} p={4}>
+          <input
+            onChange={() => filterTools(showProprietary)}
+            type="checkbox"
+            id="showproprietary"
+            name="showproprietary"
+            value="true"
+          ></input>
+          <label  htmlFor="showproprietary">
+            Hide proprietary tools
+          </label>
+
+        </Box>
+
+        <TableContainer component={Paper}>
+          <Table size="small" aria-label="a dense table">
+            <TableHead>
+              <TableRow>
+                {heading.map((heading) => (
+                  <TableCell align="center" style={{ fontWeight: 800 }} key={heading}>{heading}</TableCell>
+
+                ))}
+              </TableRow>
+
+              {/* filter */}
+            </TableHead>
+
+            <TableBody>
+              {toolsFiltered.map(tool => (
+                <TableRow>
+                  <TableCell align="center">{tool.categories.join(", ")}</TableCell>
+                  <TableCell align="center">{tool.license}</TableCell>
+                  <TableCell align="center">
+                    <ul style={{display:"inline-block"}}>
+                      {tool.tags &&
+                        tool.tags.slice(0, 3).map(tag => (
+                          <li style={{display:"inline-block"}} mb={2} mr={1}
+                            key={`${tool.fields.slug}${tag}`}
+                          >
+                            <a href={"/tag/" + tag}>
+                              <Box component="span" m={1} color="black" bgcolor="#d3d3d3" p={1} px={2} >
+                                {tag}
+                              </Box>
+                            </a>
+                          </li>
+                        ))}
+                      {tool.tags.length > 3 && (
+                        <a href={tool.fields.slug}>
+                          <Box component="span" m={1} color="black" bgcolor="#d3d3d3" p={1} px={2}>
+                            more...
+                          </Box>
+                        </a>
+                      )}
+                    </ul>
+                  </TableCell>
+
+                  <TableCell align="center">{tool.types.join(", ")}</TableCell>
+
+                  <TableCell align="center">
+                    <Link to={tool.fields.slug} style={{ textDecoration: 'underline' }}>
+                      {tool.name}
+                    </Link>
+                  </TableCell>
+                  <TableCell align="center">
+                    <Vote k={tool.children[0].key} sum={tool.children[0].sum} />
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </Container>
     </Layout>
   )
 }
@@ -100,4 +156,4 @@ export const query = graphql`
     }
   }
 `
-export default Compare
+export default Compare