Add Checkbox Component

Signed-off-by: praveenjuge <[email protected]>
praveenjuge · Jan 9, 2022 · 827159e · 827159e
1 parent b62dd8a
commit 827159e
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 26 deletions.
diff --git a/config.toml b/config.toml
@@ -1,10 +1,10 @@
-languageCode = 'en-us'
-title = "Myna UI"
 baseURL = "https://mynaui.com/"
+title = "Myna UI"
+languageCode = "en-us"
 
-disableKinds = ["taxonomy", "taxonomyTerm"]
 enableGitInfo = true
 enableRobotsTXT = true
+disableKinds = ["taxonomy", "taxonomyTerm"]
 
 [params]
   description = "Perfect UI Components and Templates. Made with TailwindCSS. Open Source. Fully Responsive and Accessible. Free."

diff --git a/content/_index.html b/content/_index.html
@@ -82,31 +82,39 @@
   </div>
   <p class="mb-2 italic font-medium text-gray-600">Form</p>
   <div class="grid grid-cols-1 gap-4 mx-auto mb-10 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
-    {{< elementlink link="/input">}}
-      <div class="w-1/2 h-6 transition bg-gray-100 border border-gray-200 rounded group-hover:border-gray-300">
-      </div>
+    {{< elementlink link="/checkbox">}}
+      <svg class="w-8 h-8 transition rounded fill-gray-300 group-hover:fill-gray-400" viewBox="0 0 256 256">
+        <path
+          d="M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm-30.5,77.8-58.6,56a8.1,8.1,0,0,1-5.6,2.2,7.9,7.9,0,0,1-5.5-2.2l-29.3-28a8,8,0,1,1,11-11.6l23.8,22.7,53.2-50.7a8,8,0,0,1,11,11.6Z">
+        </path>
+      </svg>
       {{< /elementlink>}}
-        {{< elementlink link="/radio">}}
-          <div
-            class="grid w-8 h-8 transition bg-gray-200 border border-gray-200 rounded-full group-hover:border-gray-300 place-items-center">
-            <div class="w-3 h-3 transition bg-white border border-gray-200 rounded-full group-hover:border-gray-300">
-            </div>
+        {{< elementlink link="/input">}}
+          <div class="w-1/2 h-6 transition bg-gray-100 border border-gray-200 rounded group-hover:border-gray-300">
           </div>
           {{< /elementlink>}}
-            {{< elementlink link="/select">}}
+            {{< elementlink link="/radio">}}
               <div
-                class="grid w-1/2 h-6 px-1.5 items-center transition bg-gray-100 border border-gray-200 rounded place-items-end group-hover:border-gray-300">
-                <svg class="w-2.5 h-2.5 stroke-gray-400 fill-transparent" viewBox="0 0 256 256">
-                  <polyline points="208 96 128 176 48 96" stroke-linecap="round" stroke-linejoin="round"
-                    stroke-width="36"></polyline>
-                </svg>
+                class="grid w-8 h-8 transition bg-gray-200 border border-gray-200 rounded-full group-hover:border-gray-300 place-items-center">
+                <div
+                  class="w-3 h-3 transition bg-white border border-gray-200 rounded-full group-hover:border-gray-300">
+                </div>
               </div>
               {{< /elementlink>}}
-                {{< elementlink link="/textarea">}}
+                {{< elementlink link="/select">}}
                   <div
-                    class="w-1/2 h-12 transition bg-gray-100 border border-gray-200 rounded group-hover:border-gray-300">
+                    class="grid w-1/2 h-6 px-1.5 items-center transition bg-gray-100 border border-gray-200 rounded place-items-end group-hover:border-gray-300">
+                    <svg class="w-2.5 h-2.5 stroke-gray-400 fill-transparent" viewBox="0 0 256 256">
+                      <polyline points="208 96 128 176 48 96" stroke-linecap="round" stroke-linejoin="round"
+                        stroke-width="36"></polyline>
+                    </svg>
                   </div>
                   {{< /elementlink>}}
+                    {{< elementlink link="/textarea">}}
+                      <div
+                        class="w-1/2 h-12 transition bg-gray-100 border border-gray-200 rounded group-hover:border-gray-300">
+                      </div>
+                      {{< /elementlink>}}
   </div>
   <p class="mb-2 italic font-medium text-gray-600">Marketing</p>
   <div class="grid grid-cols-1 gap-4 mx-auto mb-10 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">

diff --git a/content/avatar-group/reverse-order.html b/content/avatar-group/reverse-order.html
@@ -2,24 +2,24 @@
 wrapper: "p-4 flex items-end justify-start space-x-4 overflow-x-auto md:justify-center"
 weight: 2
 ---
