According to Figma Designs

Author: DevanshCodes

package-lock.json

@@ -11,6 +11,7 @@
  "react": "^16.13.1",
  "react-bootstrap": "^1.0.1",
  "react-dom": "^16.13.1",
+ "react-icons": "^3.10.0",
  "react-router-dom": "^5.2.0",
  "react-scripts": "3.4.1"
  },

package.json

@@ -1,34 +1,55 @@
 import React, { Component } from "react";
-import { Card } from "react-bootstrap";
+import { Card, Badge } from "react-bootstrap";
 import "./projects.scss";
 import projectInfo from "../../jsonData/projects";
+import { IconContext } from "react-icons";
+import { FiPlus } from "react-icons/fi";
 
 class Projects extends Component {
  render() {
  return (
  <div className="projectCards">
  {projectInfo.projects.map((i) => {
  return (
- <Card className="projectCard" bg="light" style={{ width: "23rem" }}>
+ <Card className="projectCard" bg="light" style={{ width: "21rem" }}>
  <Card.Header color="#366FF0" className="projectcardheader">
  {i.projectName}
  </Card.Header>
  <div className="cardcontent">
  {i.topics.map((j) => {
  return (
  <Card className="topicscard">
- <Card.Body>
- <Card.Title className="topicsheading">
- {j.topicName}
- </Card.Title>
- <Card.Text className="topicdescription">
- {j.topicDescription}
- </Card.Text>
- </Card.Body>
+ <Card.Title className="topicsheading">
+ {j.topicName}
+ </Card.Title>
+ <Card.Text className="topicdescription">
+ {j.topicDescription}
+ </Card.Text>
+ <div>
+ {j.topicTags ? (
+ j.topicTags.map((k) => {
+ return (
+ <Badge variant="primary" className="tags">
+ {k}
+ </Badge>
+ );
+ })
+ ) : (
+ <Badge variant="primary"></Badge>
+ )}
+ </div>
  </Card>
  );
  })}
  </div>
+ <div className="addnewcard">
+ <IconContext.Provider
+ value={{ style: { verticalAlign: 'middle' }, className: "reacticon" }}
+ >
+ <FiPlus />
+ </IconContext.Provider>{" "}
+ Add another discussion
+ </div>
  </Card>
  );
  })}

src/components/projects/projects.js

@@ -1,25 +1,51 @@
+
 .projectCards {
- vertical-align: middle;
- white-space: nowrap;
+ vertical-align: middle;
+ white-space: nowrap;
+ overflow-x: auto;
+ .projectCard {
+ white-space: normal;
  overflow-x: auto;
- .projectCard {
- white-space: normal;
- overflow-x: auto;
- display:inline-block;
- margin-left: 20px;
- margin-bottom: 20px;
- margin-right: 10px;
- width: 21 rem;
- background-color: #f3f3f3;
- .cardcontent {
- height: 60vh;
- overflow-y: auto;
+ display: inline-block;
+ margin-left: 20px;
+ margin-bottom: 20px;
+ margin-right: 10px;
+ background-color: #f3f3f3;
+ .addnewcard {
+ .reacticon {
+ vertical-align: middle;
  }
- .projectcardheader {
- color: #ffffff;
- font-size: 20px;
- font-weight: bold;
- background-color: #366ff0;
+ vertical-align: middle;
+ margin: 1rem 0 1rem 1.6rem;
+ font-family: Inter;
+ font-style: normal;
+ font-weight: 500;
+ font-size: 1.1em;
+ color: #808080;
+ }
+ .cardcontent {
+ height: 49vh;
+ overflow-y: auto;
+ .topicscard {
+ margin-bottom: 10px;
+ padding: 12px 12px 0 12px;
+ .tags {
+ width: fit-content;
+ display: inline-block;
+ font-family: "Inter", sans-serif;
+ padding: 0.4em 0.6em;
+ margin: 0 10px 10px 0;
+ font-weight: 600;
+ font-size: 0.8em;
+ background-color: #f04b58;
+ }
  }
  }
- }
+ .projectcardheader {
+ color: #ffffff;
+ font-size: 20px;
+ font-weight: bold;
+ background-color: #366ff0;
+ }
+ }
+}

src/components/projects/projects.scss

@@ -4,19 +4,23 @@ const projectsInfo = {
  projectName: "Project 1",
  topics:[{
  topicName: "Adding a feature: GSoC",
- topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content." 
+ topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content.", 
+ topicTags:['ReactJs','NodeJS']
  },
  {
  topicName: "Adding a feature: GSoC",
- topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content." 
+ topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content.",
+ topicTags:['ReactJs','NodeJS'] 
  },
  {
  topicName: "Adding a feature: GSoC",
- topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content." 
+ topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content.",
+ topicTags:['ReactJs','NodeJS'] 
  },
  {
  topicName: "Adding a feature: GSoC",
- topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content." 
+ topicDescription: "Some quick example text to build on the card title and make up the bulk of the card's content.",
+ topicTags:['ReactJs','NodeJS'] 
  }],
  },
  {