dodanie nowych komponentow oraz dodanie walidacji propTypes

src/index.css

@@ -22,6 +22,27 @@
   }
 }
 
+/* @layer components {
+  .no-spin-buttons::-webkit-inner-spin-button,
+  .no-spin-buttons::-webkit-outer-spin-button {
+    @apply -webkit-appearance-none margin-0;
+  }
+  .no-spin-buttons {
+    @apply -moz-appearance-textfield;
+  }
+} */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Dla Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
 @tailwind components;
 @tailwind utilities;
 
@@ -60,11 +81,43 @@
 }
 
 /* Expanded state styles */
-.expanded {
-  max-height: fit-content; /* Adjust as needed */
-  opacity: 1;
+.collapsible {
+  max-height: 0;
+  overflow: hidden;
+  transition-property: all;
+  transition-timing-function: ease-in-out;
+  transition-duration: 0.5s;
 }
 
+/* Styl dla elementu, gdy jest rozwinięty */
+.collapsible.expanded {
+  max-height: 1000px; /* Przykładowa maksymalna wysokość, może wymagać dostosowania */
+  opacity: 1;
+  transition-property: all;
+  transition-timing-function: ease-in-out;
+  transition-duration: 0.5s;
+}
+
+.div-transition {
+  transition-property: filter;
+  transition-duration:  1s;
+  transition-timing-function: ease-in-out;
+}
+
+
+.noblur {
+  filter: blur(0px);
+  transition-property: filter;
+  transition-duration: 0.5s;
+  transition-timing-function: ease-in-out;
+}
+
+.blur {
+  filter: blur(5px);
+  transition-property: filter;
+  transition-duration: 0.5s;
+  transition-timing-function: ease-in-out;
+}
 .minus-z-index {
   z-index: -10;
 }
@@ -109,59 +162,4 @@
 .sidebar-hide {
   -webkit-animation: slide-down 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
   animation: slide-down 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
-}
-
-@-webkit-keyframes slide-top {
-  0% {
-    -webkit-transform: translateX(600px);
-    transform: translateX(600px);
-  }
-  100% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-}
-
-@keyframes slide-top {
-  0% {
-    -webkit-transform: translateX(600px);
-    transform: translateX(600px);
-  }
-  100% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-}
-
-@-webkit-keyframes slide-down {
-  0% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-  100% {
-    -webkit-transform: translateX(600px);
-    transform: translateX(600px);
-  }
-}
-
-@keyframes slide-down {
-  0% {
-    -webkit-transform: translateX(0);
-    transform: translateX(0);
-  }
-  100% {
-    -webkit-transform: translateX(600px);
-    transform: translateX(600px);
-  }
-}
-
-
-@media (max-width: 768px) {
-  .details-section {
-      display: none;
-  }
-  .list-section {
-      display: block;
-  }
-}
-
+}