Added Team Lead section

Added Team Lead section in Team page, Created TeamLeadCard in compenents, Created TeamLead in container
iot-lab-kiit · Oct 12, 2023 · 9ed203d · 9ed203d
1 parent 0d9f50d
commit 9ed203d
Show file tree

Hide file tree

Showing 3 changed files with 230 additions and 0 deletions.
diff --git a/app/team/page.tsx b/app/team/page.tsx
@@ -2,6 +2,7 @@ import TeamHeader from "@/components/teamPage/TeamHeader";
 // import Mentors from "@/container/teams/Mentors";
 import Coordinators from "@/container/teams/Coordinators";
 import Team from "@/container/teams/Team";
+import TeamLead from "@/container/teams/TeamLead";
 
 import getConfig from "next/config";
 const { publicRuntimeConfig } = getConfig();
@@ -25,9 +26,12 @@ const coordinatorIndex = [
 ];
 const memberIndex = [positionData["5"], positionData["6"], positionData["7"]];
 
+const teamLeadIndex = [positionData["5"]];
+
 interface TeamData {
   coordinators: [MemberData];
   members: [MemberData];
+  teamleads: [MemberData];
   // mentors: [MemberData];
 }
 
@@ -65,6 +69,7 @@ const Layout = async () => {
       <TeamHeader />
       {/* <Mentors mentors={propsData.mentors} /> */}
       <Coordinators coordinators={propsData.coordinators} />
+      <TeamLead teamleads={propsData.teamleads} />
       <Team members={propsData.members} />
     </div>
   );
@@ -84,12 +89,18 @@ async function getData() {
   const membersData = allTeamData.filter((member: MemberData) =>
     memberIndex.includes(member.position)
   );
+
+  const teamleadsData = allTeamData.filter((member: MemberData) =>
+    teamLeadIndex.includes(member.position)
+  );
+
   // const mentorsData = allTeamData.filter(
   //   (member: MemberData) => member.position === "Mentor"
   // );
   return {
     coordinators: coordinatorsData,
     members: membersData,
+    teamleads: teamleadsData,
     // mentors: mentorsData,
   };
 }

