-
- Bem vindo ao Apiki Blog,tudo sobre Wordpress está aqui.
-
-
- Os conteúdos aqui publicados, em sua maioria, são resultados das experiências dos nossos profissionais com seus desafios do dia-a-dia em desenvolver grandes projetos de WordPress.
-
+
+
+
+
+ Bem vindo ao Apiki Blog,tudo sobre Wordpress está aqui.
+
+
+ Os conteúdos aqui publicados, em sua maioria, são resultados das experiências dos nossos profissionais com seus desafios do dia-a-dia em desenvolver grandes projetos de WordPress.
+
+
-
-
-
-
-
)
}
\ No newline at end of file
diff --git a/src/components/Header/NavBar.tsx b/src/components/Header/NavBar.tsx
index 6949f87..61f7c7c 100644
--- a/src/components/Header/NavBar.tsx
+++ b/src/components/Header/NavBar.tsx
@@ -1,10 +1,14 @@
+import { Link } from "react-router-dom";
+
export function Navbar() {
return (
-
)
}
\ No newline at end of file
diff --git a/src/components/Header/Header.tsx b/src/components/Header/index.tsx
similarity index 100%
rename from src/components/Header/Header.tsx
rename to src/components/Header/index.tsx
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
deleted file mode 100644
index 44df352..0000000
--- a/src/components/Hero.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-export function Hero() {
- return (
-
-
-
- Bem vindo,O blog para você aprender tudo sobre o mundo do wordpress
-
-
-
- )
-}
\ No newline at end of file
diff --git a/src/components/Main/BreadCrumb/index.tsx b/src/components/Main/BreadCrumb/index.tsx
new file mode 100644
index 0000000..ee7b5e5
--- /dev/null
+++ b/src/components/Main/BreadCrumb/index.tsx
@@ -0,0 +1,33 @@
+import { CaretDoubleRight } from "phosphor-react";
+import { Link } from "react-router-dom";
+
+interface Props {
+ title: string | null,
+ category: string
+}
+
+export function Breadcrumb({title, category}: Props) {
+ return (
+
+
+
+ {category}
+
+
+ {title}
+
+ }
+
+
+
+ {title}
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/Main/HomeContent/CardsSection/Cards/Card.tsx b/src/components/Main/HomeContent/CardsSection/Cards/Card.tsx
new file mode 100644
index 0000000..115d594
--- /dev/null
+++ b/src/components/Main/HomeContent/CardsSection/Cards/Card.tsx
@@ -0,0 +1,48 @@
+import { Timer } from "phosphor-react";
+import { Link } from "react-router-dom";
+import { ApikiLogoBg } from "../../../../../assets/ApikiLogoBg";
+import { CardContent } from "../../../../../interfaces/interfaces";
+
+export function Card({title, _embedded, yoast_head_json, slug}: CardContent) {
+ return (
+
+
+
+
+
+ {title ? title.rendered : 'Título Indisponível'}
+
+
+ {yoast_head_json.description && yoast_head_json.description}
+
+
+
+
+
+
+
+ {_embedded.author[0].name ? _embedded.author[0].name : 'Apiki Blog'}
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/Main/HomeContent/CardsSection/Cards/index.tsx b/src/components/Main/HomeContent/CardsSection/Cards/index.tsx
new file mode 100644
index 0000000..a2ec8b8
--- /dev/null
+++ b/src/components/Main/HomeContent/CardsSection/Cards/index.tsx
@@ -0,0 +1,50 @@
+import { MouseEvent, useState } from "react";
+import { Card } from "./Card";
+import { useFetchFirst, useFetchMaxPages, useFetchPage } from "../../../../../services/api";
+import { Lightning } from "phosphor-react";
+import { api } from "../../../../../services/baseURL"
+
+export function Cards() {
+ const { data: posts, setData: setPosts, error, isFetching } = useFetchFirst()
+ const { maxPages: pages, setPages} = useFetchMaxPages()
+ const [page, setPage] = useState
('2')
+
+ const handleLoadMore = (e: MouseEvent) => {
+ e.preventDefault()
+ api.get(`https://blog.apiki.com/wp-json/wp/v2/posts?_embed&categories=518&page=${page}`)
+ .then((response) => {
+ setPage(+page + 1)
+ setPages(+pages! - 1)
+ const newPosts = response.data
+ setPosts([...posts!, ...newPosts!])
+ })
+ }
+
+ return (
+
+
+ { isFetching &&
Carregando
}
+ { posts?.map(post => {
+ return (
+
+ )
+ })}
+
+
+ {pages !== 1 &&
+
+ CARREGAR MAIS...
+
+ }
+
+
+
+
+
+
+
+ Últimas Publicações
+
+
+
+
+
+
+
+
+
+ Inscreva-se no Blog da Apiki!
+
+
+ Inscreva-se para nunca perder as nossas novas publicações e para sempre acompanhar nossos conteúdos sobre Wordpress.
+
+
+
+
+
+
+
+ Inscrever
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/Main/PostContent/Aside.tsx b/src/components/Main/PostContent/Aside.tsx
new file mode 100644
index 0000000..2a0f193
--- /dev/null
+++ b/src/components/Main/PostContent/Aside.tsx
@@ -0,0 +1,26 @@
+import { Link } from "react-router-dom";
+import { FacebookLogo, LinkedinLogo, TelegramLogo, WhatsappLogo } from "phosphor-react";
+
+export function Aside() {
+ return (
+
+
+
+
+
+
+
+
+
+
+ Voltar
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/Main/PostContent/index.tsx b/src/components/Main/PostContent/index.tsx
new file mode 100644
index 0000000..13d3fc4
--- /dev/null
+++ b/src/components/Main/PostContent/index.tsx
@@ -0,0 +1,52 @@
+import { format } from "date-fns";
+import ptBr from 'date-fns/locale/pt-BR'
+import parser from "html-react-parser"
+import { Breadcrumb } from "../BreadCrumb";
+import { Aside } from "./Aside";
+
+export function PostContent({...data}) {
+ data = data.data;
+ const formatedDate = format(new Date(data.date), "dd' de 'MMMM', 'yyyy", {
+ locale: ptBr,
+ })
+
+ return (
+
+
+
+
+
+
+
+
+
+ Por {data._embedded.author[0].name}
+
+
+ {formatedDate}
+
+
+
+ {data.title.rendered}
+
+
+ {data.yoast_head_json.description}
+
+
+
+
+
+
+
+
+ {parser(data.content.rendered)}
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/MainHomeComponent.tsx b/src/components/MainHomeComponent.tsx
deleted file mode 100644
index dc9c52f..0000000
--- a/src/components/MainHomeComponent.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { CaretRight } from "phosphor-react";
-
-export function MainHomeComponent() {
- return(
-
-
-
- )
-}
\ No newline at end of file
diff --git a/src/hooks/useFetch.ts b/src/hooks/useFetch.ts
new file mode 100644
index 0000000..3b1eecc
--- /dev/null
+++ b/src/hooks/useFetch.ts
@@ -0,0 +1,16 @@
+import { useEffect, useState } from "react"
+import { api } from "../services/baseURL";
+
+export function useFetch(url: string) {
+ const [data, setData] = useState(null)
+
+ useEffect(() => {
+ api.get(url)
+ .then((response) => {
+ setData(response.data);
+ })
+ }, [])
+
+ return { data, setData }
+}
+
diff --git a/src/hooks/useHeaders.ts b/src/hooks/useHeaders.ts
new file mode 100644
index 0000000..f28494a
--- /dev/null
+++ b/src/hooks/useHeaders.ts
@@ -0,0 +1,14 @@
+import { useEffect, useState } from "react"
+
+export function useHeaders(url: string, header: string) {
+ const [headers, setHeaders] = useState(null)
+
+ useEffect(() => {
+ fetch(url)
+ .then(response => {
+ setHeaders(response.headers.get(header))
+ })
+ }, [])
+
+ return { headers, setHeaders }
+}
\ No newline at end of file
diff --git a/src/interfaces/interfaces.ts b/src/interfaces/interfaces.ts
new file mode 100644
index 0000000..e5b5b6d
--- /dev/null
+++ b/src/interfaces/interfaces.ts
@@ -0,0 +1,79 @@
+export interface CardContent {
+ id: number,
+ title: {
+ rendered: string
+ },
+ slug: string,
+ yoast_head_json: {
+ twitter_misc: {
+ 'Est. tempo de leitura': string
+ },
+ description: string
+
+ }
+ _embedded: {
+ author: [{
+ name: string
+ avatar_urls: {
+ 96: string | undefined
+ }
+ }]
+ 'wp:featuredmedia': [{
+ media_details: {
+ sizes: {
+ 'jnews-750x375': {
+ source_url: string
+ }
+ }
+ }
+ }
+ ]
+ }
+}
+
+export interface PostContent {
+ 0: {
+ title: {
+ rendered: string
+ },
+ content: {
+ rendered: string
+ },
+ excerpt: {
+ rendered: string
+ },
+ date: string,
+
+ yoast_head_json: {
+ og_image: [
+ {
+ url: string
+ }
+ ]
+ twitter_misc: {
+ 'Est. tempo de leitura': string
+ }
+ description: string
+
+ },
+
+ _embedded: {
+ author: [{
+ name: string
+ avatar_urls: {
+ 96: string | undefined
+ }
+ }]
+ 'wp:featuredmedia': [{
+ media_details: {
+ sizes: {
+ 'jnews-750x375': {
+ source_url: string
+ }
+ }
+ }
+ }
+ ]
+ },
+ }
+}
\ No newline at end of file
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
deleted file mode 100644
index 664de3e..0000000
--- a/src/pages/Home.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Header } from "../components/Header/Header";
-import { MainHomeComponent } from "../components/MainHomeComponent";
-
-function Home() {
- return (
-
-
-
- );
-}
-
-export default Home;
diff --git a/src/pages/HomePage/index.tsx b/src/pages/HomePage/index.tsx
new file mode 100644
index 0000000..dfdea79
--- /dev/null
+++ b/src/pages/HomePage/index.tsx
@@ -0,0 +1,13 @@
+import { MainHomeComponent } from "../../components/Main/HomeContent";
+
+import './mediaqueries.css';
+
+function Home() {
+ return (
+ <>
+ ()
+ const { data, setData, error, isFetching } = useFetchPost(slug!)
+
+ return (
+ <>
+ {data &&
+ ('posts?_embed&categories=518')
+ return {data, error, isFetching, setData}
+}
+
+export function useFetchMaxPages() {
+ const { headers: maxPages, setHeaders: setPages} = useHeaders('https://blog.apiki.com/wp-json/wp/v2/posts?_embed&categories=518', 'X-WP-TotalPages')
+ return { maxPages, setPages}
+}
+
+export function useFetchPage(page: string) {
+ const {data, error, isFetching, setData} = useFetch(`posts?_embed&categories=518&page=${page}`)
+ return {data, error, isFetching, setData}
+}
+
+export function useFetchPost(slug: string) {
+ let {data, setData, error, isFetching} = useFetch(`posts?_embed&slug=${slug}`)
+ return {data, setData, error, isFetching}
+}
\ No newline at end of file
diff --git a/src/services/baseURL.tsx b/src/services/baseURL.tsx
new file mode 100644
index 0000000..4e3a424
--- /dev/null
+++ b/src/services/baseURL.tsx
@@ -0,0 +1,5 @@
+import axios from "axios";
+
+export const api = axios.create({
+ baseURL: 'https://blog.apiki.com/wp-json/wp/v2/'
+})
\ No newline at end of file
diff --git a/src/utils/api.tsx b/src/utils/api.tsx
deleted file mode 100644
index b19f10d..0000000
--- a/src/utils/api.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export const api = {
-
-}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 4f5ef83..aae383d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -18,7 +18,7 @@ module.exports = {
blue: {
500: '#009CDE'
},
- // 900 - Background | 800 - Bg Cards | 500 - Dividers/Selected Itens | 300 - Secondary Text
+ // 900 - Background | 800 - Bg Cards | 500 - Dividers/Selected Itens | 200 - Secondary Text
gray: {
900: '#141414',
800: '#121214',
+
+