Add location & change current experience appearance

teimurjan · teimurjan · commit 1362b952d38a · 2021-12-25T16:50:54.000+06:00
diff --git a/workspaces/gql-types/src/index.ts b/workspaces/gql-types/src/index.ts
diff --git a/workspaces/landing/package.json b/workspaces/landing/package.json
@@ -46,6 +46,7 @@
     "graphql": "^15.6.1",
     "path-browserify": "^1.0.1",
     "process": "^0.11.10",
+    "rc-tooltip": "^5.1.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
@@ -59,8 +60,8 @@
   "devDependencies": {
     "@babel/preset-env": "^7.15.8",
     "@babel/preset-react": "^7.14.5",
-    "@babel/register": "^7.15.3",
     "@babel/preset-typescript": "^7.15.0",
+    "@babel/register": "^7.15.3",
     "@types/react-helmet": "^6.1.4",
     "@types/react-transition-group": "^4.4.4"
   }
diff --git a/workspaces/landing/src/components/atoms/index.ts b/workspaces/landing/src/components/atoms/index.ts
@@ -24,3 +24,5 @@ export { default as Button } from './button'
 export type { ButtonProps, ButtonLinkProps } from './button'
 export { default as ScrollToArea } from './scroll-to-area'
 export type { Props as ScrollToAreaProps } from './scroll-to-area'
+export { default as Tag } from './tag'
+export type { Props as TagProps } from './tag'
diff --git a/workspaces/landing/src/components/atoms/tag/Tag.tsx b/workspaces/landing/src/components/atoms/tag/Tag.tsx
@@ -0,0 +1,32 @@
+import { css } from '@emotion/react'
+import { ReactNode } from 'react'
+import { theme } from '@teimurjan/utils'
+import { EmotionProps } from '../../../utils'
+
+export interface Props extends EmotionProps {
+  children: ReactNode
+  color: keyof typeof theme.colors.background
+}
+
+const Tag = ({ className, children, color }: Props) => {
+  const textColor = color === 'beige' ? 'blue' : 'beige'
+
+  return (
+    <span
+      css={css`
+        background: ${theme.colors.background[color]};
+        text-transform: uppercase;
+        font-weight: bold;
+        font-size: ${theme.typography.text.small.fontSize};
+        line-height: ${theme.typography.text.small.lineHeight};
+        padding: ${theme.spacing.xxsmall} ${theme.spacing.xsmall};
+        color: ${theme.colors.typography[textColor]};
+      `}
+      className={className}
+    >
+      {children}
+    </span>
+  )
+}
+
+export default Tag
diff --git a/workspaces/landing/src/components/atoms/tag/index.ts b/workspaces/landing/src/components/atoms/tag/index.ts
@@ -0,0 +1,2 @@
+export { default } from './Tag'
+export type { Props } from './Tag'
diff --git a/workspaces/landing/src/components/molecules/card/Card.tsx b/workspaces/landing/src/components/molecules/card/Card.tsx
@@ -11,9 +11,9 @@ export interface Props extends EmotionProps {
   imageSrc?: string
   imageAlt?: string
   title: string
-  subtitle1: string
+  subtitle1: ReactNode
   subtitle2?: string
-  color?: keyof typeof theme.colors.background
+  overlay?: ReactNode
 }
 
 const Card = forwardRef<HTMLDivElement, Props>(
@@ -27,58 +27,70 @@ const Card = forwardRef<HTMLDivElement, Props>(
       imageAlt,
       subtitle1,
       subtitle2,
-      color = 'beige',
+      overlay,
     },
     ref
   ) => {
-    const textColor = color === 'beige' ? 'blue' : 'beige'
-
     return (
       <div
         id={id}
         ref={ref}
         css={css`
           padding: ${theme.spacing.small} ${theme.spacing.medium};
           box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
-          background: ${theme.colors.background[color]};
+          background: ${theme.colors.background.beige};
+          position: relative;
         `}
         className={className}
       >
+        {overlay && (
+          <div
+            css={css`
+              position: absolute;
+              right: 0;
+              top: ${theme.spacing.small};
+            `}
+            color="blue"
+          >
+            {overlay}
+          </div>
+        )}
+
         <Flex alignItemsCenter>
           {imageSrc && (
             <Flex.Item>
               <img
                 css={css`
                   max-height: 3.25rem;
-                  margin-right: ${theme.spacing.small};
+                  margin-right: ${theme.spacing.medium};
                 `}
                 src={imageSrc}
                 alt={imageAlt}
               />
             </Flex.Item>
           )}
 
-          <Flex.Item>
-            <Typography.Title color={textColor} variant="h4">
-              {title}
-            </Typography.Title>
+          <Flex.Item
+            css={
+              overlay &&
+              css`
+                padding-right: ${theme.spacing.medium};
+              `
+            }
+          >
+            <Typography.Title variant="h4">{title}</Typography.Title>
             <Typography.Title
-              color={textColor}
               css={css`
                 margin-bottom: ${theme.spacing.xsmall};
               `}
               variant="h5"
             >
               {subtitle1}
             </Typography.Title>
-            {subtitle2 && (
-              <Typography.Text color={textColor}>{subtitle2}</Typography.Text>
-            )}
+            {subtitle2 && <Typography.Text>{subtitle2}</Typography.Text>}
           </Flex.Item>
         </Flex>
-        <Typography.Text color={textColor} container>
-          {children}
-        </Typography.Text>
+        <Typography.Text container>{children}</Typography.Text>
       </div>
     )
   }
