Merge pull request #163 from toggle-corp/feature/add-work-pdf

Add works page, update members

Author: udaynwa

pages/works/index.tsx

@@ -1,22 +1,21 @@
-import React, {
-    useMemo,
-    useState,
-} from 'react';
+import React from 'react';
 import { GetStaticProps } from 'next';
 // import { unique } from '@togglecorp/fujs';
 
-import { ProjectType, getProjectType } from 'data/projectTypes';
-import { getProjectCoverImage } from 'data/projectImages';
+import { ProjectType } from 'data/projectTypes';
+// import { getProjectCoverImage } from 'data/projectImages';
 import staticProjects, { Project } from 'data/projects';
 
 import Page from 'components/general/Page';
-import Card from 'components/general/Card';
-import Container from 'components/general/Container';
 import BannerWithImage from 'components/general/BannerWithImage';
 import KeyFigure from 'components/general/KeyFigure';
+import Container from 'components/general/Container';
+import Card from 'components/general/Card';
+/*
 import Separator from 'components/general/Separator';
 import Tabs from 'components/general/Tabs';
 import { selfSelector } from 'utils/common';
+*/
 
 import bannerImage from 'resources/works/banner.jpeg';
 
@@ -33,22 +32,19 @@ interface Props {
     projects: Project[];
 }
 
-function WorksPage(props: Props) {
-    const {
-        projects,
-    } = props;
-
-    const [
-        filteredProjectType,
-        setFilteredProjectType,
-    ] = useState<ProjectType | 'all'>('all');
-
+function WorksPage() {
     // const totalProjects = projects.length;
     const totalProjects = '250+';
 
     // const totalOrganizations = unique(projects.map((project) => project.client)).length;
     const totalOrganizations = '20+';
 
+    /*
+    const [
+        filteredProjectType,
+        setFilteredProjectType,
+    ] = useState<ProjectType | 'all'>('all');
+
     const filteredProjects = useMemo(() => {
         if (filteredProjectType === 'all') {
             return projects;
@@ -61,6 +57,7 @@ function WorksPage(props: Props) {
     const labelSelector = React.useCallback((projectType: ProjectType | 'all') => (
         projectType === 'all' ? 'All Works' : getProjectType(projectType).title
     ), []);
+    */
 
     return (
         <Page
@@ -86,6 +83,7 @@ function WorksPage(props: Props) {
                 />
             )}
         >
+            {/*
             <Container contentClassName={styles.workContent}>
                 <Tabs
                     options={projectTypeOptions}
@@ -109,6 +107,29 @@ function WorksPage(props: Props) {
                     ))}
                 </div>
             </Container>
+            */}
+            <Container contentClassName={styles.portfolioCard}>
+                <Card
+                    title="Development Team Portfolio"
+                    href="https://drive.google.com/file/d/1vXXxd5oWWRvTkMSlDO92NUzpf6gHknt1/view?usp=sharing"
+                    description={(
+                        <div>
+                            Click here to download
+                        </div>
+                    )}
+                    openExternal
+                />
+                <Card
+                    title="Analysis Team Portfolio"
+                    href="https://drive.google.com/file/d/1T6gHiY27jlpxJ4jpci1Af-JQ9Iev553X/view?usp=sharing"
+                    description={(
+                        <div>
+                            Click here to download
+                        </div>
+                    )}
+                    openExternal
+                />
+            </Container>
         </Page>
     );
 }

pages/works/styles.module.css

@@ -6,6 +6,7 @@
         padding: 3rem 0 0 0;
     }
 
+    /*
     .workContent {
         display: flex;
         flex-direction: column;
@@ -29,4 +30,10 @@
             }
         }
     }
-}
+    */
+    .portfolioCard {
+        display: grid;
+        grid-gap: 2rem;
+        grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
+    }
+}

src/components/general/Card/index.tsx

@@ -9,9 +9,10 @@ interface Props {
     variant?: 'mini' | 'normal';
     className?: string;
     href?: string;
+    openExternal?: Boolean;
     imageSrc?: string | StaticImageData;
     title?: string;
-    description?: string;
+    description?: string | React.ReactNode;
     tags?: string[];
 }
 
