Merge pull request #8 from summerscar/master

✨feat(视频页): 增加tag筛选功能

Author: snownstone

src/pages/projects/index.js

@@ -83,7 +83,7 @@ export const VideoRow = function ({title, videos, ...props}) {
       }
     }); // lazy loads elements with default selector as '.lozad'
     observer.observe();
-  })
+  }, [videos])
 
   return (
     <div className="margin-top--log margin-bottom--log">
@@ -94,7 +94,7 @@ export const VideoRow = function ({title, videos, ...props}) {
       <div className="row">
         {
           videos.map((video, index) => (
-            <div className={clsx('col col--6')} key={index}>
+            <div className={clsx('col col--6')} key={video.title}>
               <div>
                 <video
                   type="video/mp4"
@@ -142,12 +142,17 @@ export const VideoRow = function ({title, videos, ...props}) {
   )
 }
 
+const tags = ['全部', '魔法', 'DynamicTable', '机器人', '物联网', '开源硬件']
+
 function Projects() {
   const context = useDocusaurusContext();
+  const [currentTag, setCurrentTag] = useState('全部')
   const {siteConfig = {}} = context;
+
   useLayoutEffect(() => {
     window.$(".stack").lettering();
   }, [])
+
   return (
     <Layout title="Projects">
       {/*
@@ -159,17 +164,21 @@ function Projects() {
         </div>
         <div className={clsx(styles.navContainer)}>
           <div className={clsx(styles.filter)}>
-            <button className={clsx(styles.tag1)}>全部</button>
-            <button className={clsx(styles.tags)}>魔法</button>
-            <button className={clsx(styles.tags)}>DynamicTable</button>
-            <button className={clsx(styles.tags)}>机器人</button>
-            <button className={clsx(styles.tags)}>物联网</button>
-            <button className={clsx(styles.tags)}>开源硬件</button>
+            {
+              tags.map(tag => (
+                <button
+                  className={clsx(styles.tag, currentTag === tag && styles.tagActive)}
+                  onClick={() => setCurrentTag(tag)}
+                >
+                  { tag }
+                </button>)
+              )
+            }
           </div>
         </div>
         <main className={clsx(styles.newContainer)}>
-          <VideoRow title="" videos={videos['横版视频']}/>
-          <VideoRow title="" videos={videos['竖版视频']}/>
+          <VideoRow title="" videos={videos['横版视频'].filter(video => currentTag === '全部' || video.tags.includes(currentTag))}/>
+          <VideoRow title="" videos={videos['竖版视频'].filter(video => currentTag === '全部' || video.tags.includes(currentTag))}/>
         </main>
       </div>
     </Layout>

src/pages/projects/styles.module.css

@@ -24,10 +24,10 @@
   padding-top: 1rem;
 }
  */
- 
+
  /*
 .triangle_top {
- 
+
   border-style: solid;
   border-width: 60px 50vw 0;
   color: #ffb81e;
@@ -38,7 +38,7 @@
 
 
 .mainPage {
-  background-color: black!important; 
+  background-color: black!important;
   /*
   background-image: radial-gradient(circl,#0a0a0a,black);
    */
@@ -145,17 +145,20 @@
   justify-content: center;
 }
 
-.tags {
+.tag {
   color: white;
   padding: 0.5rem 1rem;
   border: solid white 1.5px;
   border-radius: 2.5rem;
   margin:0 1rem;
   background-color:black;
   font-size:1.5rem;
+  outline: none;
+  cursor: pointer;
 }
 
-.tag1 {
+.tagActive {
+  outline: none;
   color: white;
   padding: 0.5rem 1rem;
   border: solid white 1.5px;