"use client"; import { AnimatePresence, type HTMLMotionProps, motion } from "framer-motion"; import { PlusIcon, SquareIcon } from "lucide-react"; import { type HTMLAttributes, useState } from "react"; import { toast } from "sonner"; import { cn } from "#/src/utils/cn"; //TODO : Improve by refactoring the different sections into their own components //TODO : Improve by adding a dark version //TODO : Add dimensions section with sliders const menuCategories = [ { label: "Dimensions", slug: "dimensions", menuWidth: 320, menuHeight: 240 }, { label: "Aspect Ratio", slug: "aspect-ratio", menuWidth: 320, menuHeight: 188, }, { label: "Prompt", slug: "prompt", menuWidth: 320, menuHeight: 240 }, ] as const; export default function DynamicSettingsVariant1() { const [isOpen, setIsOpen] = useState(false); const [subMenuSelected, setSubMenuSelected] = useState("dimensions"); const handleOpenSettings = () => { setIsOpen(!isOpen); }; return ( item.slug === subMenuSelected) ?.menuHeight : 52, width: isOpen ? menuCategories.find((item) => item.slug === subMenuSelected) ?.menuWidth : 132, }} transition={{ type: "spring", duration: 0.6, // damping: 8, // stiffness: 120, }} className={cn( "overflow-hidden justify-between bg-neutral-900 rounded-2xl items-center text-neutral-50 p-2 shadow-lg", !isOpen && "hover:bg-neutral-800", )} >

{isOpen ? ( ) : ( )}

{isOpen && subMenuSelected === "aspect-ratio" && (

Changes

)} {isOpen && subMenuSelected === "prompt" && (

<div className="flex justify-between">
                <div className="flex items-center gap-2 ml-2">
                  <div className="rounded-full size-2 bg-yellow-200" />
                  <p className="text-sm text-neutral-500">Changes</p>
                </div>
                <button
                  type="submit"
                  className="text-neutral-800 bg-yellow-200 py-1 font-medium px-2 rounded-lg"
                  onClick={() => {
                    handleOpenSettings();
                    toast.message("Changes done", {
                      description: "Changes validated and applied successfully",
                    });
                  }}
                >
                  Apply Changes
                </button>
              </div>
            </motion.div>
          )}
          {isOpen && subMenuSelected === "dimensions" && (
            <motion.div
              initial={{ opacity: 0, filter: "blur(4px)" }}
              animate={{ opacity: 1, filter: "blur(0px)" }}
              transition={{ duration: 1.2, type: "spring" }}
              className="flex flex-col gap-4 justify-between"
            >
              <div className="flex justify-between">
                <div className="flex items-center gap-2 ml-2">
                  <div className="rounded-full size-2 bg-yellow-200" />
                  <p className="text-sm text-neutral-500">Changes</p>
                </div>
                <button
                  type="submit"
                  className="text-neutral-800 bg-yellow-200 py-1 font-medium px-2 rounded-lg"
                  onClick={() => {
                    handleOpenSettings();
                    toast.message("Changes done", {
                      description: "Changes validated and applied successfully",
                    });
                  }}
                >
                  Apply Changes
                </button>
              </div>
            </motion.div>
          )}
        </div>
      </div>
    </motion.div>
  );
}

const aspectRatioList = [
  { label: "1:1", icon: SquareIcon },
  { label: "16:9", icon: SquareIcon },
  { label: "21:9", icon: SquareIcon },
  { label: "3:4", icon: SquareIcon },
  { label: "4:3", icon: SquareIcon },
  { label: "Custom", icon: SquareIcon },
];

Dynamic Settings