@@ -22,6 +23,7 @@ function Card(props: Props) {
         imageSrc,
         title,
         description,
+        openExternal,
         tags,
         href,
     } = props;
@@ -49,7 +51,7 @@ function Card(props: Props) {
                 {description && (
                     <div
                         className={styles.description}
-                        title={description}
+                        title={typeof description === 'string' ? description : undefined}
                     >
                         {description}
                     </div>
@@ -84,7 +86,10 @@ function Card(props: Props) {
             passHref
         >
             {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-            <a className={className}>
+            <a
+                className={className}
+                target={openExternal ? '_blank' : undefined}
+            >
                 {children}
             </a>
         </Link>

src/components/general/Footer/index.tsx

@@ -77,6 +77,9 @@ function Footer(props: Props) {
                     <Link href="/" passHref>
                         <span className={styles.linkHover}>Home</span>
                     </Link>
+                    <Link href="/works" passHref>
+                        <span className={styles.linkHover}>Works</span>
+                    </Link>
                     <Link href="/about-us" passHref>
                         <span className={styles.linkHover}>About</span>
                     </Link>

src/components/general/Navbar/index.tsx

@@ -142,6 +142,9 @@ function Navbar(props: NavProps) {
                 >
                     Blogs
                 </a>
+                <NavLink href="/works">
+                    Works
+                </NavLink>
                 <NavLink href="/about-us">
                     About
                 </NavLink>

src/data/employeeImages.ts

@@ -10,11 +10,9 @@ import keyurKhadka from 'resources/employee/keyur.jpeg';
 import kishanPahari from 'resources/employee/nishan.jpeg';
 import navinAyer from 'resources/employee/navin.jpeg';
 import nikaShakya from 'resources/employee/nika.jpeg';
-import poojaSharma from 'resources/employee/pooja.jpeg';
 import prinishaBaidya from 'resources/employee/prinisha.jpeg';
 import puranBan from 'resources/employee/puran.jpeg';
 import ranjanShrestha from 'resources/employee/ranjan.jpeg';
-import rishiKhatri from 'resources/employee/rishi.jpeg';
 import rubyThapaliya from 'resources/employee/ruby.jpeg';
 import safarLigal from 'resources/employee/safar.jpeg';
 import sadikshyaHamal from 'resources/employee/sadikshya.jpeg';
@@ -32,9 +30,7 @@ import pratikshyaBhattarai from 'resources/employee/pratikshya-bhattarai.jpeg';
 import sudanBhandari from 'resources/employee/sudan-bhandari.jpeg';
 import babinKarmacharya from 'resources/employee/babin-karmacharya.jpeg';
 import shreyaBhattarai from 'resources/employee/shreya-bhattarai.jpeg';
-import supriyaRana from 'resources/employee/supriyaRana.jpg';
 import sushilTiwari from 'resources/employee/sushilTiwari.jpg';
-import sauravSapkota from 'resources/employee/sauravSapkota.jpg';
 import roshaniPoudel from 'resources/employee/roshaniPoudel.jpg';
 
 import champaDevi from 'resources/employee/champa.jpeg';
@@ -58,7 +54,6 @@ const employeeImages: {
     'tc-063': bimalSaud,
     'tc-017': kishanPahari,
     'tc-030': nikaShakya,
-    'tc-034': poojaSharma,
     'tc-028': prinishaBaidya,
     'tc-056': puranBan,
     'tc-042': ranjanShrestha,
@@ -69,7 +64,6 @@ const employeeImages: {
     'tc-021': shristiManandhar,
     'tc-055': rup,
     'tc-047': sushmaAdhikari,
-    'tc-018': rishiKhatri,
     'tc-010': kanchiTamang,
     'tc-065': praneshShrestha,
     'tc-066': pratikshyaBhattarai,
@@ -78,9 +72,7 @@ const employeeImages: {
     'tc-070': babinKarmacharya,
     'tc-071': shreyaBhattarai,
     'tc-072': sushilTiwari,
-    'tc-073': sauravSapkota,
     'tc-074': roshaniPoudel,
-    'tc-075': supriyaRana,
 };
 
 // eslint-disable-next-line import/prefer-default-export