fix: buttons active state

src/components/primitives/button/button.module.scss

@@ -20,7 +20,8 @@
     pointer-events: none;
   }
 
-  &:hover {
+  &:hover,
+  &--active {
     background: var(--color-white);
     color: var(--color-black);
   }
@@ -52,7 +53,8 @@
       transition: transform var(--duration-normal) var(--ease-button);
     }
 
-    &:hover {
+    &:hover,
+    &--active {
       background: transparent;
       color: var(--color-white);
 
@@ -67,7 +69,8 @@
     box-shadow: 0 0 tovw(50px, 'default', 16px) var(--color-accent);
     background: var(--color-accent);
 
-    &:hover {
+    &:hover,
+    &--active {
       box-shadow: 0 0 0 var(--color-accent);
       background: var(--color-accent);
       color: var(--color-white);

src/components/primitives/button/index.tsx

@@ -10,6 +10,7 @@ import s from './button.module.scss'
 export type ButtonProps = JSX.IntrinsicElements['button'] & {
   size?: 'small' | 'medium' | 'large'
   variant?: 'default' | 'primary' | 'unstyled' | 'interactive'
+  active?: boolean
 }
 
 export const Button = React.forwardRef(
@@ -20,6 +21,7 @@ export const Button = React.forwardRef(
       className,
       size = 'medium',
       variant = 'default',
+      active = false,
       ...rest
     },
     ref
@@ -30,7 +32,8 @@ export const Button = React.forwardRef(
           s.button,
           className,
           s[`button--${size}`],
-          s[`button--${variant}`]
+          s[`button--${variant}`],
+          active && s['button--active']
         )}
         {...rest}
         ref={ref}
@@ -48,7 +51,7 @@ type NextLinkProps = Pick<
 
 export type ButtonLinkProps = ButtonProps &
   Omit<JSX.IntrinsicElements['a'], 'href'> &
-  NextLinkProps & { notExternal?: boolean }
+  NextLinkProps & { notExternal?: boolean; active?: boolean }
 
 export const ButtonLink = React.forwardRef<'a', ButtonLinkProps>(
   (
@@ -62,6 +65,7 @@ export const ButtonLink = React.forwardRef<'a', ButtonLinkProps>(
       locale,
       // Rest
       notExternal,
+      active,
       ...props
     },
     ref
@@ -89,6 +93,7 @@ export const ButtonLink = React.forwardRef<'a', ButtonLinkProps>(
           as="a"
           // @ts-ignore
           ref={ref}
+          active={active}
         />
       </Link>
     )

src/components/sections/blog/hero/hero.module.scss

@@ -7,6 +7,7 @@
   justify-content: center;
   max-width: 100%;
   min-height: calc(var(--vh) * 100);
+  padding-top: tovw(255px, 'default', 204px);
   text-align: center;
   background: linear-gradient(
     180deg,
@@ -16,7 +17,6 @@
 
   @media screen and (max-width: 800px) {
     min-height: auto;
-    padding-top: tovw(204px, 'default', 204px);
   }
 
   .container {

src/components/sections/blog/search/search.module.scss

@@ -4,11 +4,11 @@
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
+  padding-top: tovw(200px, 'default', 104px);
 
   @media screen and (max-width: 800px) {
     gap: tovw(32px, 'default', 32px);
     flex-direction: column-reverse;
-    padding-top: tovw(104px, 'default', 104px);
   }
 
   > nav {
@@ -17,8 +17,9 @@
 
     @media screen and (max-width: 800px) {
       overflow-x: scroll;
-      margin-left: -40px;
-      margin-right: -40px;
+      width: 100vw;
+      padding: 0 8px;
+      margin-right: -42px;
     }
 
     a {

src/pages/api/blog-posts.ts

@@ -1,41 +0,0 @@
-import { getBlogPosts } from 'lib/blog'
-import { NextApiRequest, NextApiResponse } from 'next'
-
-type Params = {
-  secret?: string
-  page?: string
-  step?: string
-  filterIds?: string
-  category?: string
-  search?: string
-  locale?: string
-}
-
-export default async (req: NextApiRequest, res: NextApiResponse) => {
-  const {
-    page: pageParam,
-    step: stepParam,
-    filterIds,
-    category,
-    search
-  } = req.query as Params
-
-  const page = pageParam ? Number(pageParam) : undefined
-  const step = stepParam ? Number(stepParam) : undefined
-  const filterIdsArr = filterIds ? filterIds.split(',') : undefined
-
-  try {
-    const blogPosts = await getBlogPosts({
-      page,
-      step,
-      filterIds: filterIdsArr,
-      category,
-      search
-    })
-
-    res.status(200).json(blogPosts)
-  } catch (error) {
-    console.error(error)
-    res.status(500).json({ message: (error as Error).message })
-  }
-}

src/pages/blog/[slug].tsx

@@ -14,6 +14,7 @@ import Error from 'next/error'
 import { Key } from 'react'
 
 import { BlogCard } from '~/components/common/card'
+import { Meta } from '~/components/common/meta'
 import Content from '~/components/sections/blog/post-content'
 import Hero from '~/components/sections/blog/post-hero'
 import PostsGrid from '~/components/sections/blog/posts-grid'
@@ -29,6 +30,7 @@ const BlogPost = ({
 
   return (
     <PageLayout>
+      <Meta />
       <Hero data={post} />
       <Content data={post} />
       <PostsGrid>

src/pages/blog/index.tsx

@@ -10,6 +10,7 @@ import { Fragment, useCallback, useMemo } from 'react'
 import { useInfiniteQuery } from 'react-query'
 
 import { BlogCard } from '~/components/common/card'
+import { Meta } from '~/components/common/meta'
 import { Button, ButtonLink } from '~/components/primitives/button'
 import Hero from '~/components/sections/blog/hero'
 import PostsGrid from '~/components/sections/blog/posts-grid'
@@ -75,6 +76,7 @@ const BlogIndexPage = ({
 
   return (
     <PageLayout>
+      <Meta />
       <Hero featuredPost={heroBlogPost} />
       <SearchContainer>
         <nav>
@@ -83,6 +85,7 @@ const BlogIndexPage = ({
               c: null
             })}
             size="small"
+            active={!activeCategory}
           >
             All
           </ButtonLink>
@@ -94,6 +97,7 @@ const BlogIndexPage = ({
                   c: category.slug as string
                 })}
                 size="small"
+                active={activeCategory?.id === category.id}
               >
                 {category.title}
               </ButtonLink>
@@ -157,7 +161,6 @@ const clientGetBlogPosts = async ({
   }
   data: any[]
 }> => {
-  console.log(category, search)
   const allBlogPosts = await getBlogPosts({
     page,
     step,