Merge pull request #204 from OpenPecha/teampage

update breadcramp and individual page in tibetan fixed
OpenPecha · Aug 30, 2024 · 5f3d2ec · 5f3d2ec
2 parents abff128 + 4e3c8b2
commit 5f3d2ec
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 44 deletions.
diff --git a/app/component/ToolWraper.tsx b/app/component/ToolWraper.tsx
@@ -4,15 +4,24 @@ import uselitteraTranlation from "./hooks/useLitteraTranslation";
 import { Breadcrumb } from "flowbite-react";
 import { HiHome } from "react-icons/hi";
 import { Link } from "@remix-run/react";
+import TibetanTeam from "~/helper/teamData/bo.json";
+import EnglishTeam from "~/helper/teamData/en.json";
 
 export const HomeIconWrapper = () => {
   return <HiHome className="dark:fill-primary-500 fill-secondary-500" />;
 };
 
-function ToolWraper({ title, children }) {
+function ToolWraper({ title, subRoute, children }) {
   let model = models.find((model) => model.name === title) ?? null;
   let { translation, locale } = uselitteraTranlation();
   let isEnglish = locale === "en_US";
+
+  const teamData = isEnglish ? EnglishTeam : TibetanTeam;
+
+  const userDetails = teamData.find(
+    (member) => member.route === subRoute?.subRoute
+  );
+
   return (
     <>
       <Breadcrumb
@@ -28,10 +37,25 @@ function ToolWraper({ title, children }) {
             {translation["home"]}
           </Link>
         </Breadcrumb.Item>
-        <Breadcrumb.Item href="#" theme={breadcrumb_theme.item}>
-          {translation[title]}
-        </Breadcrumb.Item>
+        {subRoute ? (
+          <>
+            <Breadcrumb.Item href="/team" theme={breadcrumb_theme.item}>
+              {translation[title]}
+            </Breadcrumb.Item>
+            <Breadcrumb.Item
+              href={subRoute.route}
+              theme={breadcrumb_theme.item}
+            >
+              {userDetails?.name}
+            </Breadcrumb.Item>
+          </>
+        ) : (
+          <Breadcrumb.Item href="#" theme={breadcrumb_theme.item}>
+            {translation[title]}
+          </Breadcrumb.Item>
+        )}
       </Breadcrumb>
+
       <div className="pt-[24px]">{children}</div>
     </>
   );

diff --git a/app/helper/teamData/bo.json b/app/helper/teamData/bo.json
@@ -83,7 +83,7 @@
     "route": "tenzin-kunsang",
     "name": "བསྟན་འཛིན་ཀུན་བཟང་།",
     "team": "Tech Team",
-    "designation": "FullStack Web Developer",
+    "designation": "Senior Software Engineer",
     "bios": "Raised in Bir, India, Tenzin Kunsang has been deeply immersed in web development for the past 3 to 4 years, honing his skills in both front-end and back-end technologies. After completing his engineering degree from Guru Gobind Singh Indraprastha University, Tenzin embarked on a career that combines his expertise in HTML, CSS, and JavaScript with frameworks like React and Vue.js to create dynamic and engaging user interfaces. On the back end, he applies his knowledge of Python (Django, Flask), Node.js, and PHP to build robust and scalable server-side applications, while managing databases such as MongoDB, PostgreSQL, and MySQL with ease.",
     "educationalProfessionalBackground": "Tenzin Kunsang has built a robust professional profile as a freelancer, specializing in WordPress development and the creation of static blog pages. Outside of his professional endeavors, he is passionate about sports and fitness, engaging in activities such as football, gym workouts, and swimming.\nschooling: TCV GOPALPUR, TCV SELAKUI   \ncollege: GGSIPU DELHI",
     "linkedInId": "https://www.linkedin.com/in/tenzin-kunsang-138599174/",
@@ -93,7 +93,7 @@
     "route": "tenzin-tsundue",
     "name": "བསྟན་འཛིན་བརྩོན་འགྲུས། ",
     "team": "Tech Team",
-    "designation": "གསར་སྤེལ་མི་སྣ།",
+    "designation": "Software Engineer II",
     "bios": "Tenzin Tsundue is proficient in Python programming and collaborates extensively with ChatGPT on diverse projects. Demonstrating a systematic approach, they effectively address development challenges and errors to achieve optimal outcomes.",
     "educationalProfessionalBackground": "Tenzin hold a Bachelor of Technology degree in Computer Science from VIT Bhopal and a graduate of TCV Selakui, he enjoys basketball and anime in their leisure time.",
     "linkedInId": "https://linkedin.com/in/tenzintsundue3",
@@ -103,7 +103,7 @@
     "route": "tenzin-gayche",
     "name": "བསྟན་འཛིན་དགེ་བྱེད།",
     "team": "Tech Team",
-    "designation": "ML Engineer",
+    "designation": "Senior Software Engineer",
     "bios": "Gayche is a seasoned ML Engineer with a deep-rooted passion for pushing the boundaries of language technology. With two years of hands-on experience in Machine Translation and Large Language Models, he brings a wealth of expertise to the team. His BTech in Computer Science, with a specialization in data science, provides a strong foundation for his technical prowess.",
     "educationalProfessionalBackground": "As a pioneer in the STT department, Gayche played a pivotal role in developing the team's inaugural text-to-speech model. His contributions have been instrumental in shaping the department's trajectory. Beyond his technical acumen, Gayche hobbies of birdwatching and painting lend a unique perspective to his work, fostering creativity and innovation. Driven by a desire to empower the Tibetan community, Gayche's ultimate goal is to elevate Tibetan language technology to par with other major languages. By bridging the digital divide, he aims to unlock a world of opportunities for Tibetan speakers.",
     "linkedInId": "",
@@ -113,7 +113,7 @@
     "route": "ganga-gyatso",
     "name": "གང་ག་རྒྱ་མཚོ།",
     "team": "Tech Team",
-    "designation": "ML Engineer",
+    "designation": "Software Engineer I",
     "bios": "Ganga Gyatso is a problem solver at heart, always seeking innovative approaches to tackle complex challenges. With nearly a year at Monlam AI, Ganga has immersed themselves in the art of machine learning, gaining invaluable insights into the entire process—from sourcing and cleaning data to training and deploying models. To Ganga, this intricate workflow is nothing short of a beautiful system, a pure art of flow. Passionate about their work, Ganga deeply values the collaborative environment at Monlam AI, where the supportive and dependable colleagues make the journey all the more rewarding. Their commitment to advancing technology is matched only by their enthusiasm for the dynamic, Startup atmosphere they thrive in. Outside of work, Ganga enjoys swimming and playing football to keep a fresh mind, balancing their technical pursuits with activities that refresh and invigorate.",
     "linkedInId": "https://www.linkedin.com/in/ganga-gyatso-030922280/",
     "headshot": "/assets/team/ganga-gyatso.jpg"
@@ -122,7 +122,7 @@
     "route": "tenzin-kalden1",
     "name": "བསྟན་འཛིན་སྐལ་ལྡན།",
     "team": "Tech Team",
-    "designation": "OCR Developer",
+    "designation": "Associate Software Engineer",
     "bios": "Tenzin Kalden is passionate about untangling complex problems through pattern recognition, he thrives on finding innovative solutions and turning challenges into opportunities for growth.",
     "educationalProfessionalBackground": "Kalden holds a bachelor's in automotive engineering and a PG diploma in CS, he is Enthusiastic about AI/ML and autonomous vehicles. When not exploring cutting-edge tech, Tenzin enjoys tinkering with model cars.",
     "linkedInId": "https://www.linkedin.com/in/tenzin-kalden-991b98189/",
@@ -132,7 +132,7 @@
     "route": "tenzin-tamdin",
     "name": "བསྟན་འཛིན་རྟ་མགྲིན།",
     "team": "Tech Team",
-    "designation": "FullStack Web Developer",
+    "designation": "Software Engineer II",
     "bios": "Tenzin Tamdin is born in southern India and raised in the northern region of Ladakh, Tenzin Tamdin has over two years of experience in web application development. An avid reader and lifelong learner, Tamdin excels in table tennis and swimming.",
     "educationalProfessionalBackground": " Tamdin graduated from St. Joseph's University, Bengaluru  with a B.Sc in PMC. He combines his technical expertise with a passion for continuous learning. Outside of work, Tamdin enjoys playing table tennis, swimming, and watching movies, balancing his professional life with active and leisurely pursuits.",
     "linkedInId": "https://www.linkedin.com/in/tenzintamdin592/",
@@ -142,7 +142,7 @@
     "route": "jimpa-gyatso",
     "name": "སྦྱིན་པ་རྒྱ་མཚོ་",
     "team": "Tech Team",
-    "designation": "Python developer",
+    "designation": "Associate Software Engineer",
     "bios": "Jimpa Gyatso is a Python developer with a flair for transforming complex challenges into elegant solutions. Passionate about crafting clean code, efficient algorithms, and continuous learning. Experienced in generating datasets and training models, with a keen interest in advancing innovations in machine learning. Always up for a coding challenge and eager to push the boundaries of technology and data-driven solutions.",
     "educationalProfessionalBackground": "He completed his Class 10 at TCV Chauntra and pursued PCMC at TCV Bylakuppe. He then earned his B.Tech in Computer Science from Jabalpur Engineering College through a Sherig seat. Professionally, he has freelanced as a frontend developer and worked as an Associate Software Engineer, focusing on networking protocols.He is passionate about coding and always excited to explore and learn new technology trends as a hobby.",
     "linkedInId": "https://www.linkedin.com/in/jimpa-gyatso-46317b210/",
@@ -162,7 +162,7 @@
     "route": "karma-tsering",
     "name": "ཀརྨ་ཚེ་རིང་།",
     "team": "Tech Team",
-    "designation": "Software Tester",
+    "designation": "Tester",
     "bios": "Karma Tsering is driven by a thirst for knowledge and a passion for personal growth, Karma Tsering is a dedicated professional with a solid foundation in Computer Science and Engineering. His curiosity fuels his continuous learning and improvement, making him a valuable asset to any team. With a keen interest in Buddhist philosophy, Karma brings a unique perspective and enriches every interaction.",
     "educationalProfessionalBackground": "",
     "linkedInId": "",

diff --git a/app/helper/teamData/en.json b/app/helper/teamData/en.json
@@ -11,7 +11,7 @@
   },
   {
     "route": "dawa-tsamchoe",
-    "name": "Dawa Tsamchoe་",
+    "name": "Dawa Tsamchoe",
     "team": "Admin Team",
     "designation": "Human Resource Representative",
     "bios": "Ambitious, Enthusiastic and lifelong learner.",

diff --git a/app/routes/team/route.tsx b/app/routes/team/route.tsx
@@ -18,7 +18,11 @@ function Team() {
   const teamData = isTibetan ? TibetanTeam : EnglishTeam;
 
   return (
-    <div className="m-auto w-[90%] md:w-[80%]  flex flex-col font-poppins">
+    <div
+      className={`m-auto w-[90%] md:w-[80%]  flex flex-col ${
+        isTibetan ? "font-monlam leading-loose" : "font-poppins"
+      }`}
+    >
       <ToolWraper title="team">
         <div className="flex flex-col md:flex-row mb-8 justify-between items-center">
           <div className="w-full md:w-1/2 mb-4 text-left">

diff --git a/app/routes/team_.$name/route.tsx b/app/routes/team_.$name/route.tsx
@@ -4,53 +4,65 @@ import TibetanTeam from "~/helper/teamData/bo.json";
 import EnglishTeam from "~/helper/teamData/en.json";
 import { FaLinkedinIn } from "react-icons/fa6";
 import type { LoaderFunction } from "@remix-run/node";
+import ToolWraper from "~/component/ToolWraper";
 
 // load the name from the URL
-export const loader: LoaderFunction = async ({ params }) => {
-  return { name: params.name };
+export const loader: LoaderFunction = async ({ request, params }) => {
+  const url = new URL(request.url);
+  const pathname = url.pathname;
+  const name = params.name;
+
+  const userDetails = EnglishTeam.find((member) => member.route === name);
+  const subRoute = { name: userDetails?.name, route: pathname, subRoute: name };
+
+  return { name, subRoute };
 };
 
 function TeamDetailsPage() {
   let { translation, isTibetan } = uselitteraTranlation();
-  const { name } = useLoaderData();
+  const { name, subRoute } = useLoaderData();
 
-  const userDetails = EnglishTeam.find((member) => member.route === name);
+  const teamData = isTibetan ? TibetanTeam : EnglishTeam;
+
+  const userDetails = teamData.find((member) => member.route === name);
 
   return (
     <div
       className={`m-auto w-[90%] md:w-[80%]  flex flex-col ${
         isTibetan ? "font-monlam leading-loose" : "font-poppins"
       }`}
     >
-      <div className="flex flex-col lg:flex-row mx-auto gap-10 lg:gap-14 mt-10">
-        <div className="lg:w-1/3">
-          <img
-            src={userDetails?.headshot}
-            alt={userDetails?.name}
-            className="max-w-72 max-h-72 object-fill"
-          />
-          {userDetails?.linkedInId !== "" && (
-            <div className="flex items-center gap-4 mt-4">
-              <h5>Find them online:</h5>
-              <a
-                href={userDetails?.linkedInId}
-                target="_blank"
-                rel="noreferrer"
-              >
-                <FaLinkedinIn />
-              </a>
+      <ToolWraper title="team" subRoute={subRoute}>
+        <div className="flex flex-col lg:flex-row mx-auto gap-10 lg:gap-14 mt-10 mb-20">
+          <div className="lg:w-1/3">
+            <img
+              src={userDetails?.headshot}
+              alt={userDetails?.name}
+              className="max-w-72 max-h-72 object-fill"
+            />
+            {userDetails?.linkedInId !== "" && (
+              <div className="flex items-center gap-4 mt-4">
+                <h5>Find them online:</h5>
+                <a
+                  href={userDetails?.linkedInId}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <FaLinkedinIn />
+                </a>
+              </div>
+            )}
+          </div>
+          <div className="lg:w-2/3 flex flex-col gap-4">
+            <h2 className="text-2xl font-bold">{userDetails?.name}</h2>
+            <p className=" text-xl ">{userDetails?.designation}</p>
+            <div className="space-y-4">
+              <p>{userDetails?.bios}</p>
+              <p>{userDetails?.educationalProfessionalBackground}</p>
             </div>
-          )}
-        </div>
-        <div className="lg:w-2/3 flex flex-col gap-4">
-          <h2 className="text-2xl font-bold">{userDetails?.name}</h2>
-          <p className=" text-xl ">{userDetails?.designation}</p>
-          <div className="space-y-4">
-            <p>{userDetails?.bios}</p>
-            <p>{userDetails?.educationalProfessionalBackground}</p>
           </div>
         </div>
-      </div>
+      </ToolWraper>
     </div>
   );
 }