Skip to content

Commit

Permalink
modified navbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@ganeshdeveloper1
ganeshdeveloper1 committed Dec 10, 2021
1 parent fc72809 commit 99b18be
Show file tree
Hide file tree
Showing 7 changed files with 121 additions and 92 deletions.
20 changes: 18 additions & 2 deletions src/components/About/About.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
position: relative;
}
.catNameH2 h2::after {
content: '';
content: "";
display: block;
height: 4px;
/* width: 130px; */
Expand Down Expand Up @@ -93,7 +93,7 @@
font-size: 20px;
}
.desc b::after {
content: '';
content: "";
display: block;
height: 2px;
width: 130px;
Expand All @@ -104,6 +104,22 @@
flex-direction: row;
}

.wikepedia-link {
margin-top: 10px;
padding: 5px;
background-color: rgb(59, 77, 117);
border-radius: 5px;
}

.wikepedia-link b {
color: rgb(15, 15, 15);
font-size: 15px;
}

.wikepedia-link:hover {
background-color: rgb(70, 91, 138);
}

.progress {
position: relative;
background-color: #d8d8d8;
Expand Down
76 changes: 40 additions & 36 deletions src/components/About/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,121 +1,125 @@
import React, { useEffect } from 'react'
import './About.css'
import React, { useEffect } from "react";
import "./About.css";

const About = ({
history: {
location: { state },
},
}) => {
useEffect(() => {
window.scrollTo(0, 0)
}, [])
window.scrollTo(0, 0);
}, []);

return (
<div className='about wrapper'>
<div className="about wrapper">
{state && (
<>
<div className='container'>
<img src={state.url} alt='fullimg' />
<div className="container">
<img src={state.url} alt="fullimg" />

{/* <h2>{state.name}</h2> */}
<div className='middleInfo'>
<div className='catNameH2'>
<div className="middleInfo">
<div className="catNameH2">
<h2>{state.name}</h2>
</div>
<div className='content para'>
<div className='topDesc'>
<div className="content para">
<div className="topDesc">
<div>
<p>
<b>Origin:</b> <br className='hidden' />
<b>Origin:</b> <br className="hidden" />
{state.org}
</p>
</div>
<div>
<p>
<b>Life_span:</b> <br className='hidden' />
<b>Life_span:</b> <br className="hidden" />
{state.life}
</p>
</div>
</div>
<div className='middleDesc'>
<div className='meterBox'>
<div className="middleDesc">
<div className="meterBox">
<p>
<b>Dog_friendly:</b>
{/* {state.friendly} */}
</p>
<div className='progress'>
<div className="progress">
<div
style={{
width: Math.round((state.friendly / 5) * 100) + '%',
width: Math.round((state.friendly / 5) * 100) + "%",
}}
className='progress-done'
className="progress-done"
></div>
</div>
</div>
<div className='meterBox'>
<div className="meterBox">
<p>
<b>Child_friendly:</b>
{/* {state.child_frd} */}
</p>
<div className='progress'>
<div className="progress">
<div
style={{
width: Math.round((state.child_frd / 5) * 100) + '%',
width: Math.round((state.child_frd / 5) * 100) + "%",
}}
className='progress-done'
className="progress-done"
></div>
</div>
</div>
<div className='meterBox'>
<div className="meterBox">
<p>
<b>Energy_Level:</b>
{/* {state.Energy} */}
</p>
<div className='progress'>
<div className="progress">
<div
style={{
width: Math.round((state.Energy / 5) * 100) + '%',
width: Math.round((state.Energy / 5) * 100) + "%",
}}
className='progress-done'
className="progress-done"
></div>
</div>
</div>
<div className='meterBox'>
<div className="meterBox">
<p>
<b>Intelligence:</b>
{/* {state.intell} */}
</p>
<div className='progress'>
<div className="progress">
<div
style={{
width: Math.round((state.intell / 5) * 100) + '%',
width: Math.round((state.intell / 5) * 100) + "%",
}}
className='progress-done'
className="progress-done"
></div>
</div>
</div>
</div>
<div className='bottomDesc'>
<div className="bottomDesc">
<div>
<p>
<b>Temperament:</b>
<br />
<span className='temp'>{state.temper}</span>
<span className="temp">{state.temper}</span>
</p>
</div>
</div>
</div>
</div>

<p className='desc para'>
<p className="desc para">
<b>Description:</b>
{state.desc}
</p>

<a href={state.wikepedia} className="wikepedia-link">
<b>Wikepedia</b>
</a>
</div>
</>
)}
</div>
)
}
);
};

