From 87b6dd45958889e4907170df5732c05acc3034f7 Mon Sep 17 00:00:00 2001
From: eloicasamayor <37459666+eloicasamayor@users.noreply.github.com>
Date: Mon, 18 Nov 2024 21:49:19 +0100
Subject: [PATCH] una mica de layout

---
 src/App.css          | 19 +++++++++++++++++++
 src/App.tsx          | 30 +++++++++++++++++-------------
 src/assets/world.jsx |  2 +-
 3 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/src/App.css b/src/App.css
index c9c94fd..c31da8b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,7 +1,26 @@
+#root {
+  display: flex;
+  flex-direction: column;
+}
+
 #world {
   width: "100%";
 }
 
+#country-info {
+  display: flex;
+}
+
+.country-flag {
+  width: 8rem;
+}
+
 .map {
   width: "100%";
 }
+
+@media (min-width: 1250px) {
+  #root {
+    flex-direction: row;
+  }
+}
diff --git a/src/App.tsx b/src/App.tsx
index 11b0b82..131a6a5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -65,19 +65,23 @@ function App() {
     <>
       <Map />
       {countryInfo && (
-        <div>
-          <h2>{country}</h2>
-          <p>
-            <strong>Official name:</strong> {countryInfo.name.official}
-          </p>
-          <p>
-            <strong>Capital:</strong> {countryInfo?.capital}
-          </p>
-          <p>
-            <strong>Languages:</strong>{" "}
-            {Object.values(countryInfo?.languages).map((l) => l + ", ")}
-          </p>
-          <img width={"100%"} src={countryInfo.flags.svg} />
+        <div id="country-info">
+          <div>
+            <h2>{country}</h2>{" "}
+            <img className="country-flag" src={countryInfo.flags.svg} />
+          </div>
+          <div>
+            <p>
+              <strong>Official name:</strong> {countryInfo.name.official}
+            </p>
+            <p>
+              <strong>Capital:</strong> {countryInfo?.capital}
+            </p>
+            <p>
+              <strong>Languages:</strong>{" "}
+              {Object.values(countryInfo?.languages).map((l) => l + ", ")}
+            </p>
+          </div>
         </div>
       )}
     </>
diff --git a/src/assets/world.jsx b/src/assets/world.jsx
index 15c8804..6da6e83 100644
--- a/src/assets/world.jsx
+++ b/src/assets/world.jsx
@@ -6,7 +6,7 @@ export function Map() {
       className="map"
       xmlns="http://www.w3.org/2000/svg"
       width="100%"
-      viewBox="0 0 1000 1000"
+      viewBox="0 0 1050 650"
     >
       <path
         d="m 479.68275,331.6274 -0.077,0.025 -0.258,0.155 -0.147,0.054 -0.134,0.027 -0.105,-0.011 -0.058,-0.091 0.006,-0.139 -0.024,-0.124 -0.02,-0.067 0.038,-0.181 0.086,-0.097 0.119,-0.08 0.188,0.029 0.398,0.116 0.083,0.109 10e-4,0.072 -0.073,0.119 z"