diff --git a/src/components/primitives/button/button.module.scss b/src/components/primitives/button/button.module.scss index ce31a15..e0a59ca 100644 --- a/src/components/primitives/button/button.module.scss +++ b/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); diff --git a/src/components/primitives/button/index.tsx b/src/components/primitives/button/index.tsx index 89c44e5..17b04b9 100644 --- a/src/components/primitives/button/index.tsx +++ b/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 & - 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} /> ) diff --git a/src/components/sections/blog/hero/hero.module.scss b/src/components/sections/blog/hero/hero.module.scss index 4096f9c..c561de4 100644 --- a/src/components/sections/blog/hero/hero.module.scss +++ b/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 { diff --git a/src/components/sections/blog/search/search.module.scss b/src/components/sections/blog/search/search.module.scss index 542b160..1f4a71e 100644 --- a/src/components/sections/blog/search/search.module.scss +++ b/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 { diff --git a/src/pages/api/blog-posts.ts b/src/pages/api/blog-posts.ts deleted file mode 100644 index efd0b7e..0000000 --- a/src/pages/api/blog-posts.ts +++ /dev/null @@ -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 }) - } -} diff --git a/src/pages/blog/[slug].tsx b/src/pages/blog/[slug].tsx index d78249a..24a3c35 100644 --- a/src/pages/blog/[slug].tsx +++ b/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 ( + diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx index 0dee6e9..cd278cd 100644 --- a/src/pages/blog/index.tsx +++ b/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 ( +