export default About
export default About;
77 changes: 39 additions & 38 deletions src/components/Home/index.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,64 +1,64 @@
import React, { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import './Home.css'
import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import "./Home.css";

const Home = ({ pageNo, setPageNo }) => {
const [image, setImage] = useState([])
const [dataFull, setDataFull] = useState([])
const [searchString, setSearchString] = useState('')
const [image, setImage] = useState([]);
const [dataFull, setDataFull] = useState([]);
const [searchString, setSearchString] = useState("");
// const [pageNo, setPageNo] = useState(0)

const handleNext = () => {
setPageNo((prev) => prev + 1)
window.scrollTo(0, 0)
}
setPageNo((prev) => prev + 1);
window.scrollTo(0, 0);
};
const handlePrev = () => {
setPageNo((prev) => prev - 1)
window.scrollTo(0, 0)
}
setPageNo((prev) => prev - 1);
window.scrollTo(0, 0);
};

const handleSearch = () => {
fetch(
`https://api.thecatapi.com/v1/breeds?api_key=${process.env.REACT_APP_API_KEY}`
)
.then((res) => res.json())
.then((data) => setDataFull(data))
}
.then((data) => setDataFull(data));
};

useEffect(() => {
fetch(
`https://api.thecatapi.com/v1/breeds?limit=12&page=${pageNo}&order=Asc&api_key=${process.env.REACT_APP_API_KEY}`
)
.then((res) => res.json())
.then((data) => setImage(data))
}, [pageNo])
.then((data) => setImage(data));
}, [pageNo]);

return (
<div className='home'>
<div className='searchWrapper'>
<div className='search wrapper'>
<div className='input-link'>
<div className="home">
<div className="searchWrapper">
<div className="search wrapper">
<div className="input-link">
<h2>Search the name of Breed</h2>
<div className='searchBar'>
<div className="searchBar">
<input
name='cName'
type='text'
name="cName"
type="text"
value={searchString}
onChange={(e) => setSearchString(e.target.value.toLowerCase())}
onFocus={handleSearch}
placeholder='Eg: Abyssinian'
placeholder="Eg: Abyssinian"
/>

<i className='fa fa-search'></i>
<i className="fa fa-search"></i>
</div>
</div>
</div>
</div>

<div className='image'>
<h2 className='cats'>Cat's Lists</h2>
<div className='wrapper'>
<div className='imgWrapper'>
<div className="image">
<h2 className="cats">Cat's Lists</h2>
<div className="wrapper">
<div className="imgWrapper">
{image.length ? (
(searchString.length ? dataFull : image)
.filter((item) =>
Expand All @@ -69,7 +69,7 @@ const Home = ({ pageNo, setPageNo }) => {
item.image?.url && (
<Link
to={{
pathname: '/info',
pathname: "/info",
state: {
name: item.name,
desc: item.description,
Expand All @@ -81,24 +81,25 @@ const Home = ({ pageNo, setPageNo }) => {
Energy: item.energy_level,
intell: item.intelligence,
temper: item.temperament,
wikepedia: item.wikipedia_url,
},
}}
key={i}
>
<div className='catCard'>
<img src={item.image.url} alt='catimage' />
<div className='catName'>{item.name}</div>
<div className="catCard">
<img src={item.image.url} alt="catimage" />
<div className="catName">{item.name}</div>
</div>
</Link>
)
)
) : (
<p className='loadingImg'> Loading...</p>
<p className="loadingImg"> Loading...</p>
)}
</div>
{image.length && (
<div
className={`pagination ${searchString.length && 'pageHidden'}`}
className={`pagination ${searchString.length && "pageHidden"}`}
>
<button disabled={pageNo === 0} onClick={handlePrev}>
Prev
Expand All @@ -114,6 +115,6 @@ const Home = ({ pageNo, setPageNo }) => {
</div>
</div>
</div>
)
}
export default Home
);
};
export default Home;
Binary file removed src/components/Image/kitty.png
View file
Binary file not shown.
26 changes: 11 additions & 15 deletions src/components/Nav/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,24 @@
import React from 'react'
import cat1 from '../../img/twocat.png'
import cat2 from '../../img/threecatwow.png'
import { withRouter } from 'react-router-dom'
import React from "react";
import { withRouter } from "react-router-dom";
const Nav = ({ history }) => {
console.log(history)
console.log(history);
return (
<nav>
<div className='wrapper'>
<div className='nav'>
<div className="wrapper">
<div className="nav">
<div
onClick={() => history.goBack()}
className={`back ${
history.location.pathname === '/info' && 'visible'
history.location.pathname === "/info" && "visible"
}`}
>
back
<i class="fa fa-arrow-left" aria-hidden="true"></i>
</div>
<img className='navCat' src={cat2} alt='' />
<a href='/'>CATManual</a>
<img className='navCat' src={cat1} alt='' />
<a href="/">CATManual</a>
</div>
</div>
</nav>
)
}
);
};

export default withRouter(Nav)
export default withRouter(Nav);
Binary file removed src/img/halfface.png
View file
Binary file not shown.
Loading

0 comments on commit 99b18be

Please sign in to comment.