diff --git a/src/components/App.tsx b/src/components/App.tsx index e8c7d74..626feb8 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -1,21 +1,82 @@ -import React, { FC } from 'react' -import styled from '@emotion/styled' -import Header from './Header' +'use client' +import React, { useEffect, useState } from 'react'; +import './script.css' +import Favorite from './Favorite'; -const App: FC = () => { - return ( - -
- {/* Happy coding! */} - - ) -} +export default function Home() { + const [books, setBooks] = useState([]); + const [count, setcount] = useState(0); + const [input, setinput] = useState("hound"); + const [fvrt, setfvrt] = useState(false); + const [list,setlist] = useState([]); + + const handleinput= event =>{ + setinput(event.target.value); + }; + function submit(){ + apicall(); + } + function flist(fav){ + setfvrt(!fvrt); + setlist([...list,fav]); + console.log(list); + } +// https://dog.ceo/api/breed/hound/images + async function apicall() { + try { + const response = await fetch(`https://dog.ceo/api/breed/${input}/images`); + const data = await response.json(); + setBooks(data); + console.log(data); + } catch (error) { + console.error('Error fetching data:', error); + } + } -const Container = styled.div({ - margin: '0 auto', - height: '100%', - width: '560px', - paddingTop: '60px', -}) + useEffect(() => { + apicall(); + }, []); -export default App + return ( +
+
+

Dogs breed

+ + + +
+
+ + + +
+
+ {/* Check if books.data exists before accessing it */} + + {books.message && books.message.slice(0,10).map((book,index) => + { + return ( + <> +
+ + flist(book)}> + + + + +
+ + ) + + })} +
+
+ +
+ + ); +} diff --git a/src/components/Favorite.tsx b/src/components/Favorite.tsx new file mode 100644 index 0000000..7a41009 --- /dev/null +++ b/src/components/Favorite.tsx @@ -0,0 +1,31 @@ +import React from 'react' +import './script.css'; + +const Favorite = (props) => { + console.log(props.props); + return ( + <> +
+ + + +

Favorites

+ +
+ {props.props && props.props.map((img)=>( + <> + + + + + + ) + + )} +
+
+ + ) +} + +export default Favorite \ No newline at end of file diff --git a/src/components/script.css b/src/components/script.css new file mode 100644 index 0000000..8d0e033 --- /dev/null +++ b/src/components/script.css @@ -0,0 +1,94 @@ +.nav-head{ + display: flex; + height: 70px; + /* background-color: aliceblue; */ + text-align: center; + align-items: center; + justify-content: space-between; +} +.nav-head svg{ + height: 20px; + width: 20px; + cursor: pointer; +} +.dog-img img{ + height: 250px; + width: 250px; + margin: 15px; + /* padding: 20px; */ + +} +.dog-box{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; +} +.search-bar input{ + height: 36px; + width: 560px; + border-radius: 4px; + border: none; + background-color: #F7F7F7; + outline: none; + margin-left: 10px; + width: 90%; +} +.search-bar button{ + height: 36px; + width: 105px; + background-color: #279EFF; + color: #FFFF; + border: none; + border-radius: 4px; + font-style: "Nunito Sans"; + font-weight: 700; + text-align: center; + font-size: 14px; + line-height: 19.1px; + cursor: pointer; +} +.search-bar button svg{ + height: 20px; + width: 20px; + +} +.dog-img svg{ + height: 20px; + width: 20px; + position: relative; + top: -20px; + left: -50px; + border: white; + outline: white; + cursor: pointer; +} +.hr{ + height: 1px; + background-color: #DADADA; + width: 98%; + margin-left: 10px; +} +.fmain{ + font-family: Nunito Sans; +font-size: 24px; +font-weight: 700; +line-height: 16px; +letter-spacing: 0px; +text-align: left; +color: #000000; +} +.fvrt-nav svg{ + height: 25px; + width: 25px; + margin-right: 15px; + position: relative; + top: 10px; +} +.fvrt-nav{ + display: flex +} +.favimg svg{ + position: relative; + top: -20px; +} \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 9966b48..ba58c4f 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,7 +3,7 @@ import { render } from 'react-dom' import { Provider } from 'react-redux' import store from './redux/store' import App from './components/App' -import './reset.scss' +// import './reset.scss' render( diff --git a/src/reset.scss b/src/reset.scss deleted file mode 100644 index 5840053..0000000 --- a/src/reset.scss +++ /dev/null @@ -1,44 +0,0 @@ -html { - min-height: 100vh; -} - -body { - margin: 0; - font-family: 'Nunito Sans', Arial, Helvetica, sans-serif; - font-size: 100%; - height: 100vh; - - #root { - height: 100%; - } - - * { - box-sizing: border-box; - -webkit-tap-highlight-color: rgba(255, 255, 255, 0); - -webkit-tap-highlight-color: transparent; - } - - a { - font-family: inherit; - text-decoration: none; - } - - h1, - h2, - h3, - h4, - h5, - h6 { - font-family: inherit; - text-decoration: none; - font-style: normal; - } - - h1 { - margin: 0px; - } - - button { - padding: 0px; - } -}