feat: disable origin buttons if blend is selected

awang1245 · Apr 2, 2024 · 17f0981 · 17f0981
1 parent 700d9c5
commit 17f0981
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -287,6 +287,7 @@ function App() {
               onFilterRoast={onFilterRoast}
               onFilterFlavor={onFilterFlavor}
               onFilterOrigin={onFilterOrigin}
+              type={type}
               sort={sort}
               onSort={onSort}
             />

diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
@@ -8,6 +8,7 @@ interface DropdownProps {
   onFilterRoast: (event: React.ChangeEvent<HTMLInputElement>) => void;
   onFilterFlavor: (event: React.ChangeEvent<HTMLInputElement>) => void;
   onFilterOrigin: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  type: string[];
   sort: string;
   onSort: (event: React.MouseEvent<HTMLButtonElement>) => void;
 }
@@ -17,6 +18,7 @@ function Dropdown({
   onFilterRoast,
   onFilterFlavor,
   onFilterOrigin,
+  type,
   sort,
   onSort,
 }: DropdownProps) {
@@ -277,6 +279,7 @@ function Dropdown({
                     name="origin1"
                     value="africa"
                     onChange={onFilterOrigin}
+                    disabled={type.length === 1 && type[0] === "blend"}
                   />
                   <label htmlFor="origin1">africa</label>
                 </div>
@@ -288,6 +291,7 @@ function Dropdown({
                     name="origin2"
                     value="asia"
                     onChange={onFilterOrigin}
+                    disabled={type.length === 1 && type[0] === "blend"}
                   />
                   <label htmlFor="origin2">asia</label>
                 </div>
@@ -299,6 +303,7 @@ function Dropdown({
                     name="origin3"
                     value="central america"
                     onChange={onFilterOrigin}
+                    disabled={type.length === 1 && type[0] === "blend"}
                   />
                   <label htmlFor="origin3">central america</label>
                 </div>
@@ -310,6 +315,7 @@ function Dropdown({
                     name="origin4"
                     value="south america"
                     onChange={onFilterOrigin}
+                    disabled={type.length === 1 && type[0] === "blend"}
                   />
                   <label htmlFor="origin4">south america</label>
                 </div>

diff --git a/src/styles/Dropdown.css b/src/styles/Dropdown.css
@@ -121,14 +121,9 @@
   user-select: none;
 }
 
-.container input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
+input[disabled] {
+  outline: white;
 }
-
 .filter-accordion label {
   font-size: 16px;
 }