Krishna

zostel/src/App.js

@@ -1,23 +1,11 @@
 import logo from './logo.svg';
 import './App.css';
+import ExpDestination from './Components/destinations/ExpDestinations';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <ExpDestination />
     </div>
   );
 }

zostel/src/Components/destinations/ExpDestinations.js

@@ -0,0 +1,42 @@
+// Explore Destinations
+import data from "../../demo.json";
+import { useState } from "react";
+// now i'm working
+
+
+
+function ExpDestination(){
+
+    let [item, setItem] = useState("")
+
+    console.log(data.Destinations);
+    return (
+        <>
+         <h1>Explore Destinations</h1>
+        <div className="des" style={{display: "flex", flexWrap:"wrap", justifyContent:"center", alignItems:"center"}}>
+
+            {
+                data.Destinations.map((e) => {
+                    return (
+                        <div style={{
+                            backgroundImage: `url(${e.img})`, 
+                            width: "300px",
+                            height: "300px",
+                            margin: "8px",
+                            display: "flex",
+                            padding: "10px",
+                            backgroundSize: "cover",
+                            borderRadius: "10px"                    
+                            }}>
+                            {e.name}
+                        </div>
+                        // <img src={e.img}></img>
+                    )
+                })
+            }
+        </div>
+        </>
+    )
+
+}
+export default ExpDestination;