+ )
+}
\ No newline at end of file
diff --git a/src/components/Layout/ContentWrapper/index.module.css b/src/components/Layout/ContentWrapper/index.module.css
new file mode 100644
index 0000000..a86a77f
--- /dev/null
+++ b/src/components/Layout/ContentWrapper/index.module.css
@@ -0,0 +1,4 @@
+.wrapper {
+ flex-grow: 1;
+ display: flex;
+}
\ No newline at end of file
diff --git a/src/components/Layout/PageHeader/index.jsx b/src/components/Layout/PageHeader/index.jsx
new file mode 100644
index 0000000..1472ee1
--- /dev/null
+++ b/src/components/Layout/PageHeader/index.jsx
@@ -0,0 +1,19 @@
+import styles from "./index.module.css"
+
+/**
+ * PageHeader — шапка страницы.
+ *
+ * Зачем нужен:
+ * 1. Контейнер для заголовка или навигации.
+ * 2. Позволяет одинаково стилизовать хедер на всех страницах.
+ *
+ * Как использовать:
+ * Вложенные элементы (например, заголовки, кнопки) рендерятся внутри через children.
+ */
+export function PageHeader({ children }) {
+ return (
+
+ {children}
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/Layout/PageHeader/index.module.css b/src/components/Layout/PageHeader/index.module.css
new file mode 100644
index 0000000..08d5af5
--- /dev/null
+++ b/src/components/Layout/PageHeader/index.module.css
@@ -0,0 +1,10 @@
+.header {
+ position: sticky;
+ top: calc(var(--spacing) * -3);
+ background-color: var(--color-bg);
+ padding-block: calc(var(--spacing) * 6) calc(var(--spacing) * 2);
+ padding-inline: calc(var(--spacing) * 6);
+ box-shadow: var(--box-shadow);
+ z-index: 1;
+ height: var(--main-header-height);
+}
\ No newline at end of file
diff --git a/src/components/Layout/PageWrapper/index.jsx b/src/components/Layout/PageWrapper/index.jsx
new file mode 100644
index 0000000..9541927
--- /dev/null
+++ b/src/components/Layout/PageWrapper/index.jsx
@@ -0,0 +1,25 @@
+import styles from "./index.module.css"
+
+/**
+ * PageWrapper — универсальная обёртка для всей страницы.
+ *
+ * Зачем нужен:
+ * 1. Служит контейнером для всей страницы и задаёт общие стили (например, отступы, фон).
+ * 2. Позволяет не дублировать один и тот же div с классом wrapper на каждой странице.
+ *
+ * Как использовать:
+ * Вложенные элементы передаются через props.children — то, что будет рендериться внутри.
+ *
+ * Пример:
+ *
+ * Заголовок
+ * Основной контент
+ *
+ */
+export function PageWrapper({ children }) {
+ return (
+
+ {children}
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/Layout/PageWrapper/index.module.css b/src/components/Layout/PageWrapper/index.module.css
new file mode 100644
index 0000000..bbbb0dd
--- /dev/null
+++ b/src/components/Layout/PageWrapper/index.module.css
@@ -0,0 +1,6 @@
+.wrapper {
+ display: flex;
+ flex-direction: column;
+ width: 100vw;
+ min-height: 100vh;
+}
\ No newline at end of file
diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js
new file mode 100644
index 0000000..00987f3
--- /dev/null
+++ b/src/components/Layout/index.js
@@ -0,0 +1,3 @@
+export * from "./ContentWrapper"
+export * from "./PageHeader"
+export * from "./PageWrapper"
\ No newline at end of file
diff --git a/src/components/MovieList/index.jsx b/src/components/MovieList/index.jsx
new file mode 100644
index 0000000..e69f6d2
--- /dev/null
+++ b/src/components/MovieList/index.jsx
@@ -0,0 +1,41 @@
+
+import { useState } from "react";
+import { MovieModal } from "src/components";
+import styles from "./index.module.css"
+
+/**
+ * Компонент списка фильмов
+ *
+ * Props:
+ * - movies: Array — массив объектов фильма
+ *
+ * Компонент:
+ * - Рендерит карточки фильмов
+ * - Обрабатывает открытие модалки при клике на карточку
+ */
+export function MovieList({ movies }) {
+ // Если selectedMovieId !== null, открывается модалка
+ const [selectedMovieId, setSelectedMovieId] = useState(null)
+
+ return (
+
+ {movies.map(({ id, title, subtitle, img, details }) => (
+ setSelectedMovieId(id)}>
+
+
+
+
+
{title}
+
{subtitle}
+
{details}
+
+
+ ))}
+ setSelectedMovieId(null)}
+ />
+
+ )
+}
\ No newline at end of file
diff --git a/src/styles/movie-list.css b/src/components/MovieList/index.module.css
similarity index 85%
rename from src/styles/movie-list.css
rename to src/components/MovieList/index.module.css
index 046940e..9c5b67c 100644
--- a/src/styles/movie-list.css
+++ b/src/components/MovieList/index.module.css
@@ -1,4 +1,4 @@
-.movie-list {
+.list {
max-width: 1440px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -8,7 +8,7 @@
margin: 0 auto;
}
-.movie-item a {
+.item {
display: flex;
gap: calc(var(--spacing) * 3);
text-align: left;
@@ -17,23 +17,24 @@
padding-block: calc(var(--spacing) * 2);
padding-inline: calc(var(--spacing) * 3);
transition: all 0.3s ease-out;
+ cursor: pointer;
}
-.movie-item a:hover {
+.item:hover {
padding-inline: calc(var(--spacing) / 2);
}
-.movie-item-poster {
+.poster {
flex-shrink: 0;
}
-.movie-item-poster img {
+.poster img {
width: 102px;
height: 153px;
object-fit: cover;
}
-.movie-item-desc {
+.desc {
min-width: 0;
display: flex;
flex-direction: column;
@@ -41,24 +42,24 @@
}
@media (max-width: 1024px) {
- .movie-list {
+ .list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
- .movie-item a {
+ .item {
gap: calc(var(--spacing) * 4);
}
}
@media (max-width: 600px) {
- .movie-list {
+ .list {
grid-template-columns: minmax(0, 1fr);
padding-block: calc(var(--spacing));
padding-inline: calc(var(--spacing) + 1rem);
gap: 0;
}
- .movie-item a {
+ .item {
gap: calc(var(--spacing) * 4);
}
}
\ No newline at end of file
diff --git a/src/components/MovieModal/index.jsx b/src/components/MovieModal/index.jsx
new file mode 100644
index 0000000..4bbb5db
--- /dev/null
+++ b/src/components/MovieModal/index.jsx
@@ -0,0 +1,96 @@
+
+import { useState, useEffect, useRef } from "react";
+import { Link } from "react-router-dom";
+import { MovieService } from "src/services";
+import styles from "./index.module.css"
+
+/**
+ * Компонент модального окна фильма
+ *
+ * Props:
+ * - movieId: string | undefined — id фильма для отображения
+ * - isOpen: boolean — открыта ли модалка
+ * - onClose: function — функция закрытия модалки
+ */
+export function MovieModal({ movieId, isOpen, onClose }) {
+ const [movie, setMovie] = useState({})
+ // Ref для управления нативным
+