fixed conflict

package.json

@@ -11,7 +11,11 @@
  "@types/lodash": "^4.14.182",
  "@types/react": "^18.0.6",
  "@types/react-dom": "^18.0.2",
+<<<<<<< HEAD
  "add": "^2.0.6",
+=======
+ "@types/react-simple-maps": "^1.0.8",
+>>>>>>> 51a6dd0 (changed the layout and seprated the components)
  "axios": "^0.27.2",
  "date-fns": "^2.28.0",
  "downloadjs": "^1.4.7",

src/plays/countries-statics/CountriesGrid.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function CountriesGrid() {
+ return (
+ <div className="my-4 border-2 ">
+ <div>Countries Grid</div>
+ </div>
+ );
+}

src/plays/countries-statics/CountriesStatics.jsx

@@ -1,5 +1,7 @@
 import PlayHeader from "common/playlists/PlayHeader";
-import { BsSearch } from "react-icons/bs";
+import Map from "./Map";
+import SearchAndFilter from "./SearchAndFilter";
+import CountriesGrid from "./CountriesGrid";
 import "./countriesStatics.css";
 
 function CountriesStatics(props) {
@@ -11,18 +13,17 @@ function CountriesStatics(props) {
  <PlayHeader play={props} />
  <div className="play-details-body">
  {/* Your Code Starts Here */}
- <div className="w-full max-w-5xl mx-auto my-4 ">
- <div className="relative max-w-xl mx-auto ">
- <input
- type="text"
- placeholder="Search...."
- className="w-full rounded-md border-0 outline-0"
- />
- <button className="absolute top-1 right-1 bg-stone-300 w-10 h-8">
- <BsSearch className="text-xl mx-auto" />
- </button>
- </div>
- </div>
+ <h1 className="text-4xl mt-4 font-bold text-center capitalize">
+ Search on map
+ </h1>
+ <h2 className="text-xl text-center">
+ Click the country on the map to pull the country specific
+ statistics.
+ </h2>
+ <SearchAndFilter />
+ <Map />
+ <CountriesGrid />
+
  {/* Your Code Ends Here */}
  </div>
  </div>

src/plays/countries-statics/Readme.md

@@ -1,6 +1,6 @@
 # countries-statics
 
-Project fetch countries statics such name, currency, demographics etc. Project uses a rest api to pull the information. Project offer many functionalities such as search specific country or sort by region. It's must project if you want to learn with apis and pratice y w
+Fetch country specific statistic such as demographics by single click on map.
 
 ## Play Demographic
 
@@ -11,8 +11,8 @@ Project fetch countries statics such name, currency, demographics etc. Project u
 
 - User: deepak8717
 - Gihub Link: https://github.com/deepak8717
-- Blog: 
-- Video: 
+- Blog:
+- Video:
 
 ## Implementation Details
 

src/plays/countries-statics/SearchAndFilter.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { BsSearch } from "react-icons/bs";
+
+export default function SearchAndFilter() {
+ return (
+ <div className=" max-w-3xl mt-2 mx-auto flex flex-col md:flex-row justify-between">
+ <div className="relative w-full max-w-xl">
+ <input
+ type="text"
+ placeholder="Search...."
+ className="w-full rounded-md border-0 outline-0"
+ />
+ <button className="absolute top-1 right-1 bg-stone-300 w-10 h-8">
+ <BsSearch className="text-xl mx-auto" />
+ </button>
+ </div>
+ <div className="text-center">Area drow down</div>
+ </div>
+ );
+}