+
+ );
+};
+
+export default About;
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
new file mode 100644
index 0000000..4cab82c
--- /dev/null
+++ b/src/components/Card.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { CardProps } from '../model/interfases';
+import './styles/card.css';
+
+const Card = ({ card, onClick }: CardProps) => {
+ return (
+ About Us
+
+
+ );
+};
+
+export default Card;
diff --git a/src/components/Cards.tsx b/src/components/Cards.tsx
new file mode 100644
index 0000000..b94031a
--- /dev/null
+++ b/src/components/Cards.tsx
@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import { CardsState, Character } from '../model/interfases';
+import Card from './Card';
+import './styles/cards.css';
+import ModalCard from './ModalCard';
+
+const Cards: React.FC
+ 
+
+ {card.name}
+-
+
- {card.status} +
- {card.gender} +
+
+ );
+};
+
+export default Cards;
diff --git a/src/components/Form.tsx b/src/components/Form.tsx
new file mode 100644
index 0000000..7003443
--- /dev/null
+++ b/src/components/Form.tsx
@@ -0,0 +1,147 @@
+import React, { useEffect, useState } from 'react';
+import './styles/form.css';
+import { FormFilds, FormProps } from '../model/interfases';
+import { useForm } from 'react-hook-form';
+import { validateBirthDate, validateName } from '../helpers/validators';
+
+const Form: React.FC
+ {cardsList.map((item: Character) => (
+ {
+ setIsModal(true);
+ setCard(item);
+ }}
+ />
+ ))}
+
+ {card &&
+
+ );
+ }
+}
+
+export default FormCard;
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
new file mode 100644
index 0000000..f3ebb15
--- /dev/null
+++ b/src/components/Layout.tsx
@@ -0,0 +1,15 @@
+import { Outlet } from 'react-router-dom';
+import Navigation from './Navigation';
+
+function Layout() {
+ return (
+
+ 
+
+ {this.props.name}
+Main information:
+-
+
- Status: {this.props.status} +
- Species: {this.props.species} +
- Gender: {this.props.gender} +
- Location: {this.props.location.name} +
- + Date of birthday: {parseDate(this.props.created)} + +
+
+
+
+ );
+}
+
+export default Layout;
diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
new file mode 100644
index 0000000..62bd377
--- /dev/null
+++ b/src/components/Loader.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import './styles/loader.css';
+
+const Loader = () => {
+ return ;
+};
+
+export default Loader;
diff --git a/src/components/ModalCard.tsx b/src/components/ModalCard.tsx
new file mode 100644
index 0000000..f7a57b3
--- /dev/null
+++ b/src/components/ModalCard.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import './styles/modalCard.css';
+import { ModalProps } from '../model/interfases';
+import { parseDate } from '../helpers/utils';
+
+const ModalCard = ({ visible, onClose, data }: ModalProps) => {
+ const showHideClassName = visible ? 'modal-card modal-active' : 'modal-card';
+
+ return (
+ <>
+ {visible && (
+
+
+
+ )}
+
+ );
+};
+
+export default ModalCard;
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
new file mode 100644
index 0000000..1ca134e
--- /dev/null
+++ b/src/components/Navigation.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import './styles/navigation.css';
+
+function Navigation() {
+ return (
+
+ );
+}
+
+export default Navigation;
diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
new file mode 100644
index 0000000..5bd088f
--- /dev/null
+++ b/src/components/Pagination.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import './styles/pagination.css';
+import { PaginationProps } from '../model/interfases';
+import { useAppSelector } from '../store/hooks';
+
+const Pagination = (props: PaginationProps) => {
+ const { onClick } = props;
+ const { pages, count, cardsPerRage, currentPage } = useAppSelector((state) => state.cards);
+ const last = cardsPerRage === 20 ? pages : Math.ceil(Number(count) / 10);
+
+ return (
+ e.stopPropagation()}>
+
+
+ 
+
+
+
+ {data.name}
+Main information:
+-
+
- + Status: {data.status} + +
- + Species: {data.species} + +
- + Gender: {data.gender} + +
- + Origin: {data.origin.name} + +
- + Location: {data.location.name} + +
- + Created: {parseDate(data.created)} + +
- + Number of episode: {data.episode?.length} + +
+
+ );
+};
+
+export default Pagination;
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
new file mode 100644
index 0000000..08531ab
--- /dev/null
+++ b/src/components/Search.tsx
@@ -0,0 +1,22 @@
+import './styles/search.css';
+import { useAppSelector } from './../store/hooks';
+import { SearchProps } from '../model/interfases';
+
+const Search = (props: SearchProps) => {
+ const search = useAppSelector((state) => state.search.searchQuery);
+
+ return (
+ -
+
- + + +
- + + +
- + + +
+
+
+
+ );
+};
+
+export default Search;
diff --git a/src/components/styles/card.css b/src/components/styles/card.css
new file mode 100644
index 0000000..37c5778
--- /dev/null
+++ b/src/components/styles/card.css
@@ -0,0 +1,49 @@
+.card-container {
+ width: 200px;
+ display: flex;
+ flex-direction: column;
+ border: 1px solid #c0c0c0;
+ border-radius: 15px;
+ box-shadow: 18px 23px 14px -12px #07070733;
+}
+
+.image-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 10px auto;
+ width: 150px;
+ height: 150px;
+}
+
+.image-container > img {
+ border-radius: 15px;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.title {
+ text-align: center;
+ font-size: 20px;
+ color: #deb887;
+ font-style: italic;
+ margin-top: 1rem;
+ margin: 5px auto;
+}
+
+h4 {
+ margin: 10px 0 0 11%;
+ color: lightskyblue;
+ text-align: left;
+}
+
+ul {
+ list-style-type: none;
+ margin: 0;
+ text-align: left;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ padding: 3px 15px;
+}
diff --git a/src/components/styles/cards.css b/src/components/styles/cards.css
new file mode 100644
index 0000000..7200fdd
--- /dev/null
+++ b/src/components/styles/cards.css
@@ -0,0 +1,11 @@
+.cards-contener {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+ justify-content: center;
+}
+
+.app-title {
+ text-align: center;
+ color: lightskyblue;
+}
diff --git a/src/components/styles/form.css b/src/components/styles/form.css
new file mode 100644
index 0000000..26ad956
--- /dev/null
+++ b/src/components/styles/form.css
@@ -0,0 +1,15 @@
+.form {
+ margin: 1rem;
+ width: 400px;
+ padding: 25px;
+ background: rgba(0, 0, 0, 0.5);
+ box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
+ border-radius: 10px;
+}
+
+.form-title {
+ margin: 0 0 10px;
+ padding: 0;
+ color: #ffffff;
+ text-align: center;
+}
diff --git a/src/components/styles/formCard.css b/src/components/styles/formCard.css
new file mode 100644
index 0000000..d16613c
--- /dev/null
+++ b/src/components/styles/formCard.css
@@ -0,0 +1,48 @@
+.form-card {
+ width: 350px;
+ display: flex;
+ flex-direction: column;
+ border: 1px solid #c0c0c0;
+ border-radius: 15px;
+ box-shadow: 18px 23px 14px -12px #07070733;
+}
+
+.form-image-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 10px auto;
+ width: 300px;
+ height: 300px;
+}
+
+.form-image-container > img {
+ border-radius: 15px;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+}
+
+.form-h1 {
+ text-align: center;
+ font-size: 25px;
+ color: #deb887;
+ font-style: italic;
+ margin-top: 1rem;
+ margin-bottom: 0;
+}
+
+h4 {
+ margin: 10px 0 0 11%;
+ color: lightskyblue;
+ text-align: left;
+}
+
+.form-ul {
+ list-style-type: none;
+ margin: 0;
+ text-align: left;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+}
diff --git a/src/components/styles/loader.css b/src/components/styles/loader.css
new file mode 100644
index 0000000..0819e05
--- /dev/null
+++ b/src/components/styles/loader.css
@@ -0,0 +1,16 @@
+.loader {
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+ border: 2px dashed lightblue;
+ animation: rotate 1s infinite linear;
+}
+
+@keyframes rotate {
+ from {
+ transform: rotate(0deg) scale(1);
+ }
+ to {
+ transform: rotate(360deg) scale(1.4);
+ }
+}
diff --git a/src/components/styles/modalCard.css b/src/components/styles/modalCard.css
new file mode 100644
index 0000000..39c830b
--- /dev/null
+++ b/src/components/styles/modalCard.css
@@ -0,0 +1,84 @@
+@keyframes slide {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+.modal-card {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 1;
+ width: 100vw;
+ height: 100vh;
+ background: rgba(0, 0, 0, 0.5);
+ animation: slide 0.2s linear;
+ border: 2px solid lightskyblue;
+}
+
+.modal-active {
+ background-color: #fff;
+}
+
+.close-btn {
+ position: fixed;
+ right: 20px;
+ top: 10px;
+ color: lightblue;
+ background-color: white;
+ border: none;
+ font-size: 2rem;
+ cursor: pointer;
+}
+
+.modal-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ gap: 10%;
+ width: 100%;
+ height: 100%;
+ padding: 2rem;
+}
+
+.modal-image-container {
+ height: 100%;
+}
+
+.modal-image-container > img {
+ height: 100%;
+}
+
+.text-container {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
+.modal-title {
+ text-align: center;
+ font-size: 2rem;
+ color: #deb887;
+ font-style: italic;
+ margin: 2rem auto 10px;
+ text-decoration: underline;
+}
+
+.modal-list {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+}
+
+.info-title {
+ margin: 10px;
+ color: lightskyblue;
+ text-align: left;
+}
diff --git a/src/components/styles/navigation.css b/src/components/styles/navigation.css
new file mode 100644
index 0000000..6666099
--- /dev/null
+++ b/src/components/styles/navigation.css
@@ -0,0 +1,24 @@
+.navigation {
+ display: flex;
+ flex-direction: row;
+ justify-content: end;
+ gap: 20px;
+ padding-right: 10%;
+ margin-top: 0.5%;
+}
+
+.nav-link {
+ color: #000000;
+ text-decoration: none;
+ padding: 5px;
+ font-size: 1.2rem;
+}
+
+.nav-link:hover {
+ color: lightskyblue;
+}
+
+.active {
+ color: #deb887;
+ font-weight: bold;
+}
diff --git a/src/components/styles/pagination.css b/src/components/styles/pagination.css
new file mode 100644
index 0000000..ee27ba1
--- /dev/null
+++ b/src/components/styles/pagination.css
@@ -0,0 +1,20 @@
+.pagination {
+ display: flex;
+ text-align: center;
+ justify-content: center;
+ margin: 1rem;
+}
+
+.pagination-btn {
+ border-radius: 50%;
+ border: 1px solid lightblue;
+ cursor: pointer;
+}
+
+.pagination-btn:hover {
+ background-color: lightblue;
+}
+.pagination-btn:disabled {
+ cursor: not-allowed;
+ opacity: 0.5;
+}
diff --git a/src/components/styles/search.css b/src/components/styles/search.css
new file mode 100644
index 0000000..f9428ba
--- /dev/null
+++ b/src/components/styles/search.css
@@ -0,0 +1,26 @@
+.search-box > input,
+.search-btn {
+ padding: 5px;
+ font-size: 14px;
+ border-radius: 20px;
+ border: 2px solid lightskyblue;
+ cursor: pointer;
+}
+
+.search-box > input {
+ width: 50%;
+}
+
+.search-box > input:focus,
+.search-box > input:hover {
+ border-color: #deb887;
+}
+
+.search-btn {
+ width: 10%;
+ background-color: lightskyblue;
+}
+
+.search-btn:hover {
+ background-color: #deb887;
+}
diff --git a/src/entry-client.tsx b/src/entry-client.tsx
new file mode 100644
index 0000000..9f25633
--- /dev/null
+++ b/src/entry-client.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import App from './App';
+import './index.css';
+import { BrowserRouter } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import store from './store';
+
+hydrateRoot(
+ document.getElementById('root') as HTMLElement,
+
+
+
+ );
+};
+
+export default FormPage;
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
new file mode 100644
index 0000000..72b17bc
--- /dev/null
+++ b/src/pages/HomePage.tsx
@@ -0,0 +1,76 @@
+import Search from '../components/Search';
+import React, { Suspense, lazy, useEffect } from 'react';
+import './../pages/styles/homePage.css';
+import Loader from '../components/Loader';
+import Pagination from '../components/Pagination';
+import { useAppDispatch, useAppSelector } from '../store/hooks';
+import { fetchCards, setCurrentPage } from '../store/cardsSlice';
+import { setSearchQuery } from '../store/searchSlice';
+
+const Cards = lazy(() => import('../components/Cards'));
+
+const HomePage = () => {
+ const { cardsList, cardsPerRage, loading, error, currentPage } = useAppSelector(
+ (state) => state.cards
+ );
+ const searchQuery = useAppSelector((state) => state.search.searchQuery);
+ const dispatch = useAppDispatch();
+
+ useEffect(() => {
+ dispatch(fetchCards());
+ }, [dispatch]);
+
+ useEffect(() => {
+ dispatch(fetchCards());
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [currentPage, cardsPerRage, searchQuery]);
+
+ const handleInputChange = (e: React.ChangeEvent
+ {cardsForm ? cardsForm.map((item: Character) =>
+
+
+ ) : (
+
+
+ )}
+ {error && {error}
}
+ {cardsList.length !== 0 ? (
+
+ Loading ...
}>
+ Rick and Morty characters
+Not found this character...
+ )} + + ); +}; +export default HomePage; diff --git a/src/pages/NotFoundPage.tsx b/src/pages/NotFoundPage.tsx new file mode 100644 index 0000000..11a036b --- /dev/null +++ b/src/pages/NotFoundPage.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import './styles/notFound.css'; + +function NotFoundPage() { + return ( +
+
+ );
+}
+
+export default NotFoundPage;
diff --git a/src/pages/styles/formPage.css b/src/pages/styles/formPage.css
new file mode 100644
index 0000000..8858b6d
--- /dev/null
+++ b/src/pages/styles/formPage.css
@@ -0,0 +1,6 @@
+.form-cards-container {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+ justify-content: center;
+}
diff --git a/src/pages/styles/homePage.css b/src/pages/styles/homePage.css
new file mode 100644
index 0000000..f6a128a
--- /dev/null
+++ b/src/pages/styles/homePage.css
@@ -0,0 +1,17 @@
+.home-page-container {
+ margin: 0.8rem;
+ flex-direction: column;
+ display: flex;
+ text-align: center;
+}
+.app-title {
+ text-align: center;
+ color: lightskyblue;
+}
+
+.pagination-btns {
+ list-style: none;
+ display: flex;
+ flex-direction: row;
+ gap: 1rem;
+}
diff --git a/src/pages/styles/notFound.css b/src/pages/styles/notFound.css
new file mode 100644
index 0000000..7354c25
--- /dev/null
+++ b/src/pages/styles/notFound.css
@@ -0,0 +1,7 @@
+.not-found-page {
+ flex-direction: column;
+ display: flex;
+ text-align: center;
+ justify-content: center;
+ height: 80vh;
+}
diff --git a/src/store/cardsSlice.tsx b/src/store/cardsSlice.tsx
new file mode 100644
index 0000000..54d69bb
--- /dev/null
+++ b/src/store/cardsSlice.tsx
@@ -0,0 +1,107 @@
+import { PayloadAction } from '@reduxjs/toolkit';
+import * as toolkitRaw from '@reduxjs/toolkit';
+
+type TypeToolkitRaw = typeof toolkitRaw & { default?: unknown };
+const { createSlice } = ((toolkitRaw as TypeToolkitRaw).default ?? toolkitRaw) as typeof toolkitRaw;
+const { createAsyncThunk } = ((toolkitRaw as TypeToolkitRaw).default ??
+ toolkitRaw) as typeof toolkitRaw;
+
+import { URL, PAGE, SEARCH_PARAM } from '../helpers/constants';
+import { ApiResponce, Character } from '../model/interfases';
+import { RootState } from '.';
+
+type CardInitialState = {
+ cardsList: Required