Siddhant jain project card

client/src/asset/icons/icons.jsx

@@ -137,3 +137,66 @@ export function Menu(props) {
 		</svg>
 	);
 }
+export function GithubIcon(props) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="35"
+			height="35"
+			viewBox="0 0 24 24"
+		>
+			<path
+				fill="currentColor"
+				d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33c.85 0 1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2Z"
+			/>
+		</svg>
+	);
+}
+
+export function DiscordIcon(props) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="35"
+			height="35"
+			viewBox="0 0 24 24"
+		>
+			<path
+				fill="currentColor"
+				d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.09.09 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.09 16.09 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02zM8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12zm6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12z"
+			/>
+		</svg>
+	);
+}
+
+export function ProjectIcon(props) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="35"
+			height="35"
+			viewBox="0 0 24 24"
+		>
+			<path
+				fill="currentColor"
+				d="m18.9 20.3l-5.6-5.6q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5q0-2.725 1.888-4.612T9.5 3q2.725 0 4.612 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l5.625 5.625q.275.275.275.675t-.3.7q-.275.275-.7.275t-.7-.275ZM9.5 14q1.875 0 3.188-1.313T14 9.5q0-1.875-1.313-3.188T9.5 5Q7.625 5 6.312 6.313T5 9.5q0 1.875 1.313 3.188T9.5 14Z"
+			/>
+		</svg>
+	);
+}
+
+export function ProjectCardImg(props) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="80"
+			height="80"
+			viewBox="0 0 256 256"
+		>
+			<path
+				fill="currentColor"
+				d="M247.44 173.75a.68.68 0 0 0 0-.14l-16.39-84.17v-.18A60.08 60.08 0 0 0 172 40H83.89a59.88 59.88 0 0 0-59 49.52L8.58 173.61a.68.68 0 0 0 0 .14a36 36 0 0 0 60.9 31.71l.35-.37L109.52 160h37l39.71 45.09c.11.13.23.25.35.37A36.08 36.08 0 0 0 212 216a36 36 0 0 0 35.43-42.25ZM104 112h-8v8a8 8 0 0 1-16 0v-8h-8a8 8 0 0 1 0-16h8v-8a8 8 0 0 1 16 0v8h8a8 8 0 0 1 0 16Zm40-8a8 8 0 0 1 8-8h24a8 8 0 0 1 0 16h-24a8 8 0 0 1-8-8Zm84.37 87.47a19.84 19.84 0 0 1-12.9 8.23a20.09 20.09 0 0 1-17.47-5.39L167.8 160h4.2a60 60 0 0 0 51-28.38l8.74 45a19.82 19.82 0 0 1-3.37 14.85Z"
+			/>
+		</svg>
+	);
+}

client/src/components/projects/project-card/Project-Card.jsx

@@ -0,0 +1,77 @@
+import React from "react";
+import {
+	DiscordIcon,
+	GithubIcon,
+	ProjectCardImg,
+	ProjectIcon,
+} from "../../../asset/icons/icons";
+import "./project-card.css";
+import PropTypes from "prop-types";
+
+function ProjectCard({
+	title,
+	description,
+	status,
+	gitUrl,
+	discordUrl,
+	projectUrl,
+}) {
+	const statusColor = statusText => {
+		if (statusText === "Ongoing") return "text-onGoing";
+		if (statusText === "Inactive") return "text-inActive";
+		if (statusText === "Completed") return "text-completed";
+		return "text-canceled";
+	};
+
+	return (
+		<div className="w-96 h-96 rounded-3xl bg-gray-med p-8 text-white drop-shadow-lg flex flex-col gap-4 hover:scale-110 mt-8 transition-all ease-in">
+			<div className="text-orange flex justify-center items-center">
+				<ProjectCardImg />
+			</div>
+			<div className="flex flex-col gap-6">
+				<p className="text-2xl">{title}</p>
+				<p className=" text-white text-base line-clamp-4">{description}</p>
+
+				<div className="flex gap-4 justify-between items-center relative">
+					<p className="text-base">
+						Status: <span className={statusColor(status)}>{status}</span>
+					</p>
+					<div className="flex flex-row flex-wrap gap-2">
+						<a
+							className="project-card-link"
+							data-tooltip="GitHub"
+							href={gitUrl}
+						>
+							<GithubIcon />
+						</a>
+						<a
+							className="project-card-link"
+							data-tooltip="Discord"
+							href={discordUrl}
+						>
+							<DiscordIcon />
+						</a>
+						<a
+							className="project-card-link"
+							data-tooltip="Project"
+							href={projectUrl}
+						>
+							<ProjectIcon />
+						</a>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+ProjectCard.propTypes = {
+	title: PropTypes.string.isRequired,
+	description: PropTypes.string.isRequired,
+	status: PropTypes.string.isRequired,
+	gitUrl: PropTypes.string.isRequired,
+	discordUrl: PropTypes.string.isRequired,
+	projectUrl: PropTypes.string.isRequired,
+};
+
+export default ProjectCard;

client/src/components/projects/project-card/project-card.css

@@ -0,0 +1,33 @@
+.project-card-link {
+	@apply border 
+    border-white 
+    border-solid 
+    w-10 h-10 
+    rounded-2xl 
+    flex 
+    justify-center 
+    items-center 
+    hover:border-orange 
+    hover:text-orange 
+    after:content-[attr(data-tooltip)] 
+    after:absolute 
+    after:-translate-y-full 
+    after:bottom-3 
+    after:bg-orange 
+    after:text-gray-med 
+    after:p-1 
+    after:rounded 
+    after:hidden 
+    hover:after:block  
+    before:border-8 
+    before:border-transparent 
+    before:border-solid 
+    before:border-t-orange 
+    before:absolute 
+    before:-translate-y-full 
+    before:bottom-4 
+    before:hidden 
+    hover:before:block 
+    before:transition-all 
+    after:transition-all;
+}

client/src/pages/projects/Projects.jsx

@@ -1,5 +1,25 @@
+import React from "react";
+import ProjectCard from "../../components/projects/project-card/Project-Card";
+import { projectsMap } from "./fakeProjectsData";
+
 function Projects() {
-	return <div>Projects</div>;
+	return (
+		<div className="flex justify-center items-center gap-6 flex-wrap">
+			{projectsMap &&
+				projectsMap.map((ele, key) => (
+					<React.Fragment key={key}>
+						<ProjectCard
+							title={ele.title}
+							description={ele.description}
+							status={ele.status}
+							gitUrl={ele.gitUrl}
+							discordUrl={ele.discordUrl}
+							projectUrl={ele.projectUrl}
+						/>
+					</React.Fragment>
+				))}
+		</div>
+	);
 }
 
 export default Projects;