Day02- Fixed: styles, Added:Favourite list
This commit is contained in:
parent
4fdc869fd0
commit
7d91c7998c
|
|
@ -1,9 +1,24 @@
|
|||
import React from "react";
|
||||
import Star from "./Star";
|
||||
|
||||
const Card = ({ movie }) => {
|
||||
const Card = ({ movie, favouriteList, setFavouriteList }) => {
|
||||
const { Title, Year, imdbID, Poster } = movie;
|
||||
return (
|
||||
<div className="h-[30vh] w-[10vw] overflow-hidden border rounded-lg border-quadnary">
|
||||
<div className="relative h-[30vh] w-[10vw] overflow-hidden border rounded-lg border-quadnary bg-secondary">
|
||||
{favouriteList?.includes(imdbID) ? (
|
||||
<Star
|
||||
fill="#FFD700"
|
||||
favouriteList={favouriteList}
|
||||
setFavouriteList={setFavouriteList}
|
||||
movie={movie}
|
||||
/>
|
||||
) : (
|
||||
<Star
|
||||
favouriteList={favouriteList}
|
||||
setFavouriteList={setFavouriteList}
|
||||
movie={movie}
|
||||
/>
|
||||
)}
|
||||
<img src={Poster} alt={Title} className="h-[85%] w-full" />
|
||||
<div className="flex justify-between px-3 pt-1 text-sm">
|
||||
<h6 className="text-quadnary">{Title}</h6>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import React from 'react'
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<header className="fixed z-20 w-full h-[5vh] py-3 px-6 bg-secondary">
|
||||
<a href="/">DigiFlix</a>
|
||||
<Link href="/" className='text-quadnary text-2xl font-semibold'>DigiFlix</Link>
|
||||
</header>
|
||||
)
|
||||
};
|
||||
|
|
|
|||
56
src/components/Star.jsx
Normal file
56
src/components/Star.jsx
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
import React from "react";
|
||||
|
||||
const Star = ({
|
||||
size = 5,
|
||||
fill = "#00000000",
|
||||
stroke = "#DAA520",
|
||||
favouriteList,
|
||||
setFavouriteList,
|
||||
movie,
|
||||
}) => {
|
||||
// Calculate points for a five-pointed star
|
||||
const points = [];
|
||||
const outerRadius = size / 2;
|
||||
const innerRadius = outerRadius * 0.382; // Golden ratio
|
||||
|
||||
for (let i = 0; i < 10; i++) {
|
||||
const radius = i % 2 === 0 ? outerRadius : innerRadius;
|
||||
const angle = (Math.PI / 5) * i - Math.PI / 2;
|
||||
const x = radius * Math.cos(angle) + size / 2;
|
||||
const y = radius * Math.sin(angle) + size / 2;
|
||||
points.push(`${x},${y}`);
|
||||
}
|
||||
|
||||
const handleFavouriteList = () => {
|
||||
favouriteList?.includes(movie?.imdbID)
|
||||
? setFavouriteList((prevList) =>
|
||||
prevList?.filter((id) => id !== movie?.imdbID)
|
||||
)
|
||||
: setFavouriteList((prevList) => [...prevList, movie?.imdbID]);
|
||||
let localStorageData = JSON.parse(window.localStorage.getItem("favouriteMovies"));
|
||||
console.log(localStorageData)
|
||||
window.localStorage.setItem("favouriteMovies", JSON.stringify({movies: [...localStorageData, movie]}));
|
||||
};
|
||||
|
||||
return (
|
||||
<svg
|
||||
height="1em"
|
||||
width="1em"
|
||||
viewBox={`0 0 ${size} ${size}`}
|
||||
className="absolute top-1 right-1"
|
||||
onClick={handleFavouriteList}
|
||||
>
|
||||
<polygon
|
||||
height="1em"
|
||||
width="1em"
|
||||
points={points.join(" ")}
|
||||
fill={fill}
|
||||
stroke={stroke}
|
||||
strokeWidth={size / 15}
|
||||
className="drop-shadow-2xl shadow-[#000] shadow-2xl"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export default Star;
|
||||
|
|
@ -11,10 +11,11 @@ const HomePage = () => {
|
|||
const [inputValue, setInputValue] = useState("");
|
||||
const [searchValue, setSearchValue] = useState("");
|
||||
const [page, setPage] = useState(1);
|
||||
const [favouriteList, setFavouriteList] = useState([]);
|
||||
const [showFavourite, setShowFavourite] = useState(false);
|
||||
const { data, loading, error } = useFetch(
|
||||
url + "&s=" + searchValue + "&page=" + page
|
||||
);
|
||||
|
||||
const handlePageChange = (e) => {
|
||||
setPage(e?.target?.textContent);
|
||||
};
|
||||
|
|
@ -24,7 +25,7 @@ const HomePage = () => {
|
|||
};
|
||||
return (
|
||||
<div className=" min-h-[90vh] w-full pt-[10vh] bg-primary flex flex-col items-center ">
|
||||
<div>
|
||||
<div className="flex items-center gap-10">
|
||||
<form className="flex gap-3 items-center">
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -34,41 +35,67 @@ const HomePage = () => {
|
|||
onChange={(event) =>
|
||||
setInputValue(event?.target?.value)
|
||||
}
|
||||
className="p-1 text-quadnary bg-primary rounded outline-none border border-ternary"
|
||||
className="p-1 text-quadnary bg-secondary focus:bg-secondary rounded outline-none border border-ternary"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="px-4 h-full border border-quadnary text-quadnary"
|
||||
className="px-4 py-1 font-semibold h-full rounded border border-quadnary text-quadnary bg-secondary"
|
||||
onClick={handleSearch}
|
||||
>
|
||||
Search
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{data?.Search?.length > 0 && (
|
||||
<div className="flex flex-col items-center m-10">
|
||||
{loading && (
|
||||
<svg
|
||||
className="animate-spin h-12 w-12 border-4 border-[#fff] mb-6"
|
||||
viewBox="0 0 24 24"
|
||||
fill="#fff"
|
||||
></svg>
|
||||
)}
|
||||
<div className="flex flex-wrap gap-4 mb-6 justify-center">
|
||||
{data?.Search?.map((movie) => (
|
||||
<Card key={movie?.imdbID} movie={movie} />
|
||||
))}
|
||||
</div>
|
||||
<Pagination
|
||||
sx={{ bgcolor: "#fff" }}
|
||||
onChange={handlePageChange}
|
||||
page={Number(page)}
|
||||
count={Math.ceil(data?.totalResults / 10)}
|
||||
variant="outlined"
|
||||
shape="rounded"
|
||||
<div className="">
|
||||
<label htmlFor="favourite">Favourites</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
name="favourite"
|
||||
id="favourite"
|
||||
onClick={() => setShowFavourite((prev) => !prev)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{(showFavourite && (
|
||||
<div className="grid grid-cols-5 gap-4 mb-6 justify-center">
|
||||
{favouriteList?.map((movie) => (
|
||||
<Card
|
||||
key={movie?.imdbID}
|
||||
movie={movie}
|
||||
setFavouriteList={setFavouriteList}
|
||||
favouriteList={favouriteList}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)) ||
|
||||
(data?.Search?.length > 0 && (
|
||||
<div className="flex flex-col items-center m-10">
|
||||
{loading && (
|
||||
<svg
|
||||
className="animate-spin h-12 w-12 border-4 border-[#fff] mb-6"
|
||||
viewBox="0 0 24 24"
|
||||
fill="#fff"
|
||||
></svg>
|
||||
)}
|
||||
<div className="grid grid-cols-5 gap-4 mb-6 justify-center">
|
||||
{data?.Search?.map((movie) => (
|
||||
<Card
|
||||
key={movie?.imdbID}
|
||||
movie={movie}
|
||||
setFavouriteList={setFavouriteList}
|
||||
favouriteList={favouriteList}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<Pagination
|
||||
sx={{ bgcolor: "#6B8A7A" }}
|
||||
onChange={handlePageChange}
|
||||
page={Number(page)}
|
||||
count={Math.ceil(data?.totalResults / 10)}
|
||||
variant="outlined"
|
||||
shape="rounded"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@ export default {
|
|||
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
colors: {
|
||||
primary: "#191A19",
|
||||
secondary: "#1E5128",
|
||||
ternary: "#4E9F3D",
|
||||
quadnary: "#D8E9A8",
|
||||
primary: "#6B8A7A",
|
||||
secondary: "#254336",
|
||||
ternary: "#B7B597",
|
||||
quadnary: "#DAD3BE",
|
||||
},
|
||||
extend: {},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue