feat(marketplace): add filter options and sorting functionality to Items component

src/components/Elements/MainModal/scss/marketplace/_main.scss

@@ -517,3 +517,60 @@ p.author {
     margin-bottom: 0 !important;
   }
 }
+
+.filter-options-container {
+  display: flex;
+  flex-flow: row;
+  gap: 20px;
+  margin: 20px 0;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.filter-chips {
+  display: flex;
+  flex-flow: row;
+  gap: 12px;
+  align-items: center;
+
+  .filter-chip {
+    all: unset;
+    padding: 8px 20px;
+    border-radius: 24px;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+    user-select: none;
+
+    @include themed {
+      background-color: t($modal-sidebarActive);
+      color: t($color);
+    }
+
+    &:hover {
+      @include themed {
+        background-color: rgba(255, 255, 255, 0.15);
+      }
+    }
+
+    &.active {
+      @include themed {
+        background-color: #fff;
+        color: #000;
+      }
+
+      &:hover {
+        @include themed {
+          background-color: #f0f0f0;
+        }
+      }
+    }
+
+    &:focus-visible {
+      outline: 2px solid rgba(255, 255, 255, 0.5);
+      outline-offset: 2px;
+    }
+  }
+}