Challenge

src/components/App.tsx

@@ -1,12 +1,31 @@
-import React, { FC } from 'react'
+import React, { FC  , useState} from 'react'
 import styled from '@emotion/styled'
 import Header from './Header'
+import SearchBox from './SearchBox/SearchBox'
+import DogImages from './DogImages/DogImages'
 
 const App: FC = () => {
+
+  const [dogImages, setDogImages] = useState([]);
+
+  const handleSubmit = async (searchText) => {
+    try {
+      const response = await fetch(`https://dog.ceo/api/breed/${searchText}/images/random/10`);
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+      const data = await response.json();
+      setDogImages(data.message);
+    } catch (error) {
+      console.error('Error:', error);
+    }
+  };
+
   return (
     <Container>
       <Header />
-      {/* Happy coding! */}
+      <SearchBox onHandleSubmit={handleSubmit} />
+      <DogImages images = {dogImages}/>
     </Container>
   )
 }

src/components/DogImages/DogImages.css

@@ -0,0 +1,45 @@
+.images{
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    justify-content: space-around;
+    margin: 20px 0px;
+}
+
+.image-div{
+    width: 100%;
+    margin: 40px 0px;
+}
+
+span{
+    margin: 30px;
+    font-family: Nunito Sans;
+        font-size: 24px;
+        font-weight: 700;
+        line-height: 16px;
+        letter-spacing: 0px;
+        text-align: left;
+}
+
+.favorite{
+    border-top: 1px solid #DADADA;
+}
+
+.image{
+    width: 8.5em;
+    height: 8.5em; 
+    margin: 10px 0px;
+    border-radius: 5px;
+    z-index: 0;
+    /* position: absolute; */
+}
+
+.img-container{
+    position: relative;
+}
+.like{
+    right: 8%;
+    bottom: 12%;
+    position: absolute;
+    z-index: 1;
+}

src/components/DogImages/DogImages.tsx

@@ -0,0 +1,49 @@
+import React, {useState} from 'react';
+import './DogImages.css'
+import rlike from '../../assets/icons/red-heart-icon.png'
+import wlike from '../../assets/icons/white-heart-icon.png'
+
+const DogImages = ({images }) => {
+
+    const [likedImages, setLikedImages] = useState([]);
+
+    const toggleLike = (imageUrl) => {
+    if (likedImages.includes(imageUrl)) {
+        setLikedImages(likedImages.filter((url) => url !== imageUrl));
+    } 
+    else {
+        setLikedImages([...likedImages, imageUrl]);
+        }
+    };
+
+    return (
+        <div className='image-div'>
+          <div className='images'>
+            {images.map((image, index) => (
+              <div key={index} className = "img-container">
+                <img src={image}  className='image' alt={`${index}` } />
+                <button onClick={() => toggleLike(image)}>
+                {likedImages.includes(image) ? 
+                    (<img src = {rlike} className="like" />) :
+                    (<img src = {wlike} className="like" />)
+                }
+                </button>
+              </div>
+            ))}
+          </div>
+          <div className="favorite"></div>
+          <p><img src={rlike} alt="" /><span>Favorites</span> </p>
+          <div className="images ">
+
+            {likedImages.map((image, index) => (
+              <div key={index} className = "img-container">
+                <img src={image}  className='image' alt={`${index}` } />
+                <img src = {rlike} className="like" onClick={() => toggleLike(image)}/>
+              </div>
+            ))}
+          </div>
+        </div>
+    );
+};
+
+export default DogImages;

src/components/SearchBox/SearchBox.css

@@ -0,0 +1,42 @@
+.input{
+    background-color: #f7f7f7;
+    width: 75%;
+    border : 0px transparent;
+    height: 3em;
+    border-radius:4px ;
+    outline: none;
+}
+
+.searchBox{
+    width: 100%;
+    display: inline-flex; 
+    margin-top : 5%;
+
+}
+
+.button{
+    width: 25%;
+    height: 3em;
+    padding:10px 20px;
+    background-color: #0794E3;
+    border: none;
+    color : white;
+    font-weight: 700;
+    border-radius: 4px;
+    display: inline-flex;
+    align-items: center;
+    cursor:pointer;
+    justify-content: center;
+
+}
+.input:focus {
+    box-shadow: 0 0 4px rgba(0, 123, 255, 0.5);
+    padding : 0px 10px;
+
+}
+.img{
+    width: 20px;
+    height: 20px;
+    margin-right: 10px;
+
+}

src/components/SearchBox/SearchBox.tsx

@@ -0,0 +1,27 @@
+import React , {useState} from 'react'
+import './SearchBox.css'
+import  search  from '../../assets/icons/search-icon.png'
+
+
+
+const SearchBox = ({onHandleSubmit}) => {
+
+  const [inputValue , setInputValue] = useState(''); 
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onHandleSubmit(inputValue);
+  }
+
+  return (
+    <form className='searchBox' onSubmit = {handleSubmit}>
+        <input type="text" className='input' value={inputValue} onChange={(e) => setInputValue(e.target.value)}/>
+        <button className='button' type='submit'>
+            <img src={search} alt="" className='img'/>
+            <div className="search">Search</div>
+        </button>
+    </form>
+  )
+}
+
+export default SearchBox

yarn.lock

@@ -10214,10 +10214,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@^3.6.4:
-  version "3.9.9"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.9.tgz#e69905c54bc0681d0518bd4d587cc6f2d0b1a674"
-  integrity sha512-kdMjTiekY+z/ubJCATUPlRDl39vXYiMV9iyeMuEuXZh2we6zz80uovNN2WlAxmmdE/Z/YQe+EbOEXB5RHEED3w==
+typescript@4.5.4:
+  version "4.5.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.4.tgz#a17d3a0263bf5c8723b9c52f43c5084edf13c2e8"
+  integrity sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg==
 
 uglify-js@3.4.x:
   version "3.4.10"