From 90429c162e404dad0d40ec62a9d19620f9bf0f3a Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Mon, 22 Jan 2024 11:17:51 +0700
Subject: [PATCH] modalTitle prop

---
 .../common/SelectSearcher/SelectSearcher.tsx  | 127 +++++++++---------
 .../components/tabContentLibrary.tsx          |   3 +-
 2 files changed, 67 insertions(+), 63 deletions(-)

diff --git a/packages/fakeyou.com/src/components/common/SelectSearcher/SelectSearcher.tsx b/packages/fakeyou.com/src/components/common/SelectSearcher/SelectSearcher.tsx
index 8e4e9973a0..85386a1a60 100644
--- a/packages/fakeyou.com/src/components/common/SelectSearcher/SelectSearcher.tsx
+++ b/packages/fakeyou.com/src/components/common/SelectSearcher/SelectSearcher.tsx
@@ -16,78 +16,81 @@ interface TabConfig {
 interface SelectSearcherProps {
   label?: string;
   tabs: TabConfig[];
+  modalTitle?: string;
 }
 
-const SelectSearcher = memo(({ label, tabs }: SelectSearcherProps) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const { weightTitle, setWeightTitle } = useToken();
+const SelectSearcher = memo(
+  ({ label, tabs, modalTitle = "Select" }: SelectSearcherProps) => {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const { weightTitle, setWeightTitle } = useToken();
 
-  const openModal = () => {
-    setIsModalOpen(true);
-  };
+    const openModal = () => {
+      setIsModalOpen(true);
+    };
 
-  const closeModal = () => {
-    setIsModalOpen(false);
-  };
+    const closeModal = () => {
+      setIsModalOpen(false);
+    };
 
-  const handleRemove = () => {
-    setWeightTitle && setWeightTitle("");
-  };
+    const handleRemove = () => {
+      setWeightTitle && setWeightTitle("");
+    };
 
-  const searchTabs = tabs.map(tab => ({
-    label: tab.label,
-    content: tab.searcherKey ? (
-      <Searcher
-        type="modal"
-        onResultSelect={closeModal}
-        searcherKey={tab.searcherKey}
-        weightType={tab.weightTypeFilter}
-      />
-    ) : null,
-    padding: true,
-  }));
+    const searchTabs = tabs.map(tab => ({
+      label: tab.label,
+      content: tab.searcherKey ? (
+        <Searcher
+          type="modal"
+          onResultSelect={closeModal}
+          searcherKey={tab.searcherKey}
+          weightType={tab.weightTypeFilter}
+        />
+      ) : null,
+      padding: true,
+    }));
 
-  return (
-    <>
-      <div>
-        {label && <label className="sub-title">{label}</label>}
+    return (
+      <>
+        <div>
+          {label && <label className="sub-title">{label}</label>}
 
-        <div className="d-flex gap-2">
-          <Input
-            disabled={true}
-            className="w-100"
-            placeholder="None selected"
-            value={weightTitle ? weightTitle : ""}
-          />
-          <Button
-            label={weightTitle ? "Change" : "Select"}
-            onClick={openModal}
-          />
-          {weightTitle && (
-            <Button
-              square={true}
-              variant="danger"
-              icon={faTrash}
-              onClick={handleRemove}
-              tooltip="Remove"
+          <div className="d-flex gap-2">
+            <Input
+              disabled={true}
+              className="w-100"
+              placeholder="None selected"
+              value={weightTitle ? weightTitle : ""}
             />
-          )}
+            <Button
+              label={weightTitle ? "Change" : "Select"}
+              onClick={openModal}
+            />
+            {weightTitle && (
+              <Button
+                square={true}
+                variant="danger"
+                icon={faTrash}
+                onClick={handleRemove}
+                tooltip="Remove"
+              />
+            )}
+          </div>
         </div>
-      </div>
 
-      <Modal
-        show={isModalOpen}
-        handleClose={closeModal}
-        title="Select a LoRA Weight"
-        content={() => <NonRouteTabs tabs={searchTabs} />}
-        showButtons={false}
-        padding={false}
-        large={true}
-        position="top"
-        mobileFullscreen={true}
-      />
-    </>
-  );
-});
+        <Modal
+          show={isModalOpen}
+          handleClose={closeModal}
+          title={modalTitle}
+          content={() => <NonRouteTabs tabs={searchTabs} />}
+          showButtons={false}
+          padding={false}
+          large={true}
+          position="top"
+          mobileFullscreen={true}
+        />
+      </>
+    );
+  }
+);
 
 export default SelectSearcher;
diff --git a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx
index 1324f82092..6983a2262b 100644
--- a/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/video_mocap/components/tabContentLibrary.tsx
@@ -8,7 +8,8 @@ export default function TabContentLibrary(props: {
   return (
     <div>
       <SelectSearcher
-        label="Select a Video Media"
+        modalTitle="Select a Video"
+        label="Select a Video"
         tabs={[
           {
             label: "All Videos",