juzhiyuan commented on a change in pull request #188:
URL: https://github.com/apache/apisix-website/pull/188#discussion_r577591270
##########
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}
Review comment:
BTW, not sure if we need to set a hyperlink on the `name` field, so
users could visit project's site by clicking name. What's your opinion?
----------------------------------------------------------------
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]
