Develop Frontend Components for Project, Package, and Instance Views

2025-12-12 10:23:44 -06:00
parent 8b7b523aa8
commit e89947f3d3
25 changed files with 2123 additions and 170 deletions
--- a/frontend/src/components/SearchInput.css
+++ b/frontend/src/components/SearchInput.css
@@ -0,0 +1,57 @@
+/* SearchInput Component */
+.search-input {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.search-input__icon {
+  position: absolute;
+  left: 12px;
+  color: var(--text-muted);
+  pointer-events: none;
+}
+
+.search-input__field {
+  width: 100%;
+  padding: 10px 36px 10px 40px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-primary);
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  color: var(--text-primary);
+  transition: all var(--transition-fast);
+}
+
+.search-input__field::placeholder {
+  color: var(--text-muted);
+}
+
+.search-input__field:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+  background: var(--bg-elevated);
+}
+
+.search-input__clear {
+  position: absolute;
+  right: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.search-input__clear:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}