diff --git a/workspaces/landing/src/components/organisms/experience-history/ExperienceHistory.tsx b/workspaces/landing/src/components/organisms/experience-history/ExperienceHistory.tsx
@@ -1,10 +1,12 @@
+import { Fragment } from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
 import { css } from '@emotion/react'
 import { Swiper, SwiperSlide } from 'swiper/react'
 import SwiperCore, { Pagination } from 'swiper'
 import { prettyRange, theme } from '@teimurjan/utils'
 import { ExperienceHistoryQuery } from '@teimurjan/gql-types'
-import { RichText, ScrollToArea, Typography } from '../../atoms'
+import Tooltip from 'rc-tooltip'
+import { RichText, ScrollToArea, Tag, Typography } from '../../atoms'
 import { Card } from '../../molecules'
 
 const query = graphql`
@@ -26,6 +28,8 @@ const query = graphql`
         description {
           html
         }
+        location
+        locationIcon
       }
     }
   }
@@ -67,6 +71,9 @@ const ExperienceHistory = () => {
       </Typography.Title>
 
       <Swiper
+        css={css`
+          margin: 0 -${theme.spacing.small};
+        `}
         pagination={{ clickable: true }}
         slidesPerView={1}
         spaceBetween={0}
@@ -80,30 +87,48 @@ const ExperienceHistory = () => {
         }}
         onBreakpoint={handleSwiperBreakpointChange}
       >
