+ {Array.from(posts.values()).map(post => (
+
+}
\ No newline at end of file
diff --git a/src/components/ui/Card/Card.css b/src/components/ui/Card/Card.css
new file mode 100644
index 000000000..41a9b48cb
--- /dev/null
+++ b/src/components/ui/Card/Card.css
@@ -0,0 +1,36 @@
+.card-wrapper {
+ position: relative;
+ width: 225px;
+ height: 225px;
+
+ background-color: #eeeeee;
+ overflow: hidden;
+ cursor: pointer;
+ transition: all 0.25s ease;
+}
+
+
+.card-wrapper:hover {
+ box-shadow: 0 9px 18px rgba(0, 0, 0, 0.18), 0 6px 5px rgba(0, 0, 0, 0.24);
+ transform: scale(1.14);
+}
+
+.card-image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.favorite-button {
+ position: absolute;
+ bottom: 24px;
+ right: 23px;
+
+ visibility: hidden;
+ background: none;
+ cursor: pointer;
+}
+
+.card-wrapper:hover .favorite-button {
+ visibility: visible;
+}
diff --git a/src/components/ui/Card/Card.tsx b/src/components/ui/Card/Card.tsx
new file mode 100644
index 000000000..e6a042fb6
--- /dev/null
+++ b/src/components/ui/Card/Card.tsx
@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import "./Card.css";
+import type { IPost } from '../../../types/IPost';
+
+interface CardProps extends IPost {
+ addFavorite: (id: string) => void;
+ removeFavorite: (id: string) => void;
+}
+
+export const Card: React.FC
+ 
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/components/ui/Header/Header.tsx b/src/components/ui/Header/Header.tsx
new file mode 100644
index 000000000..3d5545f68
--- /dev/null
+++ b/src/components/ui/Header/Header.tsx
@@ -0,0 +1,10 @@
+import { NavLink } from "react-router";
+
+export const Header = () => {
+ return Произошла ошибка :(
+ } + {isLoading ?Загрузка постов...
+ :
+ {Array.from(favoritePosts.values()).map(post => (
+
+ }
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/pages/Posts.tsx b/src/pages/Posts.tsx
new file mode 100644
index 000000000..b4c378084
--- /dev/null
+++ b/src/pages/Posts.tsx
@@ -0,0 +1,33 @@
+import { useEffect, useRef } from "react";
+import { PostsApi } from "../api/PostsApi";
+import { useFetching } from '../hooks/useFetching'
+import { PostList } from "../components/PostList";
+import { useObserver } from "../hooks/useObserver";
+import { usePostsStore } from "../store/PostsStore";
+
+export const Posts = () => {
+ const {posts, addPosts, addFavorite, removeFavorite} = usePostsStore();
+ const [fetchPosts, isPostsLoading, postError] = useFetching(async () => {
+ const posts = await PostsApi.getAll();
+ addPosts(posts)
+ });
+ const lastElement = useRef... загружаем еще котиков ...
}
+ {postError
+ ? Произошла ошибка :(
+ :
+ }
+
+ )
+}
\ No newline at end of file
diff --git a/src/store/postsStore.ts b/src/store/postsStore.ts
new file mode 100644
index 000000000..f5181f3c2
--- /dev/null
+++ b/src/store/postsStore.ts
@@ -0,0 +1,72 @@
+import { create } from "zustand";
+import type { IPost } from "../types/IPost";
+
+
+interface IPostsStore {
+ posts: Map;
+ favoritePosts: Map;
+ isLoading: boolean;
+ error: string;
+ addPosts: (post: IPost[] | IPost) => void;
+ addFavorite: (id: string) => void;
+ removeFavorite: (id: string) => void;
+}
+
+export const usePostsStore = create((set) => ({
+ posts: new Map(),
+ favoritePosts: new Map(),
+ isLoading: false,
+ error: '',
+ addPosts: (newPosts) => {
+ set((state) => {
+ const updatedPosts = new Map(state.posts);
+
+ const postsArray = Array.isArray(newPosts) ? newPosts : [newPosts];
+
+ postsArray.forEach(post => {
+ if (post.id && !state.posts.has(post.id)) {
+ updatedPosts.set(post.id, post)
+ }
+ });
+
+ return {posts: updatedPosts}
+ })
+ },
+ addFavorite: (id) => {
+ set((state) => {
+ const post = state.posts.get(id);
+ if (!post) return state;
+
+ const updatedPosts = new Map(state.posts);
+ updatedPosts.set(id, { ...post, isFavorite: true });
+
+ const updatedFavorites = new Map(state.favoritePosts);
+ updatedFavorites.set(id, {...post, isFavorite: true});
+
+
+ return {
+ posts: updatedPosts,
+ favoritePosts: updatedFavorites
+ }
+ })
+ },
+
+ removeFavorite: (id) => {
+ set((state) => {
+ const post = state.posts.get(id);
+ if (!post) return state;
+
+ const updatedPosts = new Map(state.posts);
+ updatedPosts.set(id, { ...post, isFavorite: false });
+
+ const updatedFavorites = new Map(state.favoritePosts);
+ updatedFavorites.delete(id);
+
+
+ return {
+ posts: updatedPosts,
+ favoritePosts: updatedFavorites
+ }
+ })
+ }
+}))
\ No newline at end of file
diff --git a/src/types/IPost.ts b/src/types/IPost.ts
new file mode 100644
index 000000000..509192ec9
--- /dev/null
+++ b/src/types/IPost.ts
@@ -0,0 +1,7 @@
+export type IPost = {
+ id: string;
+ url: string;
+ width?: number;
+ height?: number;
+ isFavorite?: boolean;
+}
\ No newline at end of file
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 000000000..1d29c885f
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,25 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+ "target": "es2023",
+ "lib": ["ES2023", "DOM", "DOM.Iterable"],
+ "module": "esnext",
+ "types": ["vite/client"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 000000000..1ffef600d
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+ "files": [],
+ "references": [
+ { "path": "./tsconfig.app.json" },
+ { "path": "./tsconfig.node.json" }
+ ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 000000000..d3c52ea64
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,24 @@
+{
+ "compilerOptions": {
+ "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+ "target": "es2023",
+ "lib": ["ES2023"],
+ "module": "esnext",
+ "types": ["node"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "verbatimModuleSyntax": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "erasableSyntaxOnly": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 000000000..d9e67c770
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+ plugins: [react()],
+ base: '/frontend-challenge/'
+})