juzhiyuan commented on a change in pull request #188:
URL: https://github.com/apache/apisix-website/pull/188#discussion_r577590150
##########
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:
Please recheck those links from `https://apisix.apache.org/downloads`
----------------------------------------------------------------
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:
[email protected]
