Resource hub (#323)

* Resource hub * Fix type errors & lint * Edit video cards * Capitalize tags * Fix responsive video cards * Move resource hub into its dedicated page * Fix arrow-back color
safe-global · Jan 30, 2024 · 897ea53 · 897ea53
1 parent 2b5eda6
commit 897ea53
Show file tree

Hide file tree

Showing 21 changed files with 1,455 additions and 53 deletions.
diff --git a/assets/svg/arrow-back.svg b/assets/svg/arrow-back.svg
diff --git a/assets/svg/chevron-down.svg b/assets/svg/chevron-down.svg
diff --git a/assets/svg/close.svg b/assets/svg/close.svg
diff --git a/assets/svg/cross.svg b/assets/svg/cross.svg
diff --git a/assets/svg/filter.svg b/assets/svg/filter.svg
diff --git a/assets/svg/search.svg b/assets/svg/search.svg
diff --git a/components/Footer/index.tsx b/components/Footer/index.tsx
@@ -167,41 +167,56 @@ const subFooterItems: FooterLink[] = [
   }
 ]
 
-function LinksColumn({ title, items } : { title: string, items: FooterLink[] }) {
-  return (
-    <Grid item sm={6} md={2}>
-      <Typography variant='caption' color='text.primary'>
-        {title}
-      </Typography>
-      <ul className={css.list}>
-        {items.map(item => (
-          <li className={css.listItem} key={item.href}>
-            <Link href={item.href} target={item.target} rel={item.rel}>
-              {item.label}
-            </Link>
-          </li>
-        ))}
-      </ul>
-    </Grid>
-  )
-}
+const LinksColumn: React.FC<{ title: string, items: FooterLink[] }> = ({
+  title,
+  items
+}) => (
+  <Grid item sm={6} md={2}>
+    <Typography variant='caption' color='text.primary'>
+      {title}
+    </Typography>
+    <ul className={css.list}>
+      {items.map(item => (
+        <li className={css.listItem} key={item.href}>
+          <Link href={item.href} target={item.target} rel={item.rel}>
+            {item.label}
+          </Link>
+        </li>
+      ))}
+    </ul>
+  </Grid>
+)
 
-function Socials() {
-  return (
-    <Grid item xs={12} md={3} mt={{ xs: 6, md: 0 }}>
-      <div className={css.socials}>
-        {createFooterButton('X page', X_LINK, XIcon as React.FC)}
-        {createFooterButton('Discourse forum', FORUM_LINK, DiscourseIcon as React.FC)}
-        {createFooterButton('Discord server', DISCORD_LINK, DiscordIcon as React.FC)}
-        {createFooterButton('Youtube channel', YOUTUBE_LINK, YoutubeIcon as React.FC)}
-        {createFooterButton('Mirror blog', MIRROR_LINK, MirrorIcon as React.FC)}
-        {createFooterButton('Github organization', GITHUB_LINK, GithubIcon as React.FC)}
-      </div>
-    </Grid>
-  )
-}
+const Socials: React.FC = () => (
+  <Grid item xs={12} md={3} mt={{ xs: 6, md: 0 }}>
+    <div className={css.socials}>
+      {createFooterButton('X page', X_LINK, XIcon as React.FC)}
+      {createFooterButton(
+        'Discourse forum',
+        FORUM_LINK,
+        DiscourseIcon as React.FC
+      )}
+      {createFooterButton(
+        'Discord server',
+        DISCORD_LINK,
+        DiscordIcon as React.FC
+      )}
+      {createFooterButton(
+        'Youtube channel',
+        YOUTUBE_LINK,
+        YoutubeIcon as React.FC
+      )}
+      {createFooterButton('Mirror blog', MIRROR_LINK, MirrorIcon as React.FC)}
+      {createFooterButton(
+        'Github organization',
+        GITHUB_LINK,
+        GithubIcon as React.FC
+      )}
+    </div>
+  </Grid>
+)
 
