From 91ac4137dcf5ea06672ab6e7df63f88dda799635 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 23 Jun 2025 08:15:02 -0600
Subject: [PATCH] Move to separate component

---
 .../classification/ModelSelectionView.tsx     | 50 +++++++++++--------
 1 file changed, 30 insertions(+), 20 deletions(-)

diff --git a/web/src/views/classification/ModelSelectionView.tsx b/web/src/views/classification/ModelSelectionView.tsx
index 63133842a..ef415efb4 100644
--- a/web/src/views/classification/ModelSelectionView.tsx
+++ b/web/src/views/classification/ModelSelectionView.tsx
@@ -37,27 +37,37 @@ export default function ModelSelectionView({
   return (
     <div className="flex size-full gap-2 p-2">
       {classificationConfigs.map((config) => (
-        <div
-          key={config.name}
-          className={cn(
-            "flex h-52 cursor-pointer flex-col gap-2 rounded-lg bg-card p-2 outline outline-[3px]",
-            "outline-transparent duration-500",
-            isMobile && "w-full",
-          )}
-          onClick={() => onClick(config)}
-          onContextMenu={() => {
-            // e.stopPropagation();
-            // e.preventDefault();
-            // handleClickEvent(true);
-          }}
-        >
-          <div className="size-48"></div>
-          <div className="smart-capitalize">
-            {config.name} ({config.state_config != null ? "State" : "Object"}{" "}
-            Classification)
-          </div>
-        </div>
+        <ModelCard config={config} onClick={() => onClick(config)} />
       ))}
     </div>
   );
 }
+
+type ModelCardProps = {
+  config: CustomClassificationModelConfig;
+  onClick: () => void;
+};
+function ModelCard({ config, onClick }: ModelCardProps) {
+  return (
+    <div
+      key={config.name}
+      className={cn(
+        "flex h-52 cursor-pointer flex-col gap-2 rounded-lg bg-card p-2 outline outline-[3px]",
+        "outline-transparent duration-500",
+        isMobile && "w-full",
+      )}
+      onClick={() => onClick()}
+      onContextMenu={() => {
+        // e.stopPropagation();
+        // e.preventDefault();
+        // handleClickEvent(true);
+      }}
+    >
+      <div className="size-48"></div>
+      <div className="smart-capitalize">
+        {config.name} ({config.state_config != null ? "State" : "Object"}{" "}
+        Classification)
+      </div>
+    </div>
+  );
+}