WIP: Implement frontend

assets/styles/components/autocomplete.css

@@ -0,0 +1,33 @@
+.autocomplete {
+    @apply relative w-full;
+}
+
+.autocomplete[data-loading="true"]:after {
+    @apply block absolute top-0 right-0;
+    @apply absolute w-4 h-4 rounded-full right-0 mr-4;
+    content: "";
+    border: 3px solid rgba(0, 0, 0, 0.12);
+    border-right: 3px solid rgba(0, 0, 0, 0.48);
+    top: 50%;
+    transform: translateY(-50%);
+    animation: rotate 1s infinite linear;
+}
+
+.autocomplete-icon {
+    @apply absolute top-1/2 right-0 transform -translate-y-1/2 mr-4;
+}
+.autocomplete[data-loading="true"] .autocomplete-icon {
+    @apply hidden;
+}
+
+.autocomplete-result-list {
+    @apply bg-white shadow-md;
+}
+
+.autocomplete-result {
+    @apply p-2;
+}
+.autocomplete-result:hover,
+.autocomplete-result[aria-selected="true"] {
+    @apply bg-gray-200;
+}

assets/styles/components/button.css

@@ -0,0 +1,7 @@
+.btn {
+    @apply inline-flex justify-center rounded-lg text-sm uppercase font-semibold py-2.5 px-4 bg-primary text-white hover:bg-primary/80 w-full;
+}
+
+.btn--secondary {
+    @apply bg-secondary text-gray-800 hover:bg-secondary/80;
+}

assets/styles/components/datepicker.css

@@ -0,0 +1,13 @@
+@import "flatpickr/dist/flatpickr.css";
+
+.flatpickr-day.selected,
+.flatpickr-day.selected:hover,
+.flatpickr-day.selected:focus {
+    background-color: theme('colors.secondary');
+    border-color: theme('colors.secondary');
+}
+
+.flatpickr-monthDropdown-months,
+.flatpickr-current-month .flatpickr-monthDropdown-months {
+    @apply form-select pt-0 pb-0 focus:outline-none focus:shadow-none;
+}

assets/styles/components/menu.css

@@ -0,0 +1,28 @@
+.menu {
+    @apply flex items-center space-x-4 h-8;
+}
+
+.menu--mobile {
+    @apply flex-col space-x-0 h-auto divide-y divide-gray-200;
+}
+
+.menu--mobile li {
+    @apply py-4 w-full;
+}
+
+.menu a {
+    @apply uppercase hover:text-slate-700 text-slate-900 text-sm lg:text-base;
+}
+
+.menu--mobile a {
+    @apply text-lg;
+}
+
+.menu .current > a,
+.menu .active > a {
+    @apply text-slate-900 font-bold;
+}
+
+.menu .icon-link {
+    @apply flex items-center space-x-2;
+}

assets/styles/components/toast.css

@@ -0,0 +1,20 @@
+@import "toastify-js/src/toastify.css";
+
+.toastify {
+    @apply shadow-lg rounded;
+}
+
+.toastify--success {
+    @apply text-gray-100;
+    background: theme('colors.emerald.600');
+}
+
+.toastify--warning {
+    @apply text-gray-100;
+    background: theme('colors.red.600');
+}
+
+.toastify--info {
+    @apply text-gray-100;
+    background: theme('colors.blue.600');
+}