-<div class="z-0 flex -space-x-3">
+<div class="flex flex-row-reverse justify-end -space-x-3 space-x-reverse">
   <div
-    class="relative z-30 flex items-center justify-center flex-shrink-0 w-8 h-8 text-sm font-bold text-gray-800 uppercase bg-gray-100 rounded-full select-none ring ring-white">
+    class="relative flex items-center justify-center flex-shrink-0 w-8 h-8 text-sm font-bold text-gray-800 uppercase bg-gray-100 rounded-full select-none ring ring-white">
     <img class="object-cover object-center w-full h-full rounded-full"
       src="https://source.boringavatars.com/beam/5?square">
   </div>
   <div
-    class="relative z-20 flex items-center justify-center flex-shrink-0 w-8 h-8 text-sm font-bold text-gray-800 uppercase bg-gray-100 rounded-full select-none ring ring-white">
+    class="relative flex items-center justify-center flex-shrink-0 w-8 h-8 text-sm font-bold text-gray-800 uppercase bg-gray-100 rounded-full select-none ring ring-white">
     <img class="object-cover object-center w-full h-full rounded-full"
       src="https://source.boringavatars.com/beam/6?square">
   </div>
   <div
-    class="relative z-10 flex items-center justify-center flex-shrink-0 w-8 h-8 text-sm font-bold text-gray-800 uppercase bg-gray-100 rounded-full select-none ring ring-white">
+    class="relative flex items-center justify-center flex-shrink-0 w-8 h-8 text-sm font-bold text-gray-800 uppercase bg-gray-100 rounded-full select-none ring ring-white">
     <img class="object-cover object-center w-full h-full rounded-full"
       src="https://source.boringavatars.com/beam/7?square">
   </div>
   <div
-    class="relative z-0 flex items-center justify-center flex-shrink-0 w-8 h-8 text-sm font-bold text-gray-800 uppercase bg-gray-100 rounded-full select-none ring ring-white">
+    class="relative flex items-center justify-center flex-shrink-0 w-8 h-8 text-sm font-bold text-gray-800 uppercase bg-gray-100 rounded-full select-none ring ring-white">
     <img class="object-cover object-center w-full h-full rounded-full"
       src="https://source.boringavatars.com/beam/8?square">
   </div>

diff --git a/content/checkbox/basic.html b/content/checkbox/basic.html
@@ -0,0 +1,9 @@
+---
+wrapper: "p-4 grid place-items-center"
+forms: true
+---
+<div class="inline-flex items-center space-x-1.5">
+  <input id="basic" type="checkbox"
+    class="text-blue-600 transition border-gray-300 rounded cursor-pointer focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75">
+  <label for="basic" class="text-sm text-gray-500 truncate cursor-pointer">Are you ready?</label>
+</div>
diff --git a/content/checkbox/disabled.html b/content/checkbox/disabled.html
@@ -0,0 +1,9 @@
+---
+wrapper: "p-4 grid place-items-center"
+forms: true
+---
+<div class="inline-flex items-center space-x-1.5">
+  <input id="disabled" type="checkbox" disabled
+    class="text-blue-600 transition border-gray-300 rounded cursor-pointer focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75">
+  <label for="disabled" class="text-sm text-gray-500 truncate cursor-pointer">Are you ready?</label>
+</div>
diff --git a/content/checkbox/error.html b/content/checkbox/error.html
@@ -0,0 +1,12 @@
+---
+wrapper: "p-4 grid place-items-center"
+forms: true
+---
+<div class="space-y-1">
+  <div class="inline-flex items-center space-x-1.5">
+    <input id="error" type="checkbox" checked
+      class="text-blue-600 transition border-gray-300 rounded cursor-pointer focus:border-blue-600 focus:ring-blue-600 disabled:cursor-not-allowed disabled:bg-gray-200 disabled:opacity-75">
+    <label for="error" class="text-sm text-gray-500 truncate cursor-pointer">Are you ready?</label>
+  </div>
+  <p class="text-xs text-red-600">I don't think you are ready.</p>
+</div>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
@@ -10,8 +10,7 @@
       </svg>
     </a>
     <div class="flex items-center justify-end space-x-1">
-      <a target="_blank" rel="noopener noreferrer"
-        href="https://www.figma.com/community/file/1053968858851454554/Myna-UI"
+      <a target="_blank" rel="noopener noreferrer" href="https://www.figma.com/@praveenjuge"
         class="text-gray-50 rounded flex items-center justify-center space-x-1.5 px-2.5 py-1.5 text-sm font-semibold transition focus:outline-none focus:ring appearance-none select-none font-alegreya bg-gray-900 hover:bg-black focus:ring-gray-400">
         <svg aria-hidden="true" class="flex flex-shrink-0 w-4 h-4" viewBox="0 0 10 10">
           <path