-function SubFooter() {
+const SubFooter: React.FC = () => {
   // const { openBanner } = useCookieBannerContext()
 
   const showBanner = (e: SyntheticEvent): void => {
@@ -257,24 +272,22 @@ const createFooterButton = (
   )
 }
 
-function Footer() {
-  return (
-    <Container className={css.wrapper}>
-      <Grid container flexDirection={{ xs: 'column', sm: 'row' }}>
-        <Grid item xs={12} md={3} mb={{ xs: 4, md: 0 }}>
-          <Link href={SAFE_LINK} target="_blank" rel="noreferrer">
-            <Logo className={css.logo} />
-          </Link>
-        </Grid>
-        <LinksColumn title="Safe" items={safeItems} />
-        <LinksColumn title="Community" items={communityItems} />
-        <LinksColumn title="Resources" items={resourcesItems} />
-        <Socials />
+const Footer: React.FC = () => (
+  <Container className={css.wrapper}>
+    <Grid container flexDirection={{ xs: 'column', sm: 'row' }}>
+      <Grid item xs={12} md={3} mb={{ xs: 4, md: 0 }}>
+        <Link href={SAFE_LINK} target='_blank' rel='noreferrer'>
+          <Logo className={css.logo} />
+        </Link>
       </Grid>
-      <Divider sx={{ mt: 5, mb: { xs: 3, md: 0 } }} />
-      <SubFooter />
-    </Container>
-  )
-}
+      <LinksColumn title='Safe' items={safeItems} />
+      <LinksColumn title='Community' items={communityItems} />
+      <LinksColumn title='Resources' items={resourcesItems} />
+      <Socials />
+    </Grid>
+    <Divider sx={{ mt: 5, mb: { xs: 3, md: 0 } }} />
+    <SubFooter />
+  </Container>
+)
 
 export default Footer
diff --git a/components/ResourceHub/Card.tsx b/components/ResourceHub/Card.tsx
@@ -0,0 +1,80 @@
+import { Typography, Chip, Box } from '@mui/material'
+
+import css from './styles.module.css'
+// import { ECOSYSTEM_DATA_URL } from '@/config/constants'
+import { type KnowledgeResource } from './Resources'
+import YouTubeEmbed from '../YouTube'
+// import clsx from 'clsx'
+
+export const ProjectCard = (resource: KnowledgeResource): JSX.Element => {
+  const CardContent = (
+    <div style={{ width: '100%' }}>
+      {resource.type === 'Video' && (
+        <YouTubeEmbed embedId={resource.url.slice(-11)} />
+      )}
+
+      <Typography
+        fontWeight='500'
+        mt={resource.type === 'Video' ? 2 : 0}
+        mb={0.5}
+      >
+        {resource.name}
+      </Typography>
+
+      {resource.type === 'Blog post' && (
+        <Typography
+          variant='body2'
+          color='text.secondary'
+          className={css.description}
+        >
+          {resource.abstract}
+        </Typography>
+      )}
+
+      <div className={css.categories}>
+        <Chip
+          sx={{
+            borderRadius: '4px',
+            height: '23px',
+            fontSize: '14px',
+            cursor: 'pointer'
+          }}
+          className={css.chip}
+          label={resource.type}
+        />
+        {resource.tags.map(tag => (
+          <Chip
+            key={tag}
+            sx={{
+              borderRadius: '4px',
+              height: '23px',
+              fontSize: '14px',
+              cursor: 'pointer'
+            }}
+            className={css.chip}
+            label={tag}
+          />
+        ))}
+      </div>
+    </div>
+  )
+
+  return (
+    <Box
+      sx={{
+        transition: 'all 0.2s ease-in-out',
+        border: '1px solid',
+        borderColor: 'transparent',
+        '&:hover': {
+          borderColor: 'secondary.light'
+        },
+        width: '100%'
+      }}
+      className={css.card}
+    >
+      <a href={resource.url} target='_blank' rel='noreferrer' style={{ width: '100%' }}>
+        {CardContent}
+      </a>
+    </Box>
+  )
+}