-        {experiences.map((experience, index) => {
+        {experiences.map((experience) => {
           return (
             <SwiperSlide key={experience.id}>
               <Card
                 css={css`
                   margin-top: ${theme.spacing.small};
                   margin-right: ${theme.spacing.small};
+                  margin-left: ${theme.spacing.small};
                   margin-bottom: ${theme.spacing.xlarge};
 
-                  height: 475px;
+                  height: 500px;
 
                   @media ${theme.screens.medium.mediaUpTo} {
                     height: 625px;
                   }
                 `}
-                color={index === 0 ? 'blue' : undefined}
                 imageSrc={experience.logo.url}
                 imageAlt={experience.company}
                 title={experience.position}
-                subtitle1={`at ${experience.company}`}
+                subtitle1={
+                  <Fragment>
+                    at {experience.company}{' '}
+                    <Tooltip
+                      placement="right"
+                      overlay={<span>{experience.location}</span>}
+                      destroyTooltipOnHide
+                    >
+                      <span
+                        css={css`
+                          cursor: default;
+                        `}
+                      >
+                        {experience.locationIcon}
+                      </span>
+                    </Tooltip>
+                  </Fragment>
+                }
                 subtitle2={prettyRange(
                   experience.startDate,
                   experience.endDate
                 )}
+                overlay={!experience.endDate && <Tag color="blue">Now</Tag>}
               >
                 <RichText html={experience.description.html} />
               </Card>
diff --git a/workspaces/landing/src/pages/index.tsx b/workspaces/landing/src/pages/index.tsx
@@ -1,5 +1,6 @@
 import 'swiper/css'
 import 'swiper/css/pagination'
+import 'rc-tooltip/assets/bootstrap.css'
 import { Content, Layout } from '../components/atoms'
 import { Section, GridSection } from '../components/molecules'
 import {
diff --git a/workspaces/utils/src/theme.ts b/workspaces/utils/src/theme.ts
@@ -126,6 +126,7 @@ const theme = {
     },
   },
   spacing: {
+    xxsmall: '0.25rem',
     xsmall: '0.5rem',
     small: '1rem',
     medium: '2rem',
diff --git a/yarn.lock b/yarn.lock
@@ -1098,6 +1098,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.10.1", "@babel/runtime@^7.11.1":
+  version "7.16.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.5.tgz#7f3e34bf8bdbbadf03fbb7b1ea0d929569c9487a"
+  integrity sha512-TXWihFIS3Pyv5hzR7j6ihmeLkZfrXGxAr5UfSl8CHf+6q/wpiYDkUau0czckpYG8QmnCIuPpdLtuA9VmuGGyMA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.14.6":
   version "7.16.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.3.tgz#b86f0db02a04187a3c17caa77de69840165d42d5"
@@ -4756,6 +4763,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@2.x, classnames@^2.2.1, classnames@^2.2.6:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@@ -5860,6 +5872,11 @@ dom-accessibility-api@^0.5.9:
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.10.tgz#caa6d08f60388d0bb4539dd75fe458a9a1d0014c"
   integrity sha512-Xu9mD0UjrJisTmv7lmVSDMagQcU9R5hwAbxsaAE/35XPnPLJobbuREfV/rraiSaEj/UOvgrzQs66zyTWTlyd+g==
 
+dom-align@^1.7.0:
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/dom-align/-/dom-align-1.12.2.tgz#0f8164ebd0c9c21b0c790310493cd855892acd4b"
+  integrity sha512-pHuazgqrsTFrGU2WLDdXxCFabkdQDx72ddkraZNih1KsMcN5qsRSTR9O4VJRlwTPCPb5COYg3LOfiMHHcPInHg==
+
 dom-converter@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
@@ -12383,6 +12400,55 @@ raw-loader@^4.0.2:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
+rc-align@^4.0.0:
+  version "4.0.11"
+  resolved "https://registry.yarnpkg.com/rc-align/-/rc-align-4.0.11.tgz#8198c62db266bc1b8ef05e56c13275bf72628a5e"
+  integrity sha512-n9mQfIYQbbNTbefyQnRHZPWuTEwG1rY4a9yKlIWHSTbgwI+XUMGRYd0uJ5pE2UbrNX0WvnMBA1zJ3Lrecpra/A==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "2.x"
+    dom-align "^1.7.0"
+    lodash "^4.17.21"
+    rc-util "^5.3.0"
+    resize-observer-polyfill "^1.5.1"
+
+rc-motion@^2.0.0:
+  version "2.4.4"
+  resolved "https://registry.yarnpkg.com/rc-motion/-/rc-motion-2.4.4.tgz#e995d5fa24fc93065c24f714857cf2677d655bb0"
+  integrity sha512-ms7n1+/TZQBS0Ydd2Q5P4+wJTSOrhIrwNxLXCZpR7Fa3/oac7Yi803HDALc2hLAKaCTQtw9LmQeB58zcwOsqlQ==
+  dependencies:
+    "@babel/runtime" "^7.11.1"
+    classnames "^2.2.1"
+    rc-util "^5.2.1"
+
+rc-tooltip@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/rc-tooltip/-/rc-tooltip-5.1.1.tgz#94178ed162d0252bc4993b725f5dc2ac0fccf154"
+  integrity sha512-alt8eGMJulio6+4/uDm7nvV+rJq9bsfxFDCI0ljPdbuoygUscbsMYb6EQgwib/uqsXQUvzk+S7A59uYHmEgmDA==
+  dependencies:
+    "@babel/runtime" "^7.11.2"
+    rc-trigger "^5.0.0"
+
+rc-trigger@^5.0.0:
+  version "5.2.10"
+  resolved "https://registry.yarnpkg.com/rc-trigger/-/rc-trigger-5.2.10.tgz#8a0057a940b1b9027eaa33beec8a6ecd85cce2b1"
+  integrity sha512-FkUf4H9BOFDaIwu42fvRycXMAvkttph9AlbCZXssZDVzz2L+QZ0ERvfB/4nX3ZFPh1Zd+uVGr1DEDeXxq4J1TA==
+  dependencies:
+    "@babel/runtime" "^7.11.2"
+    classnames "^2.2.6"
+    rc-align "^4.0.0"
+    rc-motion "^2.0.0"
+    rc-util "^5.5.0"
+
+rc-util@^5.2.1, rc-util@^5.3.0, rc-util@^5.5.0:
+  version "5.16.1"
+  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.16.1.tgz#374db7cb735512f05165ddc3d6b2c61c21b8b4e3"
+  integrity sha512-kSCyytvdb3aRxQacS/71ta6c+kBWvM1v8/2h9d/HaNWauc3qB8pLnF20PJ8NajkNN8gb+rR1l0eWO+D4Pz+LLQ==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    react-is "^16.12.0"
+    shallowequal "^1.1.0"
+
 rc@^1.2.7, rc@^1.2.8:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
@@ -12988,6 +13054,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+resize-observer-polyfill@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
+  integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
+
 resolve-alpn@^1.0.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/resolve-alpn/-/resolve-alpn-1.2.1.tgz#b7adbdac3546aaaec20b45e7d8265927072726f9"
@@ -13373,6 +13444,11 @@ shallow-compare@^1.2.2:
   resolved "https://registry.yarnpkg.com/shallow-compare/-/shallow-compare-1.2.2.tgz#fa4794627bf455a47c4f56881d8a6132d581ffdb"
   integrity sha512-LUMFi+RppPlrHzbqmFnINTrazo0lPNwhcgzuAXVVcfy/mqPDrQmHAyz5bvV0gDAuRFrk804V0HpQ6u9sZ0tBeg==
 
+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 sharp@^0.29.0:
   version "0.29.1"
   resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.29.1.tgz#f60b50f24f399464a24187c86bd2da41aae50b85"

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+export { default } from './Tag'`
	`2`	`+export type { Props } from './Tag'`