[GitHub] [apisix-website] juzhiyuan commented on a change in pull request #188: feat: add events page & improve the Download page

[GitBox <gi...@apache.org>]

juzhiyuan commented on a change in pull request #188:
URL: https://github.com/apache/apisix-website/pull/188#discussion_r577589912



##########
File path: website/src/pages/downloads/ProjectCard.js
##########
@@ -0,0 +1,286 @@
+import React, { useState, useRef, useEffect } from "react";
+import styled from "styled-components";
+import useOutsideClick from "../../hooks/useOutsideClick";
+import { paramCase } from "change-case";
+
+import IconInfo from "../../assets/icons/info.svg";
+import IconStar from "../../assets/icons/star.svg";
+import IconDocumentText from "../../assets/icons/document-text.svg";
+import IconDownload from "../../assets/icons/download.svg";
+import IconTriangle from "../../assets/icons/triangle.svg";
+import IconSquare from "../../assets/icons/square.svg";
+import IconHexagon from "../../assets/icons/hexagon.svg";
+
+const Dropdown = (props) => {
+  const ref = useRef();
+  const { isDropdownOpen, setIsDropdownOpen } = props;
+  useOutsideClick(ref, () => {
+    if (isDropdownOpen) {
+      setIsDropdownOpen(false);
+    }
+  });
+  return (
+    <StyledDropdown ref={ref} open={isDropdownOpen}>
+      {props.children}
+    </StyledDropdown>
+  );
+};
+
+const ProjectCard = (props) => {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const [repoStats, setRepoStats] = useState({ stars: 0, issues: 0 });
+  const {
+    name,
+    description,
+    shape,
+    color,
+    version,
+    releaseDate,
+    githubRepo,
+  } = props;
+  const shapeComponent =
+    shape === "triangle" ? (
+      <IconTriangle />
+    ) : shape === "square" ? (
+      <IconSquare />
+    ) : (
+      <IconHexagon />
+    );
+  const downloadLink = `https://www.apache.org/dyn/closer.cgi/apisix${
+    "/" + paramCase(name.replace("APISIX™", ""))
+  }/${version}/apache-${paramCase(name.replace("™", ""))}-${version}-src`;
+
+  useEffect(() => {
+    getGitHubRepoStats(githubRepo).then((stats) => {
+      setRepoStats({
+        stars: stats.stargazers_count,
+        issues: stats.open_issues_count,
+      });
+    });
+  }, []);
+
+  return (
+    <Card>
+      <LeftSide>
+        <Title>
+          <ShapeBeforeTitle color={color}>{shapeComponent}</ShapeBeforeTitle>
+          {name}
+        </Title>
+        <Description>{description}</Description>
+        <LeftSideLinks>
+          <LeftSideLink
+            href={`https://github.com/${githubRepo}`}
+            target="_blank"
+            title="Stars"
+          >
+            <IconStar /> {repoStats.stars}
+          </LeftSideLink>
+          <LeftSideLink
+            href={`https://github.com/${githubRepo}/issues`}
+            target="_blank"
+            title="Issues"
+          >
+            <IconInfo /> {repoStats.issues}
+          </LeftSideLink>
+          <LeftSideLink
+            href={`https://github.com/${githubRepo}/blob/master/CHANGELOG.md`}
+            target="_blank"
+          >
+            <IconDocumentText /> CHANGELOG
+          </LeftSideLink>
+        </LeftSideLinks>
+      </LeftSide>
+      <RightSide>
+        <VersionInfo>
+          Latest Version · <span>{version}</span>
+          <br />
+          Release Date · <span>{releaseDate}</span>
+        </VersionInfo>
+        <div>
+          <Button
+            onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+            background={color}
+          >
+            <IconDownload /> Download
+          </Button>
+          <Dropdown
+            isDropdownOpen={isDropdownOpen}
+            setIsDropdownOpen={setIsDropdownOpen}
+          >
+            <DropdownItem href={`${downloadLink}.tgz`} target="_blank">
+              Source
+            </DropdownItem>
+            <DropdownItem href={`${downloadLink}.tgz.asc`} target="_blank">
+              ASC

Review comment:
       Hi @qier222, only the Source link needs a mirror, both ASC and SHA512 should use link like `https://downloads.apache.org/apisix/dashboard/2.4/apache-apisix-dashboard-2.4-src.tgz.asc`




----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

For queries about this service, please contact Infrastructure at:
users@infra.apache.org