add case 💯

WeFoxTech · Mar 5, 2020 · 2a601f5 · 2a601f5 · github-actions · Mar 5, 2020
1 parent 0a07b42
commit 2a601f5
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 34 deletions.
diff --git a/packages/website/components/cases/Case.tsx b/packages/website/components/cases/Case.tsx
@@ -72,7 +72,7 @@ export const ShowCases: React.FC = () => {
       </Typography>
 
       <Typography className={classes.teamSummary}>{caseSummary[locale]}</Typography>
-      <Grid className={classes.geistWrapper} container spacing={3}>
+      <Grid className={classes.geistWrapper} container spacing={4}>
         {casesData.map((e, i) => (
           <Item key={i} item={e} />
         ))}

diff --git a/packages/website/components/cases/Item.tsx b/packages/website/components/cases/Item.tsx
@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react';
-import { Card, Avatar, Grid, Typography, Link, Tooltip } from '@material-ui/core';
+import { Card, Avatar, Grid, Typography, Link, Tooltip, Box } from '@material-ui/core';
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import clsx from 'clsx';
 import GitHubIcon from '@material-ui/icons/GitHub';
@@ -9,6 +9,15 @@ import { WeiboIcon } from '../icons/Weibo';
 import { MDXComponent } from '~/src/types/mdx';
 import useTranslation from '~/src/hooks/useTranslation';
 import { ShowCaseDataItem } from '../../src/data/casesData';
+import { Site } from '../team/Menber';
+import { formatWithOptions } from 'date-fns/fp';
+import { differenceInDays } from 'date-fns';
+import { zhCN, enUS } from 'date-fns/locale';
+import { Locale } from '../../src/translations/config';
+import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
+import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
+import TrendingFlatIcon from '@material-ui/icons/TrendingFlat';
+import LinkIcon from '@material-ui/icons/Link';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -31,11 +40,11 @@ const useStyles = makeStyles((theme: Theme) =>
       paddingLeft: theme.spacing(2),
       paddingRight: theme.spacing(2),
       paddingBottom: theme.spacing(2),
-      maxWidth: theme.spacing(32),
+      maxWidth: theme.spacing(48),
     },
-    name:{
-        paddingTop: theme.spacing(2),
-        paddingBottom: theme.spacing(1),
+    name: {
+      paddingTop: theme.spacing(2),
+      paddingBottom: theme.spacing(1),
     },
     links: {
       display: 'flex',
@@ -50,22 +59,73 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 );
 
-
-
+const timeFormat: (locale: Locale, fixedToday: boolean) => (date: Date) => string = (
+  locale,
+  fixedToday = false
+) => {
+  if (locale === 'zh') {
+    //  https://date-fns.org/v2.10.0/docs/format
+    return formatWithOptions({ locale: zhCN }, fixedToday ? 'yyyy年MMMMdo日' : 'yyyy年MMMM');
+  } else {
+    return formatWithOptions({ locale: enUS }, fixedToday ? 'MMM dd yyyy' : 'MMMM yyyy');
+  }
+};
 
 export const Desc: React.FC<{ item: ShowCaseDataItem }> = ({ item }) => {
   const { t, locale } = useTranslation();
-  let desc:string;
+  let desc: string;
   if (locale === 'zh' && item.cnDesc) {
     desc = item.cnDesc;
   } else {
-    desc  = item.desc;
+    desc = item.desc;
   }
-    return <Typography>{desc}</Typography>;
-
+  return <Typography>{desc}</Typography>;
 };
 
-const Name: React.FC<{ item: ShowCaseDataItem }> = ({ item }) => {
+const TimeBox: React.FC = ({ children }) => (
+  <Box
+    display="inline"
+    bgcolor="success.main"
+    p={4 / 8}
+    mx={2 / 8}
+    color="background.paper"
+    boxShadow={1}
+  >
+    <Typography variant="body2" component="span">{children}</Typography>
+  </Box>
+);
+const TimeRange: React.FC<{ item: ShowCaseDataItem }> = ({ item }) => {
+  let [from, to] = item.timeRange;
+  const { t, locale } = useTranslation();
+  const rangeDays = differenceInDays(new Date(to === 'now' ? Date.now() : to), new Date(from));
+  const fixedToday = rangeDays < 31;
+  let since = timeFormat(locale, fixedToday)(new Date(from));
+  let end;
+  if (to === 'now') {
+    if (locale === 'zh') {
+      end = '至今';
+    } else {
+      end = 'nowadays';
+    }
+  } else {
+    end = timeFormat(locale, fixedToday)(new Date(to));
+  }
+
+  return (
+    <Box display="flex" pb={2} pt={1}>
+      <TimeBox> {since}</TimeBox>
+      {rangeDays > 2 && (
+        <>
+          <Box pt={0.5}>
+            <TrendingFlatIcon />
+          </Box>
+          <TimeBox> {end}</TimeBox>
+        </>
+      )}
+    </Box>
+  );
+};
+const Name: React.FC<{ item: ShowCaseDataItem; showLink: boolean }> = ({ item, showLink }) => {
   const classes = useStyles();
   const { t, locale } = useTranslation();
   let name: string;
@@ -74,18 +134,26 @@ const Name: React.FC<{ item: ShowCaseDataItem }> = ({ item }) => {
   } else {
     name = item.name;
   }
-
-  return (
-    <Typography  className={classes.name} variant="h5" component="strong">
-      {name}
-    </Typography>
-  );
+  if (showLink && item.site) {
+    return (
+      <Link className={classes.name} href={item.site} target="_blank">
+        <Typography className={classes.name} variant="h6" component="strong">
+          <LinkIcon />
+          {name}
+        </Typography>
+      </Link>
+    );
+  } else {
+    return (
+      <Typography className={classes.name} variant="h6" component="strong">
+        {name}
+      </Typography>
+    );
+  }
 };
 
-
-export const Item: React.FC<{item: ShowCaseDataItem}> = ({ item }) => {
+export const Item: React.FC<{ item: ShowCaseDataItem }> = ({ item }) => {
   const classes = useStyles();
-
   const [hover, setHover] = React.useState(false);
 
   const mouseEnter = () => {
@@ -110,13 +178,15 @@ export const Item: React.FC<{item: ShowCaseDataItem}> = ({ item }) => {
           alt={data.name}
           src={data.avatar}
         ></Avatar> */}
-        <Name item={item} />
-        {/* <Grid container className={classes.links}>
-          <GitHub id={data.github}> </GitHub>
-          <Twitter id={data.twitter}> </Twitter>
-          <Weibo id={data.weibo}> </Weibo>
-          <Site url={data.site}></Site>
-        </Grid> */}
+        <Name item={item} showLink={hover} />
+
+        <TimeRange item={item} />
+        <Grid container className={classes.links}>
+          {/* <GitHub id={data.github}> </GitHub> */}
+          {/* <Twitter id={data.twitter}> </Twitter> */}
+          {/* <Weibo id={data.weibo}> </Weibo> */}
+          {/* <Site url={item.site}></Site> */}
+        </Grid>
         <Desc item={item}></Desc>
       </Card>
     </Grid>

diff --git a/packages/website/package.json b/packages/website/package.json
@@ -41,6 +41,7 @@
     "@mdx-js/mdx": "^1.5.5",
     "@now/node": "^1.3.5",
     "clsx": "^1.0.4",
+    "date-fns": "^2.10.0",
     "next": "9.2.2",
     "qrcode.react": "^1.0.0",
     "react": "^16.13.0",

diff --git a/packages/website/src/data/casesData.tsx b/packages/website/src/data/casesData.tsx
@@ -69,7 +69,7 @@ export const casesData: ShowCaseDataItem[] = [
       '该创业团队致力于为中小微企业和个体提供安全、稳定、实惠的客服服务。我们帮该创业团队解决一些前端的疑难杂症、以及用Electron封装了桌面端。目前该团队的核心技术也加入了我们的顾问团队，可以为你提供im、客服领域的技术顾问服务。',
   },
   {
-    timeRange: ['2020-03-01T00:00:00.000Z', '2020-03-01T00:00:00.000Z'],
+    timeRange: ['2020-03-03T00:00:00.000Z', '2020-03-03T00:00:00.000Z'],
     name: 'ZhangYe',
     cnName: '玄晔',
     type: 'personal',

diff --git a/yarn.lock b/yarn.lock
@@ -1101,10 +1101,10 @@
     unique-filename "^1.1.1"
     which "^1.3.1"
 
-"@foxmn/mdx-loader@^1.5.13":
-  version "1.5.13"
-  resolved "https://registry.yarnpkg.com/@foxmn/mdx-loader/-/mdx-loader-1.5.13.tgz#9647f21c050fb042fef11c8351449018fb73d8f3"
-  integrity sha512-ygo30Jh5l1G2P6/yBT5fkEnec/MKSwPPs9BC7AUFJmM04r7HeB0QrSEFAmXXCLb4PQgTJvc6KIpiFBD0XbOfcQ==
+"@foxmn/mdx-loader@^1.5.14":
+  version "1.5.14"
+  resolved "https://registry.yarnpkg.com/@foxmn/mdx-loader/-/mdx-loader-1.5.14.tgz#a16dd808698ab682a83e45553cd1183b6e89ddd6"
+  integrity sha512-kjCnS1mWXyKbiDMjiDbfIyuOEdBysLHAp8T1mDb7NA0YZw7Ul+hA5CLgOUPFU+9OSMogJX8UT5OHExWePzagxw==
   dependencies:
     "@mdx-js/mdx" "^1.5.7"
     "@mdx-js/react" "^1.5.7"
@@ -3963,6 +3963,11 @@ date-fns@^2.0.1:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.9.0.tgz#d0b175a5c37ed5f17b97e2272bbc1fa5aec677d2"
   integrity sha512-khbFLu/MlzLjEzy9Gh8oY1hNt/Dvxw3J6Rbc28cVoYWQaC1S3YI4xwkF9ZWcjDLscbZlY9hISMr66RFzZagLsA==
 
+date-fns@^2.10.0:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.10.0.tgz#abd10604d8bafb0bcbd2ba2e9b0563b922ae4b6b"
+  integrity sha512-EhfEKevYGWhWlZbNeplfhIU/+N+x0iCIx7VzKlXma2EdQyznVlZhCptXUY+BegNpPW2kjdx15Rvq503YcXXrcA==
+
 dateformat@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"