Merge branch 'main' of github.com:andy89923/DVVA_Final-Project

andy89923 · Jan 12, 2023 · 49b69d2 · 49b69d2
2 parents 8d3e222 + 097f831
commit 49b69d2
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/movis/src/components/ZoomCard.tsx b/movis/src/components/ZoomCard.tsx
@@ -6,11 +6,14 @@ interface IProps {
   title?: string;
   children?: React.ReactNode;
   className?: string;
+  manualZoomDim?: string;
 }
 
 const ZoomCard: React.FC<IProps> = (props) => {
   const [isZoom, setIsZoom] = useState(false);
 
+  const { manualZoomDim } = props;
+
   const Header = () => {
     return (
       <div className="flex items-center justify-between text-white">
@@ -33,7 +36,11 @@ const ZoomCard: React.FC<IProps> = (props) => {
         {props.children}
       </div>
       <Modal isOpen={isZoom} setIsOpen={setIsZoom}>
-        <div className=" flex h-screen flex-col gap-4 rounded-xl bg-white/10 p-4 text-2xl">
+        <div
+          className={`flex flex-col gap-4 rounded-xl bg-white/10 p-4 text-2xl ${
+            manualZoomDim ? manualZoomDim : "h-[70vh] w-[70vw]"
+          }`}
+        >
           <Header />
           {props.children}
         </div>

diff --git a/movis/src/pages/compare/index.tsx b/movis/src/pages/compare/index.tsx
@@ -377,6 +377,7 @@ const Compare: NextPage = () => {
               <ZoomCard
                 title="Top Rated Movies from Selected"
                 className="col-span-2 row-span-3"
+                manualZoomDim=" "
               >
                 <div>
                   <MyCarousel data={companyData} size={10} />
@@ -408,7 +409,11 @@ const Compare: NextPage = () => {
                 </div>
               </ZoomCard>
 
-              <ZoomCard title="Movies Genres" className="col-span-2 row-span-3">
+              <ZoomCard
+                title="Movies Genres"
+                className="col-span-2 row-span-3"
+                manualZoomDim="h-screen"
+              >
                 <div className="flex h-full flex-col gap-4 rounded-xl bg-white/95 p-4 text-lg text-black hover:bg-white/100">
                   <MyBarPlot companies={selected} data={companyData} />
                 </div>