quick filter bar

safe-global · Jan 19, 2024 · 13d4b01 · 13d4b01
1 parent 50908f2
commit 13d4b01
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 23 deletions.
diff --git a/src/components/Blog/FeaturedPost/styles.module.css b/src/components/Blog/FeaturedPost/styles.module.css
@@ -4,7 +4,7 @@
   object-position: center left;
   border: 1px solid var(--mui-palette-border-main);
   border-radius: 6px;
-  transition-duration: 0.3s;
+  transition-duration: var(--transition-duration);
 }
 
 .image:hover {

diff --git a/src/components/Blog/SearchFilterResults/index.tsx b/src/components/Blog/SearchFilterResults/index.tsx
@@ -1,13 +1,13 @@
-import type { BlogCategory } from '@/components/Blog'
 import type { BlogPostEntry } from '@/components/Blog/Post'
 import SearchBar from '@/components/Blog/SearchBar'
 import usePostsSearch from '@/components/Blog/usePostsSearch'
-import { Grid, Typography } from '@mui/material'
+import { ButtonBase, Grid, Typography } from '@mui/material'
 import { type NextRouter, useRouter } from 'next/router'
 import type { Dispatch, SetStateAction } from 'react'
 import { Fragment, useMemo, useState } from 'react'
 import css from '../styles.module.css'
 import Card from '@/components/Blog/Card'
+import SearchIcon from '@/public/images/search.svg'
 
 const PAGE_LENGTH = 6
 const PAGE_QUERY_PARAM = 'page'
@@ -40,7 +40,7 @@ export const _getFilteredPosts = ({ posts, selectedCategories }: { posts: any[];
   })
 }
 
-const SearchFilterResults = ({ allPosts, categories }: { allPosts: BlogPostEntry[]; categories: BlogCategory }) => {
+const SearchFilterResults = ({ allPosts, categories }: { allPosts: BlogPostEntry[]; categories: string[] }) => {
   const [selectedCategories, setSelectedCategories] = useState(EMPTY_FILTER)
   const [query, setQuery] = useState('')
   const getPage = (query: NextRouter['query']): number => {
@@ -108,20 +108,32 @@ const SearchFilterResults = ({ allPosts, categories }: { allPosts: BlogPostEntry
         </Grid>
       </Grid>
 
-      <Grid
-        container
-        spacing={{
-          xs: 2,
-          md: '30px',
-        }}
-      >
-        {visibleResults.map((post: any, index: number) => (
-          // TODO: remove the index when enough posts are available
-          <Grid key={`${post.fields.slug}-$${index}`} item xs={12} md={4}>
-            <Card {...post} />
+      {/* Quick filter cards */}
+      <Grid container mb={4} className={css.filterWrapper}>
+        {categories.map((category) => (
+          <Grid item key={category} className={css.filterCard} xs={12} md="auto">
+            <ButtonBase className={css.filterButton} onClick={() => toggleSpecificCategory(category)}>
+              <Typography>{category}</Typography>
+            </ButtonBase>
           </Grid>
         ))}
-        {/* {shouldShowMoreButton && (
+      </Grid>
+
+      {visibleResults.length > 0 ? (
+        <Grid
+          container
+          spacing={{
+            xs: 2,
+            md: '30px',
+          }}
+        >
+          {visibleResults.map((post: any, index: number) => (
+            // TODO: remove the index when enough posts are available
+            <Grid key={`${post.fields.slug}-$${index}`} item xs={12} md={4}>
+              <Card {...post} />
+            </Grid>
+          ))}
+          {/* {shouldShowMoreButton && (
           <Grid item xs={12} mt={{ xs: 2, md: 0 }} display="flex" justifyContent="center">
             <Link
               href={{ query: { [PAGE_QUERY_PARAM]: page + 1 } }}
@@ -135,7 +147,16 @@ const SearchFilterResults = ({ allPosts, categories }: { allPosts: BlogPostEntry
             </Link>
           </Grid>
         )} */}
-      </Grid>
+        </Grid>
+      ) : (
+        <div style={{ textAlign: 'center' }}>
+          <SearchIcon />
+          <Typography variant="h4" my={2}>
+            No results found for {query || 'selected filters'}
+          </Typography>
+          <Typography color="primary.light">Try searching something else</Typography>
+        </div>
+      )}
     </>
   )
 }

diff --git a/src/components/Blog/index.tsx b/src/components/Blog/index.tsx
@@ -5,8 +5,7 @@ import FeaturedPost from '@/components/Blog/FeaturedPost'
 import { type BlogPostEntry } from '@/components/Blog/Post'
 import SearchFilterResults from '@/components/Blog/SearchFilterResults'
 
-const categories = ['Announcements', 'Ecosystem', 'Community', 'Insights', 'Build'] as const
-export type BlogCategory = typeof categories
+const categories = ['Announcements', 'Ecosystem', 'Community', 'Insights', 'Build']
 
 type BlogHomeProps = {
   featured: BlogPostEntry

diff --git a/src/components/Blog/styles.module.css b/src/components/Blog/styles.module.css
@@ -74,8 +74,7 @@
   border-radius: 8px;
   border: 1px solid var(--mui-palette-border-main);
   overflow: hidden;
-  /* TODO: make transition-duration a global value for coherency*/
-  transition-duration: 0.3s;
+  transition-duration: var(--transition-duration);
 }
 
 .postCard:hover {
@@ -99,7 +98,7 @@
   object-fit: cover;
   object-position: center left;
   border-bottom: 1px solid var(--mui-palette-border-main);
-  transition-duration: 0.3s;
+  transition-duration: var(--transition-duration);
 }
 
 .cardBody {
@@ -126,3 +125,37 @@
   margin: 0;
   cursor: pointer;
 }
+
+.filterWrapper {
+  border-radius: 24px;
+  border: 1px solid var(--mui-palette-border-light);
+  overflow: hidden;
+}
+
+.filterCard {
+  border-bottom: 1px solid var(--mui-palette-border-light);
+  margin-bottom: -1px;
+}
+
+.filterButton {
+  padding: 24px 64px;
+  width: 100%;
+  transition-duration: var(--transition-duration);
+}
+
+.filterButton:hover {
+  background-color: var(--mui-palette-background-paper);
+  color: var(--mui-palette-primary-main);
+}
+
+@media (min-width: 900px) {
+  .filterCard {
+    flex-grow: 1;
+    border-bottom: 1px solid var(--mui-palette-border-light);
+    margin-right: -1px;
+  }
+
+  .filterCard {
+    border-right: 1px solid var(--mui-palette-border-light);
+  }
+}
diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -1,5 +1,6 @@
 :root {
   --header-height: 72px;
+  --transition-duration: 0.3s;
 }
 
 @font-face {
@@ -75,7 +76,7 @@ u {
 
 u:before,
 u:after {
-  content: "{";
+  content: '{';
   display: inline-block;
   mask-repeat: no-repeat;
   mask-position: bottom;