tidy up assets files.

src/assets/components.css

@@ -1,3 +1,4 @@
+/* loading */
 .loader {
   width: 64px;
   height: 64px;
@@ -86,3 +87,54 @@
   background: #009688;
   left: 44px;
 }
+
+/* components */
+/* Scrollbar */
+@layer utilities {
+  .scrollbar::-webkit-scrollbar {
+    @apply w-2 h-2
+  }
+
+  .scrollbar::-webkit-scrollbar-track {
+    @apply bg-transparent rounded-full
+  }
+
+  .scrollbar::-webkit-scrollbar-thumb {
+    @apply bg-primary rounded-full
+  }
+
+  .scrollbar::-webkit-scrollbar-thumb:hover {
+    @apply bg-primary
+  }
+}
+
+/* button */
+.btn {
+@apply inline-block rounded-full text-sm font-medium text-center align-middle transition-colors duration-300
+}
+.btn-sm {
+@apply px-5 py-2
+}
+.btn-lg {
+  @apply px-4 py-2.5
+}
+.btn-c-primary {
+  @apply text-neutral-50 bg-primary border border-primary hover:bg-neutral-50 hover:text-primary hover:border  hover:border-primary active:border active:ring focus:outline-none focus:border-primary focus:ring
+}
+.btn-disable {
+  @apply border border-neutral-200 bg-neutral-50 text-neutral-200
+}
+.btn-neutral {
+  @apply text-neutral-700 bg-neutral-100 border border-neutral-500  hover:bg-neutral-500 hover:text-neutral-100 hover:border-neutral-300 focus:outline-none focus:border-neutral-500 focus:ring active:ring
+}
+
+/* button toggle */
+.btn-toggle-content {
+  @apply flex justify-between items-center w-full rounded-full bg-neutral-100 text-neutral-500
+}
+.btn-toggle-item {
+  @apply text-sm leading-5 font-medium text-center justify-center w-1/2 px-7 py-1.5 rounded-full cursor-pointer transition-all duration-200
+}
+.btn-toggle-show {
+  @apply bg-primary text-neutral-10 shadow-md
+}