- {tokens.map( - (line, i) => - i + 1 < tokens.length && ( -

- {language !== 'bash' && {i + 1}} + + + + {({ className, style, tokens, getLineProps, getTokenProps }) => ( +

+            {tokens.map(
+              (line, i) =>
+                i + 1 < tokens.length && (
+                  
+                    {language !== 'bash' && {i + 1}}
 
-                  {line.map((token, key) => (
-                    
-                  ))}
-                
-              )
-          )}
-

- )} - + {line.map((token, key) => ( + + ))} +

+ ) + )} +

+ + ) } diff --git a/components/PostIndex/styles.js b/components/PostIndex/styles.js index 7e2dff0..71a41f0 100644 --- a/components/PostIndex/styles.js +++ b/components/PostIndex/styles.js @@ -1,7 +1,6 @@ import styled from 'styled-components' export const PostIndexContainer = styled.section` - background-color: ${({ theme }) => theme.backgroundColor}; font-size: min(1.25rem, 4vw); padding: var(--padding); @@ -49,6 +48,7 @@ export const Title = styled.h2` ` export const List = styled.ul` + position: relative; display: flex; flex-direction: column; gap: 1rem; diff --git a/components/PostMeta/index.js b/components/PostMeta/index.js index ec184d3..6236905 100644 --- a/components/PostMeta/index.js +++ b/components/PostMeta/index.js @@ -10,17 +10,17 @@ const PostMeta = ({ title, description, image, slug }) => ( <> )} - + diff --git a/components/Posts/index.js b/components/Posts/index.js index 997c621..3eb2a99 100644 --- a/components/Posts/index.js +++ b/components/Posts/index.js @@ -1,15 +1,26 @@ import { useState, useEffect } from 'react' +import Image from 'next/image' import usePagination from 'hooks/usePagination' import ChangePosts from 'components/ChangePosts' import PostCard from 'components/PostCard' -import { Container, Section, ContainerPosts, Image } from './styles' +import { + Container, + Section, + ContainerPosts, + Title, + AtributtionLink, +} from './styles' import Filter from 'components/Filter' import getTags from 'utils/getTags' +import Search from 'components/Search' +import { ErrorContainer } from 'components/Error' -const Posts = ({ posts, title, isSearch }) => { +const Posts = ({ posts, title }) => { const [filterPosts, setFilterPosts] = useState([]) + const [resultsPosts, setResultsPosts] = useState([]) const [selectedTag, setSelectedTag] = useState('all') const [currentPage, setCurrentPage] = useState(0) + const [search, setSearch] = useState('') const { paginatedPosts, isFirstPage, isLastPage } = usePagination( filterPosts, currentPage @@ -19,51 +30,83 @@ const Posts = ({ posts, title, isSearch }) => { const handleChange = (e) => setSelectedTag(e.target.value) + const handleInputSearch = (e) => setSearch(e.target.value) + + useEffect(() => { + if (search.trim()) { + fetch(`/api/search?search=${search}`) + .then((res) => res.json()) + .then(setResultsPosts) + .catch((error) => console.error(error)) + } else { + setResultsPosts(posts) + } + }, [search]) + useEffect(() => setFilterPosts(posts), [posts]) useEffect(() => { - const filterPosts = posts.filter( + const filterPosts = resultsPosts.filter( ({ tags }) => selectedTag === 'all' || tags.includes(selectedTag) ) setFilterPosts(filterPosts) - }, [selectedTag]) + }, [resultsPosts, selectedTag]) return (

{title}

- {paginatedPosts?.map(({ title, slug, date, readTime, tags }) => ( - - ))} + {paginatedPosts.length + ? paginatedPosts.map(({ title, slug, date, readTime, tags }) => ( + + )) + : search && ( + + No hay resultados + Sin datos

+ + )} - {posts.length > 5 && paginatedPosts.length && ( + {posts.length > 5 && paginatedPosts.length ? ( - )} - {isSearch && ( - -

- - )} + ) : null}

- {filteredTags.length && ( - - )} + ) } diff --git a/components/Posts/styles.js b/components/Posts/styles.js index 0742a63..965c387 100644 --- a/components/Posts/styles.js +++ b/components/Posts/styles.js @@ -2,9 +2,11 @@ import styled from 'styled-components' export const Container = styled.div` display: grid; + margin-bottom: 1rem; @media screen and (min-width: 1024px) { grid-template-columns: 2fr 1fr; + margin-bottom: 0; } ` @@ -20,9 +22,20 @@ export const ContainerPosts = styled.div` ` export const Title = styled.h2` - margin-top: 0; + font-size: min(2.25rem, 5vw); ` -export const Image = styled.img` - padding: 1rem; +export const AtributtionLink = styled.a` + padding-top: 1rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + margin-left: min(2rem, 3vw); + + @media screen and (min-width: 768px) { + transition: transform 0.2s; + + &:hover { + transform: scale(1.1); + } + } ` diff --git a/components/ProgressBar/index.js b/components/ProgressBar/index.js new file mode 100644 index 0000000..c9d6ef9 --- /dev/null +++ b/components/ProgressBar/index.js @@ -0,0 +1,52 @@ +import { useState, useEffect } from 'react' +import { useRouter } from 'next/router' +import Progress from './styles' + +const PropressBar = () => { + const [progress, setProgress] = useState(0) + const router = useRouter() + + useEffect(() => { + const handleStart = () => setProgress(35) + + const handleEnd = () => setProgress(100) + + router.events.on('routeChangeStart', handleStart) + router.events.on('routeChangeComplete', handleEnd) + router.events.on('routeChangeError', handleEnd) + + return () => { + router.events.off('routeChangeStart', handleStart) + router.events.off('routeChangeComplete', handleEnd) + router.events.off('routeChangeError', handleEnd) + } + }, [router]) + + useEffect(() => { + if (progress === 100) { + const interval = setTimeout(() => setProgress(0), 1000) + + return () => clearTimeout(interval) + } else if (progress > 0 && progress < 100) { + const interval = setInterval(() => { + progress > 50 ? setProgress(progress + 0.25) : setProgress(progress + 1) + }, 100) + + return () => clearTimeout(interval) + } + }, [progress]) + + return ( + + ) +} + +export default PropressBar diff --git a/components/ProgressBar/styles.js b/components/ProgressBar/styles.js new file mode 100644 index 0000000..1888778 --- /dev/null +++ b/components/ProgressBar/styles.js @@ -0,0 +1,23 @@ +import styled from 'styled-components' + +const Progress = styled.div` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 0.225rem; + z-index: 1000; + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + background-color: ${({ theme }) => theme.active}; + opacity: ${({ progress }) => (progress ? 1 : 0)}; + width: ${({ progress }) => `${progress}%`}; + height: 100%; + transition: width 0.25s ease-in-out, opacity 0.15s ease-in-out; +` + +export default Progress diff --git a/components/Search/index.js b/components/Search/index.js index e3c6495..0020d06 100644 --- a/components/Search/index.js +++ b/components/Search/index.js @@ -1,92 +1,27 @@ -import { useState, useEffect } from 'react' -import { useRouter } from 'next/router' -import { - Container, - ResultsContainer, - Results, - Image, - Form, - Input, - Button, -} from './styles' +import { Container, Title, Input } from './styles' import SearchIcon from '@icons/SearchIcon' -import Result from 'components/Result' -const Search = ({ isMenu }) => { - const [search, setSearch] = useState('') - const [isFocus, setIsFocus] = useState(false) - const [results, setResults] = useState([]) - - const router = useRouter() - - useEffect(() => setSearch(''), [router.query]) - - const handleSubmit = (e) => { - e.preventDefault() - - if (search.trim()) { - router.push(`/search?search=${search}`) - setSearch('') - } - } - - const handleChange = (e) => setSearch(e.target.value) - - const handleToggleFocus = (e) => setIsFocus(!isFocus) - - useEffect(() => { - if (search.trim()) { - fetch(`https://www.coded.tech/api/search?search=${search}&limit=5`) - .then((res) => res.json()) - .then(setResults) - .catch((error) => console.error(error)) - } - }, [search]) - - return ( - -