add flags

index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Postgait</title>
     <style>
+      @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Color+Emoji&display=swap');
       @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
     </style>
   </head>

src/App.tsx

@@ -25,25 +25,25 @@ import {
 
 const counties = [
   {
-    value: "next.js",
-    label: "Next.js",
-  },
-  {
-    value: "sveltekit",
-    label: "SvelteKit",
-  },
-  {
-    value: "nuxt.js",
-    label: "Nuxt.js",
-  },
-  {
-    value: "remix",
-    label: "Remix",
-  },
-  {
-    value: "astro",
-    label: "Astro",
+    value: "+966",
+    label: "🇸🇦 +966",
   },
+  // {
+  //   value: "sveltekit",
+  //   label: "SvelteKit",
+  // },
+  // {
+  //   value: "nuxt.js",
+  //   label: "Nuxt.js",
+  // },
+  // {
+  //   value: "remix",
+  //   label: "Remix",
+  // },
+  // {
+  //   value: "astro",
+  //   label: "Astro",
+  // },
 ]
 
 function App() {
@@ -117,7 +117,9 @@ export function ComboboxDemo() {
           className="justify-between text-xs"
         >
           {value
-            ? counties.find((country) => country.value === value)?.label
+            ? <span><span className='emoji'>{counties.find((country) => country.value === value)?.label.split(" ")[0]}</span> 
+              <span>{counties.find((country) => country.value === value)?.label.split(" ")[1]}</span>
+            </span>
             : "🏳️"}
          <svg xmlns="http://www.w3.org/2000/svg" className='size-5' viewBox="0 0 24 24">
          <path fill="currentColor" d="m7 10l5 5l5-5z"/>

src/index.css

@@ -8,6 +8,11 @@ html, body, #root {
 body {
     font-family: "Inter", sans-serif;
 }
+
+.emoji {
+  font-family: "Noto Color Emoji", "Inter";
+}
+
 @layer base {
   :root {
         --background: 0 0% 100%;