GoogleChromeLabs · Kartik1397 · Dec 4, 2020 · Dec 4, 2020 · Jan 23, 2021 · Mar 10, 2021
diff --git a/public/components/Card/index.js b/public/components/Card/index.js
@@ -17,7 +17,7 @@ import CardMeta from '../CardMeta/index.js'
 export default function Card(props) {
   return (
     <div class={style.container} type={props.type} >
-      <CardMeta authorImg={props.authorImg} authorName={props.authorName} authorLink={props.authorLink} packageName={props.name} type={props.type} tags={props.tags} date={props.date} note={props.note}/>
+      <CardMeta authorImg={props.authorImg} authorName={props.authorName} authorLink={props.authorLink} packageName={props.name} type={props.type} tags={props.tags} date={props.date} note={props.note} selectedTag={props.selectedTag} setFilter={props.setFilter}/>
       <div class={style.card}>
         {props.children}
       </div>

diff --git a/public/components/CardMeta/index.js b/public/components/CardMeta/index.js
@@ -12,25 +12,10 @@
  */
 
 import {Component} from 'preact'
+import Tag from '../Tag'
 import style from './style.module.css'
 
-const buildTag = (tag) => {
-  if (tag === 'paint') {
-    return (<li class={style.paint}><a href="#">Paint</a></li>)
-  } else if (tag === 'properties and values') {
-    return (<li class={style.props}><a href="#">Properties & Values</a></li>)
-  } else if (tag === 'typed object model') {
-    return (<li class={style.typed}><a href="#">Typed Object Model</a></li>)
-  } else if (tag === 'layout') {
-    return (<li class={style.layout}><a href="#">Layout</a></li>)
-  } else if (tag === 'animation') {
-    return (<li class={style.animation}><a href="#">Animation</a></li>)
-  }
-  else return
-}
-
 export default class CardLinks extends Component {
-
   render(props) {
     return (
     <div class={style.meta} metaType={props.type}>
@@ -42,7 +27,7 @@ export default class CardLinks extends Component {
       <div class={style.tags}>
         <ul>
           {props.tags.map((tag) =>
-            buildTag(tag)
+            <Tag label={tag} setFilter={props.setFilter} selected={tag === props.selectedTag}/>
           )}
         </ul>
       </div>

diff --git a/public/components/CardMeta/style.module.css b/public/components/CardMeta/style.module.css
@@ -10,7 +10,7 @@
 }
 
 .date::before {
-  content: '∙';
+  content: "∙";
   margin-right: 0.5rem;
 }
 
@@ -52,49 +52,6 @@
   margin: 0;
 }
 
-.tags li {
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 48px;
-  padding: 0.5rem;
-  line-height: 1;
-  display: grid;
-}
-
-.tags a {
-  color: #222;
-  font-size: 12px;
-  text-decoration: none;
-  text-transform: uppercase;
-  font-weight: 800;
-  letter-spacing: 0.05em;
-}
-
-.paint {
-  border-color: #eb95a4;
-  background: #fff1ff;
-}
-
-.props {
-  border-color: #DA9A0B;
-  background: #ffefc8;
-}
-
-.layout {
-  border-color: #7eb8e4;
-  background: #e0edfe;
-}
-
-.animation {
-  border-color: #7bbf95;
-  background: #ccebd1;
-}
-
-.typed {
-  border-color: #c193e3;
-  background: #f1eaff;
-}
-
 .meta {
   padding: 2rem 0;
 }
@@ -161,4 +118,4 @@
   .meta p {
     color: #cacbce;
   }
-}
+}
diff --git a/public/components/Demo/index.js b/public/components/Demo/index.js
@@ -21,12 +21,12 @@ import Compat from '../Compat/index.js'
 
 const normalizeValue = s => s.trim().replace(/;+$/g, '')
 
-const cssToJsProperty = s => s[0]==='-' ? s : s.replace(/-[a-z]/, s => s[1].toUpperCase())
+const cssToJsProperty = s => s[0] === '-' ? s : s.replace(/-[a-z]/, s => s[1].toUpperCase())
 
-const jsToCssProperty = s => s[0]==='-' ? s : s.replace(/([A-Z])/g, '-$1').toLowerCase()
+const jsToCssProperty = s => s[0] === '-' ? s : s.replace(/([A-Z])/g, '-$1').toLowerCase();
 
 function formatUsage(usage) {
-  if(typeof usage === "string") {
+  if (typeof usage === "string") {
     return <li>{usage}</li>
   }
   return <>
@@ -36,10 +36,8 @@ function formatUsage(usage) {
 
 function usageToStyleObject(usage) {
   // If `usage` is an object, we are already done
-  if(typeof usage === "object") {
-    let out = {}
-    for (let i in usage) out[cssToJsProperty(i)] = usage[i]
-    return out
+  if (typeof usage === "object") {
+    return usage
   }
   // If it’s a string, we need to do a bit of processing
   const [prop, ...rest] = usage.split(":")
@@ -58,14 +56,14 @@ function injectWorkletScript(url, type = 'worklet') {
   if (p) return p
   switch (type) {
     case 'script':
-        p = new Promise((resolve, reject) => {
-          const script = document.createElement("script")
-          script.async = true;
-          script.src = url
-          script.onload = resolve
-          script.onerror = reject
-          document.head.appendChild(script)
-        })
+      p = new Promise((resolve, reject) => {
+        const script = document.createElement("script")
+        script.async = true;
+        script.src = url
+        script.onload = resolve
+        script.onerror = reject
+        document.head.appendChild(script)
+      })
       break;
 
     case 'worklet':
@@ -169,7 +167,7 @@ export default class Demo extends Component {
       for (let p in propValues) {
         props.style += ` ${jsToCssProperty(p)}: ${propValues[p]};`
       }
-      props.style = `${props.style ? props.style.replace(/; *$/,'')+'; ' : ''}${styleObjectToString(usageStyles)}`
+      props.style = `${props.style ? props.style.replace(/; *$/, '') + '; ' : ''}${styleObjectToString(usageStyles)}`
       preview = (
         <div class={CardStyle.demoArea}>
           {customPreview}
@@ -192,44 +190,44 @@ export default class Demo extends Component {
         type='demo'
         note={note}
       >
-          <div ref={this.demoRoot} class={`${CardStyle.demoContainer}${isLoaded ? '' : ` ${CardStyle.loading}`}`}>
-            {preview}
-            <ol class={CardStyle.customProps}>
-              <li>.demo &#123;</li>
-              {Object.keys(customProps).map(propName => {
-                const definition = customProps[propName]
-                const currentValue = propValues[propName]
-                const id = packageName + propName; // avoids collisions between worklets
-                const setValue = value => {
-                  if (value instanceof Event) value = value.target[/check|rad/.test(value.target.type)?'checked':'value']
-                  this.setPropValue(propName, value)
-                }
+        <div ref={this.demoRoot} class={CardStyle.demoContainer}>
+          {preview}
+          <ol class={CardStyle.customProps}>
+            <li>.demo &#123;</li>
+            {Object.keys(customProps).map(propName => {
+              const definition = customProps[propName]
+              const currentValue = propValues[propName]
+              const id = packageName + propName; // avoids collisions between worklets
+              const setValue = value => {
+                if (value instanceof Event) value = value.target[/check|rad/.test(value.target.type) ? 'checked' : 'value']
+                this.setPropValue(propName, value)
+              }
 
-                let EditorComponent = PROPERTY_TYPES[definition.type] || PROPERTY_TYPES.default
-                if (definition.options) EditorComponent = PROPERTY_TYPES.options;
+              let EditorComponent = PROPERTY_TYPES[definition.type] || PROPERTY_TYPES.default
+              if (definition.options) EditorComponent = PROPERTY_TYPES.options;
 
-                return (
-                  <EditorComponent
-                    id={id}
-                    propName={propName}
-                    value={currentValue}
-                    setValue={setValue}
-                    definition={definition}
-                  />
-                )
-              })}
-              {formatUsage(usage)}
-              <li>&#125;</li>
-            </ol>
-          </div>
-          <footer class={CardStyle.footer}>
-            <Compat {...this.props.worklet.compat} />
-            <DemoLinks name={packageName} demoUrl={demoUrl} npmUrl={npmUrl} cdnUrl={cdnUrl}/>
-          </footer>
-          {note && <span class={CardStyle.note} dangerouslySetInnerHTML={{ __html: note }}></span>}
+              return (
+                <EditorComponent
+                  id={id}
+                  propName={propName}
+                  value={currentValue}
+                  setValue={setValue}
+                  definition={definition}
+                />
+              )
+            })}
+            {formatUsage(usage)}
+            <li>&#125;</li>
+          </ol>
+        </div>
+        <footer class={CardStyle.footer}>
+          <Compat {...this.props.worklet.compat} />
+          <DemoLinks name={packageName} demoUrl={demoUrl} npmUrl={npmUrl} cdnUrl={cdnUrl} />
+        </footer>
+        {note && <span class={CardStyle.note} dangerouslySetInnerHTML={{ __html: note }}></span>}
       </Card>
-      )
-    }
+    )
+  }
 }
 
 // components for each CSS property type
@@ -273,14 +271,14 @@ PROPERTY_TYPES.options = ({ id, propName, value, setValue, definition }) => (
     <label htmlFor={id}>{propName}:</label>
     <div class={CardStyle.input}>
       <select
-          id={id}
-          class={CardStyle.inputVal}
-          value={value}
-          onInput={setValue}
-        >
-          {definition.options.map(option => (
-            <option value={option}>{option}</option>
-          ))}
+        id={id}
+        class={CardStyle.inputVal}
+        value={value}
+        onInput={setValue}
+      >
+        {definition.options.map(option => (
+          <option value={option}>{option}</option>
+        ))}
       </select>
     </div>
   </li>

diff --git a/public/components/Filter/index.js b/public/components/Filter/index.js
@@ -0,0 +1,20 @@
+import {Component} from 'preact'
+import Tag from '../Tag/index.js'
+import style from './style.module.css'
+
+export default class Filter extends Component {
+  render(props) {
+    return (
+      <div class={style.tags}>
+        <ul>
+          {
+            props.selectedTag !== null && <li class={style.reset} onClick={() => {props.setFilter(null)}}>X</li>
+          }
+          {props.tags.map(tag => 
+            <Tag label={tag} setFilter={props.setFilter} selected={tag === props.selectedTag}/>
+          )}
+        </ul>
+      </div>
+    )
+  }
+}
diff --git a/public/components/Filter/style.module.css b/public/components/Filter/style.module.css
@@ -0,0 +1,33 @@
+.tags {
+  align-items: end;
+  display: grid;
+  width: calc(100% - 4rem);
+  max-width: var(--cardMax);
+  margin: 0 auto 4rem;
+}
+
+.tags ul {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+}
+
+.reset {
+  margin-left: 0;
+  margin-right: auto;
+  border-radius: 48px;
+  border: 1px solid rgb(247, 37, 37);
+  background-color: rgba(247, 37, 37, 0.1);
+  width: 30px;
+  height: 30px;
+  text-align: center;
+  padding: 0.5rem;
+  color: #222;
+  font-size: 14px;
+  font-weight: 800;
+  line-height: 1;
+  cursor: pointer;
+}
diff --git a/public/components/Resource/index.js b/public/components/Resource/index.js
@@ -34,6 +34,8 @@ export default class Resource extends Component {
         url={url}
         desc={desc}
         tags={tags}
+        selectedTag={this.props.selectedTag}
+        setFilter={this.props.setFilter}
       >
         <div class={CardStyle.resourceContainer}>
           {desc && (

diff --git a/public/components/Tag/index.js b/public/components/Tag/index.js
@@ -0,0 +1,43 @@
+import {Component} from "preact";
+import style from "./style.module.css";
+
+const APIS = [
+  { label: "paint", style: "paint", text: "Paint" },
+  {
+    label: "properties and values",
+    style: "props",
+    text: "Properties & Values",
+  },
+  { label: "typed object model", style: "typed", text: "Typed Object Model" },
+  { label: "layout", style: "layout", text: "Layout" },
+  { label: "animation", style: "animation", text: "Animation" },
+];
+
+export default class Tag extends Component {
+  render(props) {
+    const TAG = APIS.map((api) =>
+      api.label === props.label ? api : null
+    ).filter((api) => api != undefined)[0];
+
+    return (
+      <li
+        class={`${style.tag} ${
+          props.selected === false
+            ? style[TAG.style]
+            : style[`${TAG.style}-active`]
+        }`}
+      >
+        <a
+          href="javascript:void(0)"
+          onClick={(e) => {
+            e.preventDefault();
+            props.setFilter(TAG.label);
+          }}
+          title={TAG.text}
+        >
+          {TAG.text}
+        </a>
+      </li>
+    );
+  }
+}