una mica de layout

eloicasamayor · Nov 18, 2024 · 87b6dd4 · 87b6dd4
1 parent 1ba9690
commit 87b6dd4
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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"