From 6904d6b74ca4ff247e1d68dbe93ed9685a991274 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aykut=20Karda=C5=9F?= <aykutkrds@gmail.com>
Date: Tue, 5 Mar 2024 23:45:05 +0300
Subject: [PATCH] feat: disable already used models (#2)

---
 app/page.tsx                  | 2 ++
 components/model-dropdown.tsx | 8 +++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/app/page.tsx b/app/page.tsx
index 5b820cf..c5d17f1 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -197,6 +197,7 @@ export default function UpscalerBattleground() {
           <div className="flex w-full items-end justify-between border-y py-2 mb-3">
             <div className="w-1/2 flex justify-start">
               <ModelDropdown
+                disableList={[secondModel?.model]}
                 onSelect={(model) => setFirstModel(model)}
                 value={firstModel}
               />
@@ -204,6 +205,7 @@ export default function UpscalerBattleground() {
 
             <div className="w-1/2 flex justify-end">
               <ModelDropdown
+                disableList={[firstModel?.model]}
                 onSelect={(model) => setSecondModel(model)}
                 value={secondModel}
               />
diff --git a/components/model-dropdown.tsx b/components/model-dropdown.tsx
index 91a3e6e..8195127 100644
--- a/components/model-dropdown.tsx
+++ b/components/model-dropdown.tsx
@@ -46,11 +46,13 @@ export const UPSCALE_MODELS: Model[] = [
 ];
 
 export function ModelDropdown({
+  disableList,
   onSelect,
   value,
 }: {
   value: Model | null;
   onSelect: (model: Model) => void;
+  disableList: Array<string | undefined>;
 }) {
   return (
     <DropdownMenu>
@@ -62,7 +64,11 @@ export function ModelDropdown({
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
         {UPSCALE_MODELS.map((model) => (
-          <DropdownMenuItem key={model.name} onClick={() => onSelect(model)}>
+          <DropdownMenuItem
+            key={model.name}
+            disabled={disableList.includes(model.model)}
+            onClick={() => onSelect(model)}
+          >
             {model.name}
           </DropdownMenuItem>
         ))}