From 67df6c4d194cd26937e47dd15694d9058910ab44 Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Tue, 20 Aug 2024 22:11:49 +0700
Subject: [PATCH] style selection number selected

---
 .../fakeyou.com/src/components/common/Modal/Modal.tsx      | 7 ++++++-
 .../src/v2/view/pages/style-video/StyleVideo.tsx           | 5 +++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/website/packages/fakeyou.com/src/components/common/Modal/Modal.tsx b/src/website/packages/fakeyou.com/src/components/common/Modal/Modal.tsx
index 6490cbf859..faacc1554a 100644
--- a/src/website/packages/fakeyou.com/src/components/common/Modal/Modal.tsx
+++ b/src/website/packages/fakeyou.com/src/components/common/Modal/Modal.tsx
@@ -27,6 +27,7 @@ interface ModalProps {
   position?: "center" | "top";
   mobileFullscreen?: boolean;
   footerContent?: React.ReactNode;
+  titleAfter?: React.ReactNode;
 }
 
 export interface ModalUtilities {
@@ -70,6 +71,7 @@ const Modal: React.FC<ModalProps> = ({
   position = "center",
   mobileFullscreen = false,
   footerContent,
+  titleAfter,
 }) => {
   const fadeIn = useSpring({
     opacity: show ? 1 : 0,
@@ -135,7 +137,10 @@ const Modal: React.FC<ModalProps> = ({
                 <header className="modal-header">
                   <h4 className="modal-title fw-bold">
                     {icon && <FontAwesomeIcon icon={icon} className="me-3" />}
-                    {title || ""}
+                    <div className="d-flex gap-2">
+                      {title || ""}
+                      {titleAfter && titleAfter}
+                    </div>
                   </h4>
                   <button
                     type="button"
diff --git a/src/website/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx b/src/website/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx
index 3f08b993c0..23c91d56be 100644
--- a/src/website/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx
+++ b/src/website/packages/fakeyou.com/src/v2/view/pages/style-video/StyleVideo.tsx
@@ -272,6 +272,11 @@ export default function StyleVideo() {
               large={true}
               content={StyleSelectionList}
               title="Select Style(s)"
+              titleAfter={
+                <div className="opacity-75">
+                  — ({selectedStyleValues.length}/3)
+                </div>
+              }
               subtitle="You may choose up to three styles to generate multiple videos at once."
               contentProps={{
                 styleOptions: STYLE_OPTIONS,