diff --git a/package-lock.json b/package-lock.json index 10a4f60..4f4d76d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,12 +9,14 @@ "version": "0.0.0", "dependencies": { "react": "^18.3.1", - "react-dom": "^18.3.1" + "react-dom": "^18.3.1", + "uuid": "^10.0.0" }, "devDependencies": { "@types/node": "^20.14.10", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", + "@types/uuid": "^10.0.0", "@typescript-eslint/eslint-plugin": "^7.13.1", "@typescript-eslint/parser": "^7.13.1", "@vitejs/plugin-react": "^4.3.1", @@ -27,6 +29,7 @@ "prettier-plugin-tailwindcss": "^0.6.5", "tailwindcss": "^3.4.4", "typescript": "^5.2.2", + "uuidv4": "^6.2.13", "vite": "^5.3.1" } }, @@ -1449,6 +1452,13 @@ "@types/react": "*" } }, + "node_modules/@types/uuid": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-10.0.0.tgz", + "integrity": "sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==", + "dev": true, + "license": "MIT" + }, "node_modules/@typescript-eslint/eslint-plugin": { "version": "7.16.1", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.16.1.tgz", @@ -4410,6 +4420,47 @@ "dev": true, "license": "MIT" }, + "node_modules/uuid": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz", + "integrity": "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==", + "funding": [ + "https://github.com/sponsors/broofa", + "https://github.com/sponsors/ctavan" + ], + "license": "MIT", + "bin": { + "uuid": "dist/bin/uuid" + } + }, + "node_modules/uuidv4": { + "version": "6.2.13", + "resolved": "https://registry.npmjs.org/uuidv4/-/uuidv4-6.2.13.tgz", + "integrity": "sha512-AXyzMjazYB3ovL3q051VLH06Ixj//Knx7QnUSi1T//Ie3io6CpsPu9nVMOx5MoLWh6xV0B9J0hIaxungxXUbPQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/uuid": "8.3.4", + "uuid": "8.3.2" + } + }, + "node_modules/uuidv4/node_modules/@types/uuid": { + "version": "8.3.4", + "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz", + "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==", + "dev": true, + "license": "MIT" + }, + "node_modules/uuidv4/node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "dev": true, + "license": "MIT", + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/vite": { "version": "5.3.4", "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.4.tgz", diff --git a/package.json b/package.json index 3321564..cd485f2 100644 --- a/package.json +++ b/package.json @@ -11,12 +11,14 @@ }, "dependencies": { "react": "^18.3.1", - "react-dom": "^18.3.1" + "react-dom": "^18.3.1", + "uuid": "^10.0.0" }, "devDependencies": { "@types/node": "^20.14.10", "@types/react": "^18.3.3", "@types/react-dom": "^18.3.0", + "@types/uuid": "^10.0.0", "@typescript-eslint/eslint-plugin": "^7.13.1", "@typescript-eslint/parser": "^7.13.1", "@vitejs/plugin-react": "^4.3.1", @@ -29,6 +31,7 @@ "prettier-plugin-tailwindcss": "^0.6.5", "tailwindcss": "^3.4.4", "typescript": "^5.2.2", + "uuidv4": "^6.2.13", "vite": "^5.3.1" } } diff --git a/src/App.tsx b/src/App.tsx index eec827e..746a01a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,15 +2,18 @@ import { Footer } from "./components/Footer"; import { Header } from "./components/Header"; import { Mainpage } from "./components/Mainpage"; import { Sidebar } from "./components/Sidebar"; +import { useState } from "react"; export default function App() { + const [selectedPost, setSelectedPost] = useState(0); + return (
-
+
- - + +
diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 2d60575..9a8c7f8 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,40 +1,33 @@ -export function Header() { +// import { useState } from "react"; + +type HeaderProps = { + setHeaderNavigation: React.Dispatch>; +}; + +export function Header({ setHeaderNavigation }: HeaderProps) { + function resetPageNumber() { + setHeaderNavigation(0); + } return (
-

- React Blog -

+ + React Blog +
diff --git a/src/components/Mainpage.tsx b/src/components/Mainpage.tsx index 5d5070f..71e8bb4 100644 --- a/src/components/Mainpage.tsx +++ b/src/components/Mainpage.tsx @@ -1,14 +1,26 @@ -// import { PostPreview } from "./PostPreview"; -import { data } from "../content/content"; +import { PostPreview } from "./PostPreview"; +import { data, PostData } from "../content/content"; import { Post } from "./Post"; +import { v4 as uuidv4 } from "uuid"; +type MainpageProps = { + selectedPost: number; +}; -export function Mainpage() { +const postData = [ + data.map((post) => { + return ; + }), + ...data, +]; + +export function Mainpage({ selectedPost }: MainpageProps) { return (
- {/* {data.map((post) => { - return ; - })} */} - + {selectedPost > 0 ? ( + + ) : ( + (postData[0] as React.ReactNode[]) + )}
); } diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx index 1873fe2..ed52276 100644 --- a/src/components/Sidebar.tsx +++ b/src/components/Sidebar.tsx @@ -1,11 +1,21 @@ import { useState } from "react"; +import { data } from "../content/content"; +import { v4 as uuidv4 } from "uuid"; -export function Sidebar() { +type SidebarProps = { + setSelectedPost: React.Dispatch>; +}; + +export function Sidebar({ setSelectedPost }: SidebarProps) { const [isOpen, setIsOpen] = useState(false); - const toggleSidebar = () => { + function toggleSidebar() { setIsOpen(!isOpen); - }; + } + + function selectPost(selection: number) { + setSelectedPost(selection); + } return ( <>