diff --git a/components/teamPage/TeamLeadCard.tsx b/components/teamPage/TeamLeadCard.tsx
@@ -0,0 +1,134 @@
+import Image from "next/image";
+
+interface TeamLeadCard {
+  name: string;
+  position: string;
+  domain:String;
+  quote?: string;
+  imageUrl: string;
+  githubUrl: string;
+  linkedinUrl: string;
+  mailID: string;
+}
+
+const TeamLeadCard = ({
+  name,
+  position,
+  domain,
+  quote,
+  imageUrl,
+  githubUrl,
+  linkedinUrl,
+  mailID,
+}: TeamLeadCard) => {
+  return (
+    // ${
+    //   position === " Coordinator" ? "lg:w-screen" : "lg:w-1/2"
+    // }
+    <div
+      className={`p-4 mx-auto sm:mx-0 lg:w-1/2`}
+    >
+      <div className="h-full flex sm:flex-row flex-col items-center sm:justify-start justify-center text-center sm:text-left">
+        <Image
+          alt="team"
+          className="flex-shrink-0 rounded-lg w-48 h-48 object-cover object-center sm:mb-0 mb-4"
+          src={imageUrl}
+          width={200}
+          height={200}
+        />
+        <div className="flex-grow sm:pl-8">
+          <h2 className="title-font font-medium text-xl text-gray-900">
+            {name}
+          </h2>
+          <h3 className="text-gray-500 text-lg mb-3">{position} - {domain}</h3>
+          <p className="mb-4">{quote}</p>
+          <span className="inline-flex sm:-ml-2.5">
+            {githubUrl && (
+              <a
+                className="text-gray-500 mx-3"
+                target="_blank"
+                title="github-link"
+                rel="noopener noreferrer"
+                href={githubUrl}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width={24}
+                  height={24}
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="#718096"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="feather feather-github"
+                >
+                  <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
+                </svg>
+              </a>
+            )}
+            {linkedinUrl && (
+              <a
+                className="mx-3 text-gray-500"
+                target="_blank"
+                title="linkedin-link"
+                rel="noopener noreferrer"
+                href={linkedinUrl}
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlnsXlink="http://www.w3.org/1999/xlink"
+                  width={24}
+                  height={24}
+                  viewBox="0 0 24 24"
+                >
+                  <g
+                    fill="none"
+                    stroke="#626262"
+                    strokeWidth={2}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2a2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
+                    <path d="M2 9h4v12H2z" />
+                    <circle cx={4} cy={4} r={2} />
+                  </g>
+                  <rect
+                    x={0}
+                    y={0}
+                    width={24}
+                    height={24}
+                    fill="rgba(0, 0, 0, 0)"
+                  />
+                </svg>
+              </a>
+            )}
+            {mailID && (
+              <a
+                className="mx-3 mt-1 text-gray-500"
+                target="_blank"
+                title="mail-link"
+                rel="noopener noreferrer"
+                href={`mailto:${mailID}`}
+              >
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  className="w-5 h-5"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M21 11.5a8.38 8.38 0 01-.9 3.8 8.5 8.5 0 01-7.6 4.7 8.38 8.38 0 01-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 01-.9-3.8 8.5 8.5 0 014.7-7.6 8.38 8.38 0 013.8-.9h.5a8.48 8.48 0 018 8v.5z" />
+                </svg>
+              </a>
+            )}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TeamLeadCard;
diff --git a/container/teams/TeamLead.tsx b/container/teams/TeamLead.tsx
@@ -0,0 +1,85 @@
+import TeamLeadCard from "@/components/teamPage/TeamLeadCard";
+import { positionData, MemberData } from "@/app/team/page";
+
+import getConfig from "next/config";
+const { publicRuntimeConfig } = getConfig();
+const { SERVER } = publicRuntimeConfig;
+
+interface TeamLeadsPropData {
+  teamleads: [MemberData];
+}
+
+const getTeamLead = (x: string) => {
+  switch (x) {
+    case positionData["5"]:
+      return "Team Lead";
+    default:
+      return "Team Lead";
+  }
+};
+
+const TeamLead = ({ teamleads }: TeamLeadsPropData) => {
+  return (
+    <section className="text-gray-600 body-font">
+      <div className="container px-5 py-24 mx-auto">
+        <div className="max-w-xl mb-10 ml-6 md:mx-auto sm:text-center lg:max-w-2xl md:mb-12">
+          <div>
+            <p className="inline-block px-3 py-px mb-4 text-xs font-semibold tracking-wider text-teal-900 uppercase rounded-full bg-teal-accent-400">
+              Leading Team
+            </p>
+          </div>
+          <h2 className="max-w-lg mb-6 font-sans text-3xl font-bold leading-none tracking-tight text-gray-900 sm:text-4xl md:mx-auto">
+            <span className="relative inline-block">
+              <svg
+                viewBox="0 0 52 24"
+                fill="currentColor"
+                className="absolute top-0 left-0 z-0 hidden w-32 -mt-8 -ml-20 text-blue-gray-100 lg:w-32 lg:-ml-28 lg:-mt-10 sm:block"
+              >
+                <defs>
+                  <pattern
+                    id="1d4040f3-9f3e-4ac7-b117-7d4009658ced"
+                    x={0}
+                    y={0}
+                    width=".135"
+                    height=".30"
+                  >
+                    <circle cx={1} cy={1} r=".7" />
+                  </pattern>
+                </defs>
+                <rect
+                  fill="url(#1d4040f3-9f3e-4ac7-b117-7d4009658ced)"
+                  width={52}
+                  height={24}
+                />
+              </svg>
+              <span className="relative">Meet Our&nbsp;</span>
+            </span>
+            Team Leads
+          </h2>
+          <p className="text-base font-light text-gray-700 md:text-lg">
+            “Of all the things I’ve done, the most vital is coordinating those
+            who work with me and aiming their efforts at a certain goal.” <br />
+            <span className="font-bold tracking-wider">– Walt Disney</span>
+          </p>
+        </div>
+        <div className="flex flex-wrap lg:ml-[3rem] -mt-4">
+          {teamleads.map((teamlead) => (
+            <TeamLeadCard
+              key={`coordinator-card-${teamlead.id}`}
+              name={teamlead.name}
+              position={getTeamLead(teamlead.position)}
+              domain={teamlead.domain}
+              imageUrl={SERVER + "/assets/" + teamlead.avatar}
+              quote={teamlead.quote}
+              githubUrl={teamlead.github}
+              linkedinUrl={teamlead.linkedin}
+              mailID={teamlead.email}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default TeamLead;