diff --git a/src/App.tsx b/src/App.tsx index a0d77a7..4af4099 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -16,6 +16,7 @@ import Main from "./pages/Main"; import Dashboard from "./pages/Dashboard"; import Posts from "./pages/Posts"; import Details from "./pages/Details"; +import Post from "./pages/Post"; const App = () => { const date = new Date("0.0.0000"); @@ -56,6 +57,7 @@ const App = () => { } /> } />} /> } />} /> + } />} /> } />} diff --git a/src/assets/styles/_posts.scss b/src/assets/styles/_posts.scss index b82e268..a212ad9 100644 --- a/src/assets/styles/_posts.scss +++ b/src/assets/styles/_posts.scss @@ -1,13 +1,17 @@ .posts { + select { + padding: 1rem 1.2rem; + border: 1px solid #b8b9bb; + } + &.inner { display: flex; flex-direction: column; gap: 4rem; + padding-bottom: 3rem; } &__table { - padding: 3rem 0; - &__head { min-height: unset !important; background: #dbdbdb; @@ -58,8 +62,88 @@ } tbody { + max-height: 70vh; + overflow-y: auto; display: flex; flex-direction: column; } } } + +.post { + padding-bottom: 4rem; + &.inner { + display: flex; + flex-direction: column; + gap: 4rem; + } + + h1 { + font-size: 2.4rem; + } + + &__head { + svg { + width: 5rem; + height: 5rem; + } + } + + &__content { + display: flex; + flex-direction: column; + gap: 3rem; + + &__btn { + display: flex; + align-items: center; + gap: 1rem; + max-width: 30rem; + border-radius: 0.2rem; + cursor: pointer; + width: 100%; + padding: 0.6rem 1.2rem; + color: #fff; + font-size: 1.6rem; + background-color: #7c69ef; + border: 0.1rem solid #7c69ef; + @include transition-std; + &:hover { + @include transition-std; + background-color: #705ed6; + border: 0.1rem solid #705ed6; + } + } + + input { + font-size: 1.6rem; + padding: 1rem 1.2rem; + border: 1px solid #b8b9bb; + border-radius: 0.2rem; + cursor: default; + background: #ebedef; + } + + textarea { + background: #ebedef; + cursor: default; + padding: 1rem 1.2rem; + resize: none; + outline: none; + font-size: 1.6rem; + + border: 1px solid #b8b9bb; + border-radius: 0.2rem; + } + + &__block { + display: flex; + flex-direction: column; + gap: 0.8rem; + + h4 { + font-size: 1.6rem; + } + } + } +} diff --git a/src/helpers/parseDate.ts b/src/helpers/parseDate.ts index 7bc45e7..7475c40 100644 --- a/src/helpers/parseDate.ts +++ b/src/helpers/parseDate.ts @@ -1,4 +1,4 @@ -export const parseDate = (date: Date) => { +export const parseDate = (date: Date): string[] => { const split = date.toString().split("T"); const yyyy_mm_dd = split[0]; const time = split[1].split("."); diff --git a/src/pages/Post.tsx b/src/pages/Post.tsx new file mode 100644 index 0000000..52741bb --- /dev/null +++ b/src/pages/Post.tsx @@ -0,0 +1,123 @@ +// Modules +import { useContext, useState, useEffect } from "react"; +import { useParams } from "react-router-dom"; +import { PostContext } from "../context/PostContext"; +import { PostType } from "../types/posts"; + +// Icons +import { ImNewspaper } from "react-icons/im"; +import { BiLinkExternal } from "react-icons/bi"; + +// Helpers +import { parseDate } from "../helpers/parseDate"; + +const Post = () => { + const date = new Date("0.0.0000"); + const [postData, setPostData] = useState({ + id: -1, + category: "", + title: "", + link: "", + date: date, + summary: "", + createdAt: date, + updatedAt: date, + }); + const { posts } = useContext(PostContext); + const { id } = useParams(); + + useEffect(() => { + if (posts[0].id !== -1) { + posts.map((post: PostType) => { + if (post.id.toString() === id) { + setPostData(post); + } + }); + } + }, [posts]); + return ( +
+
+
+
+ +

+ {postData.id !== -1 ? postData.title : ""} +

+
+
+
+

ID

+ +
+
+

Category

+ +
+
+

Title

+ +
+
+

Date

+ +
+
+

Summary

+ +
+
+

Created

+ +
+
+

Updated

+ +
+ + + Link + +
+
+
+
+ ); +}; + +export default Post; diff --git a/src/pages/Posts.tsx b/src/pages/Posts.tsx index b258525..281e94f 100644 --- a/src/pages/Posts.tsx +++ b/src/pages/Posts.tsx @@ -1,6 +1,6 @@ // Modules import { v4 as uuidv4 } from "uuid"; -import { useContext, useEffect } from "react"; +import React, { useContext, useEffect, useState } from "react"; import { PostContext } from "../context/PostContext"; // Icons @@ -27,7 +27,7 @@ const headers: string[] = [ const Posts = () => { const { posts, setPosts } = useContext(PostContext); - + const [category, setCategory] = useState("All"); useEffect(() => { getPosts(setPosts); }, []); @@ -40,6 +40,20 @@ const Posts = () => {

Posts

+
+ +
@@ -48,34 +62,67 @@ const Posts = () => { })} {posts[0].id !== -1 - ? posts.map((post: PostType) => { - return ( - - - - - - - - - - - - - ); - }) + ? category === "All" + ? posts.map((post: PostType, index: number) => { + return ( + + + + + + + + + + + + + ); + }) + : posts.map((post: PostType, index: number) => { + if (post.category === category) { + return ( + + + + + + + + + + + + + ); + } else { + return ""; + } + }) : ""}
{post.id}{post.category}{post.title} - - - - {parseDate(post.date)[0]}{post.summary}{parseDate(post.createdAt)[0]}{parseDate(post.updatedAt)[0]}
{index + 1}{post.category}{post.title} + + + + {parseDate(post.date)[0]}{post.summary}{parseDate(post.createdAt)[0]}{parseDate(post.updatedAt)[0]}
{index + 1}{post.category}{post.title} + + + + {parseDate(post.date)[0]}{post.summary}{parseDate(post.createdAt)[0]}{parseDate(post.updatedAt)[0]}