ekallin/PIbd-21_Bakalskaya_E.D._INTERNET_PROGRAMMING_FRONTEND
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

работает добавление фильмов по категориям

Browse Source
This commit is contained in:
ekallin 2024-01-06 21:20:27 +04:00
parent d0d53ddc0b
commit 957585506b
6 changed files with 76 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
data.json
View File

File diff suppressed because one or more lines are too long

8
src/components/cardCategory/CardCategory.css
View File

@ -1,3 +1,11 @@
.category-card img {
height: 250px;
}
.category-card {
transition: 0.3s;
}
.category-card:hover {
transform: scale(1.1);
}

28
src/components/cardFilm/CardFilm.css
View File

@ -1,12 +1,30 @@
.category-name {
.film-name {
color: white;
}
.category-card {
#icon-heart,
#icon-time {
cursor: pointer;
transition: 0.3s;
transition: 0.7s;
}
.category-card:hover {
transform: scale(1.1);
#icon-heart:hover {
transform: scale(1.5);
fill: rgb(238, 62, 62);
}
#icon-time:hover {
transform: scale(1.5);
fill: rgb(242, 194, 64);
}
#icons {
direction: flex;
flex-direction: column;
justify-content: space-around;
}
.my-icon {
fill: white;
}

13
src/components/cardFilm/CardFilm.jsx
View File

@ -1,21 +1,22 @@
import PropTypes from 'prop-types';
import './CardFilm.css';
const CardFilm = ({ movie }) => {
return (
<>
<div className="category-card d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0">
<div className="card-film d-flex flex-column justify-content-center align-items-center mb-5 mb-md-0">
<img src={movie.image} className="img-fluid rounded-3" id="img-fluid" />
<div className="icons w-50 d-flex justify-content-around mt-1 mb-1">
<svg id="icon-heart" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" className="bi bi-heart" viewBox="0 0 16 16">
<svg id="icon-heart" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" className="my-icon bi bi-heart" viewBox="0 0 16 16">
<path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15" />
</svg>
<svg id="icon-time" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" className="bi bi-clock-history" viewBox="0 0 16 16">
<svg id="icon-time" xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" className="my-icon bi bi-clock-history" viewBox="0 0 16 16">
<path d="M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022zm2.004.45a7.003 7.003 0 0 0-.985-.299l.219-.976c.383.086.76.2 1.126.342zm1.37.71a7.01 7.01 0 0 0-.439-.27l.493-.87a8.025 8.025 0 0 1 .979.654l-.615.789a6.996 6.996 0 0 0-.418-.302zm1.834 1.79a6.99 6.99 0 0 0-.653-.796l.724-.69c.27.285.52.59.747.91l-.818.576zm.744 1.352a7.08 7.08 0 0 0-.214-.468l.893-.45a7.976 7.976 0 0 1 .45 1.088l-.95.313a7.023 7.023 0 0 0-.179-.483m.53 2.507a6.991 6.991 0 0 0-.1-1.025l.985-.17c.067.386.106.778.116 1.17l-1 .025zm-.131 1.538c.033-.17.06-.339.081-.51l.993.123a7.957 7.957 0 0 1-.23 1.155l-.964-.267c.046-.165.086-.332.12-.501zm-.952 2.379c.184-.29.346-.594.486-.908l.914.405c-.16.36-.345.706-.555 1.038l-.845-.535m-.964 1.205c.122-.122.239-.248.35-.378l.758.653a8.073 8.073 0 0 1-.401.432l-.707-.707z" />
<path d="M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0z" />
<path d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5" />
</svg>
</div>
<div className="tooltip-content text-center w-50 d-flex justify-content-center align-items-center">
<div className="film-name text-center w-50 d-flex justify-content-center align-items-center">
<p>{movie.description}</p>
</div>
</div>
@ -23,4 +24,8 @@ const CardFilm = ({ movie }) => {
);
};
CardFilm.propTypes = {
movie: PropTypes.object,
};
export default CardFilm;

34
src/pages/Catalog.jsx
View File

@ -1,16 +1,20 @@
import '../pagescss/Catalog.css';
import useCategorieFilter from '../components/movies/hooks/MoviesFilterHook';
import useMovies from '../components/movies/hooks/MoviesHook';
import RowCategories from '../components/RowCategories/RowCategories';
import { useSearchParams } from "react-router-dom";
import useCategories from '../components/categories/hooks/CategoriesHook';
import RowFilms from '../components/RowFilms/RowFilms';
const Catalog = () => {
const [searchParams, setSearchParams] = useSearchParams();
const { categories } = useCategories();
const currentCategorieId = searchParams.get('categorie');
if (currentCategorieId == null) {
const { currentFilter } = useCategorieFilter();
const { movies } = useMovies(currentFilter);
if (currentFilter == "") {
let size = 3; //размер подмассива
let subarray = []; //массив в который будет выведен результат.
@ -32,6 +36,28 @@ const Catalog = () => {
</>
);
}
let size = 3; //размер подмассива
let subarray = []; //массив в который будет выведен результат.
for (let i = 0; i < Math.ceil(movies.length / size); i++) {
subarray[i] = movies.slice((i * size), (i * size) + size);
}
let moviesByRow = subarray;
return (
<>
<main className="main-page flex-fill d-flex justify-content-center" id='catalog-page'>
<div className="content-film d-flex flex-column justify-content-around" id="content">
{
moviesByRow.map((moviesRow, index) => <RowFilms movies={moviesRow} key={index} />)
}
</div>
</main >
</>
);
};
export default Catalog;

27
src/pagescss/CategoryFilm.css
View File

@ -27,33 +27,6 @@ p {
color: white;
}
#icon-heart,
#icon-time {
cursor: pointer;
transition: 0.7s;
}
#icon-heart:hover {
transform: scale(1.5);
fill: rgb(238, 62, 62);
}
#icon-time:hover {
transform: scale(1.5);
fill: rgb(242, 194, 64);
}
#item-show {
background-image: url("../images/barbie-dumaet.jpg");
}
#icons {
direction: flex;
flex-direction: column;
justify-content: space-around;
}
img-fluid:hover {
transform: scale(1.5);
transition: 0.7s;
}