Add tutorial categories and filtering (#404)

* Add tutorial filters * update size and styling * Update styling * Remove console.log
base-org · Apr 4, 2024 · 0de0138 · 0de0138
1 parent e64d40f
commit 0de0138
Show file tree

Hide file tree

Showing 31 changed files with 269 additions and 6 deletions.
diff --git a/apps/base-docs/src/pages/tutorials/index.jsx b/apps/base-docs/src/pages/tutorials/index.jsx
@@ -1,4 +1,5 @@
 // eslint-disable-next-line import/no-unresolved
+import { useCallback, useState } from 'react';
 import Layout from '@theme/Layout';
 import { Link } from 'react-router-dom';
 import { ThemeClassNames } from '@docusaurus/theme-common';
@@ -9,6 +10,36 @@ import styles from './styles.module.css';
 import tutorialData from '../../../tutorials/data.json';
 import authors from '@app/base-docs/static/json/authors.json';
 
+const TagList = [
+  'all',
+  'smart contracts',
+  'nodes',
+  'nft',
+  'account abstraction',
+  'cross-chain',
+  'oracles',
+  'vrf',
+  'frames',
+];
+
+function TagChip({ tag, isSelected, setSelectedTag }) {
+  const select = useCallback(() => {
+    setSelectedTag(tag);
+  }, [tag, setSelectedTag]);
+
+  return (
+    <button
+      className={clsx(styles.tagButton, isSelected ? styles.tagButtonActive : '')}
+      type="button"
+      onClick={select}
+    >
+      <div className={clsx(styles.tag)}>
+        <span>{tag}</span>
+      </div>
+    </button>
+  );
+}
+
 const handleClick = (event) => {
   event.stopPropagation();
 };
@@ -19,9 +50,7 @@ function TutorialListCell({ tutorial }) {
     <Link to={`/tutorials${tutorial.slug}`}>
       <div className={clsx(styles.tutorialListCell, 'container')}>
         <header>
-          <Heading as="h2" className={clsx(styles.tutorialListTitle)}>
-            {tutorial.title}
-          </Heading>
+          <h2 className={clsx(styles.tutorialListTitle)}>{tutorial.title}</h2>
         </header>
         <div className={clsx(styles.tutorialListCellInfo)}>
           {authorData && authorData.link && (
@@ -39,6 +68,10 @@ function TutorialListCell({ tutorial }) {
             <p>{tutorial.description}</p>
           </div>
         )}
+        <div className={clsx(styles.tutorialListCellInfo)}>
+          {tutorial.tags &&
+            tutorial.tags.map((tag) => <p className={clsx(styles.tutorialListTag)}>{tag}</p>)}
+        </div>
       </div>
     </Link>
   );
@@ -47,6 +80,12 @@ function TutorialListCell({ tutorial }) {
 const TITLE = 'Base Builder Tutorials';
 
 export default function Tutorials() {
+  const [selectedTag, setSelectedTag] = useState('all');
+
+  const selectTag = (tag) => {
+    setSelectedTag(tag);
+  };
+
   return (
     <Layout title="Base Tutorials" description="Base tutorials">
       <main className={clsx(styles.tutorialsMainContainer)}>
@@ -59,11 +98,23 @@ export default function Tutorials() {
                 {TITLE}
               </Heading>
             </header>
+            <div className={clsx(styles.tagList)}>
+              {TagList.map((tag) => (
+                <TagChip
+                  tag={tag}
+                  isSelected={selectedTag === tag}
+                  setSelectedTag={selectTag}
+                  key={tag}
+                />
+              ))}
+            </div>
             <div className={clsx(styles.tutorialList)}>
               {tutorialData &&
-                Object.values(tutorialData).map((tutorial) => (
-                  <TutorialListCell tutorial={tutorial} />
-                ))}
+                Object.values(tutorialData)
+                  .filter((tutorial) =>
+                    selectedTag == 'all' ? tutorial : tutorial.tags.includes(selectedTag),
+                  )
+                  .map((tutorial) => <TutorialListCell tutorial={tutorial} />)}
             </div>
           </div>
         </div>

diff --git a/apps/base-docs/src/pages/tutorials/styles.module.css b/apps/base-docs/src/pages/tutorials/styles.module.css
@@ -1,3 +1,43 @@
+.tag {
+  padding: 0.75rem 1.75rem;
+  font-family: CoinbaseSans !important;
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  font-weight: 450;
+}
+
+.tagButton {
+  border-radius: 100px;
+  background-color: transparent;
+  border: 1px solid var(--base-docs-color-line-heavy);
+  background-color: var(--base-docs-color-bg);
+  cursor: pointer;
+}
+
+.tagButtonActive {
+  background-color: var(--base-docs-color-secondary);
+}
+
+.tagList {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-bottom: 25px;
+}
+
+.tutorialListTag {
+  padding: 0.7rem 1.7rem;
+  font-family: CoinbaseSans !important;
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  font-weight: 425;
+  border-radius: 100px;
+  background-color: transparent;
+  color: var(--base-docs-color-fg-muted);
+  border: 0.75px solid var(--base-docs-color-line-heavy);
+}
+
 .tutorialsMainContainer a,
 .tutorialsMainContainer a:hover {
   text-decoration: none;