[TASK] add status to boat

frontend/scss/app.scss

@@ -8,3 +8,4 @@
 @import 'components/links';
 @import 'components/input';
 @import 'components/alert';
+@import 'components/status';

frontend/scss/components/_input.scss

@@ -1,3 +1,13 @@
 .input {
   @apply relative block w-full border-0 py-1.5 px-2 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:z-10 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6;
 }
+
+select {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right .75rem center;
+  background-size: 16px 12px;
+  background-color: white;
+  -webkit-appearance: none; 
+  appearance: none;
+}

frontend/scss/components/_status.scss

@@ -0,0 +1,15 @@
+.status {
+  @apply inline-block w-[12px] h-[12px] rounded-full mr-2;
+  
+  &-good {
+    @apply bg-[#15803d];
+  }
+
+  &-alert {
+    @apply bg-[#ffae42];
+  }
+
+  &-locked {
+    @apply bg-[#f43f5e];
+  }
+}