add upsacle buttons

flosrn · Nov 1, 2023 · 4110b73 · 4110b73
1 parent 60bda5a
commit 4110b73
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 8 deletions.
diff --git a/app/(playground)/playground/components/buttons/more-options.tsx b/app/(playground)/playground/components/buttons/more-options.tsx
@@ -4,7 +4,9 @@ import {
   ChevronLeftSquareIcon,
   ChevronRightSquareIcon,
   ChevronsLeftRightIcon,
+  ChevronsUpIcon,
   ChevronUpSquareIcon,
+  ExpandIcon,
   Loader2Icon,
   MoreHorizontalIcon,
   SearchIcon,
@@ -93,18 +95,22 @@ const MoreOptions = ({ clickHandler }: MoreOptionsProps) => {
         align="end"
         sideOffset={20}
         onFocusOutside={(event) => event.preventDefault()}
-        className="h-56 w-screen sm:w-96"
+        className="h-56 w-screen sm:w-[450px]"
       >
         <Tabs
           value={option}
           onValueChange={(opt) => setOption(opt as Option)}
           className="flex-1"
         >
-          <TabsList className="grid grid-cols-3">
+          <TabsList className="grid grid-cols-4">
             <TabsTrigger value={Option.ZOOM} className="space-x-2">
               <SearchIcon className="h-4 w-4" />
               <span>Zoom</span>
             </TabsTrigger>
+            <TabsTrigger value={Option.UPSCALE} className="space-x-2">
+              <ExpandIcon className="h-4 w-4" />
+              <span>Upscale</span>
+            </TabsTrigger>
             <TabsTrigger value={Option.PAN} className="space-x-2">
               <ChevronLeftSquareIcon className="h-4 w-4" />
               <span>Pan</span>
@@ -243,6 +249,36 @@ const MoreOptions = ({ clickHandler }: MoreOptionsProps) => {
               />
             </div>
           </TabsContent>
+          <TabsContent value={Option.UPSCALE}>
+            <LabelWithTooltip
+              title="Upscale options"
+              size="xs"
+              description="Upscale your image using midjourney."
+              className="py-4"
+            />
+            <div className="grid grid-cols-2 gap-1">
+              <ActionButton
+                id="upscale-x2"
+                type="upscale"
+                label="Upscale (x2)"
+                dataOption="x2"
+                Icon={ExpandIcon}
+                tourAction="moveNext"
+                clickHandler={clickHandler}
+                isDisabled={isNotUpscale || isEmpty || isLoading}
+              />
+              <ActionButton
+                id="upscale-x4"
+                type="upscale"
+                label="Upscale (x4)"
+                dataOption="x4"
+                Icon={ChevronsUpIcon}
+                tourAction="moveNext"
+                clickHandler={clickHandler}
+                isDisabled={isNotUpscale || isEmpty || isLoading}
+              />
+            </div>
+          </TabsContent>
         </Tabs>
       </PopoverContent>
     </Popover>

diff --git a/app/(playground)/playground/components/slider/slider.tsx b/app/(playground)/playground/components/slider/slider.tsx
@@ -5,7 +5,7 @@ import { motion } from "framer-motion";
 import {
   ArrowLeftCircleIcon,
   ArrowRightCircleIcon,
-  ExpandIcon,
+  Maximize2Icon,
 } from "lucide-react";
 import type { MJMessage } from "midjourney";
 import { ErrorBoundary } from "react-error-boundary";
@@ -184,8 +184,8 @@ const Slider = ({}: SliderProps) => {
                 <>
                   <ErrorBoundary
                     fallbackRender={({ resetErrorBoundary }) => {
-                      resetErrorBoundary(); // Réinitialise l'Error Boundary immédiatement
-                      return null; // Ne rends rien
+                      resetErrorBoundary();
+                      return null;
                     }}
                   >
                     <div className="absolute right-0 top-1/2 -translate-y-1/2">
@@ -225,7 +225,7 @@ const Slider = ({}: SliderProps) => {
                   onClick={() => setIsZoomed((prev) => !prev)}
                   className="flex-center absolute right-0 top-0 z-50 p-2 opacity-80 hover:opacity-100"
                 >
-                  <ExpandIcon className="h-4 w-4" />
+                  <Maximize2Icon className="h-4 w-4" />
                 </motion.button>
               )}
 

diff --git a/app/(playground)/playground/store/optionStore.ts b/app/(playground)/playground/store/optionStore.ts
@@ -5,6 +5,7 @@ export enum Option {
   "ZOOM" = "zoom",
   "PAN" = "pan",
   "VARY" = "vary",
+  "UPSCALE" = "upscale",
 }
 
 type OptionState = {

diff --git a/src/components/posters/buttons/expand-button.tsx b/src/components/posters/buttons/expand-button.tsx
@@ -2,7 +2,7 @@
 
 import React from "react";
 import { useZoomStore } from "~/store/zoomStore";
-import { ExpandIcon } from "lucide-react";
+import { Maximize2Icon } from "lucide-react";
 
 import TooltipButton from "~/components/posters/buttons/tooltip-button";
 
@@ -11,7 +11,7 @@ type ExpandButtonProps = {};
 const ExpandButton = ({}: ExpandButtonProps) => {
   const setIsZoomed = useZoomStore((state) => state.setIsZoomed);
   return (
-    <TooltipButton Icon={ExpandIcon} clickHandler={() => setIsZoomed(true)}>
+    <TooltipButton Icon={Maximize2Icon} clickHandler={() => setIsZoomed(true)}>
       Expand
     </TooltipButton>
   );