Visual polish

prutya · Oct 17, 2023 · 4685125 · 4685125
1 parent a7a4388
commit 4685125
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 15 deletions.
diff --git a/src/app/page.js b/src/app/page.js
@@ -35,19 +35,24 @@ const COUNTRIES = [
 
 export default function Page() {
   return (
-    <>
-      <h1>{"Multi-Select Dropdown"}</h1>
-      <form action="/api" method="post">
-        <MultiSelectDropdown
-          formFieldName={"countries"}
-          options={COUNTRIES}
-          onChange={(selectedCountries) => {
-            console.debug("selectedCountries", selectedCountries);
-          }}
-          prompt="Select one or more countries"
+    <main className="w-full max-w-xl mx-auto">
+      <h1 className="text-3xl mt-12">{"Multi-Select Dropdown"}</h1>
+      <form action="/api" method="post" className="mt-5">
+        <div>
+          <MultiSelectDropdown
+            formFieldName={"countries"}
+            options={COUNTRIES}
+            onChange={(selectedCountries) => {
+              console.debug("selectedCountries", selectedCountries);
+            }}
+            prompt="Select one or more countries"
+          />
+        </div>
+        <input
+          type="submit"
+          className="bg-blue-500 text-white rounded px-5 py-2 mt-5 cursor-pointer"
         />
-        <input type="submit" />
       </form>
-    </>
+    </main>
   );
 }
diff --git a/src/components/MultiSelectDropdown.jsx b/src/components/MultiSelectDropdown.jsx
@@ -66,14 +66,14 @@ export default function MultiSelectDropdown({
     <label className="relative">
       <input type="checkbox" className="hidden peer" />
 
-      <div className="cursor-pointer after:content-['▼'] after:text-xs after:ml-1 after:inline-flex after:items-center peer-checked:after:-rotate-180 after:transition-transform">
+      <div className="cursor-pointer after:content-['▼'] after:text-xs after:ml-1 after:inline-flex after:items-center peer-checked:after:-rotate-180 after:transition-transform inline-flex border rounded px-5 py-2">
         {prompt}
         {isJsEnabled && selectedOptions.length > 0 && (
-          <span className="text-blue-500">{` (${selectedOptions.length} selected)`}</span>
+          <span className="ml-1 text-blue-500">{`(${selectedOptions.length} selected)`}</span>
         )}
       </div>
 
-      <div className="absolute bg-white border transition-opacity opacity-0 pointer-events-none peer-checked:opacity-100 peer-checked:pointer-events-auto">
+      <div className="absolute bg-white border transition-opacity opacity-0 pointer-events-none peer-checked:opacity-100 peer-checked:pointer-events-auto w-full max-h-60 overflow-y-scroll">
         {isJsEnabled && (
           <ul>
             <li>