-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: setup files path and placement
- Loading branch information
Showing
4 changed files
with
204 additions
and
196 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,175 @@ | ||
| import { AnimatePresence, motion } from "framer-motion"; | ||
| import { useState, useEffect } from "react"; | ||
| import LogsComponent from "@renderer/components/setup/LogsComponent"; | ||
| import Icon from "../ui/Icon"; | ||
| import Button from "../ui/Button/Button"; | ||
|
|
||
| const ProgressAnimate = ({ index, activeIndex, onClick, complete }) => { | ||
| const [shouldBounce, setShouldBounce] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| if (index === activeIndex) { | ||
| setShouldBounce(true); | ||
| const timer = setTimeout(() => setShouldBounce(false), 100); | ||
| return () => clearTimeout(timer); | ||
| } | ||
| }, [index, activeIndex]); | ||
|
|
||
| const isActive = index === activeIndex; | ||
| const isActiveOrPast = index <= activeIndex; | ||
|
|
||
| return ( | ||
| <button | ||
| onClick={onClick} | ||
| className={`flex flex-col items-center space-y-2 cursor-default ${complete && "pointer-events-none opacity-20"}`} | ||
| > | ||
| <motion.div | ||
| variants={{ | ||
| idle: { height: 0 }, | ||
| active: { height: "24px" }, | ||
| }} | ||
| animate={isActive ? "active" : "idle"} | ||
| className={`rounded-xl w-[2px] pointer-events-none ${isActiveOrPast ? "bg-emerald-400" : "bg-white"}`} | ||
| ></motion.div> | ||
| <motion.div | ||
| className={`h-6 w-6 rounded-full font-semibold flex items-center cursor-pointer justify-center ${isActiveOrPast ? "bg-emerald-400" : "bg-white"}`} | ||
| variants={{ | ||
| idle: { scale: 1 }, | ||
| bounce: { scale: 1.2 }, | ||
| }} | ||
| animate={shouldBounce ? "bounce" : "idle"} | ||
| transition={{ | ||
| type: "spring", | ||
| }} | ||
| > | ||
| {complete ? <Icon name="check" stroke={3.5} /> : index} | ||
| </motion.div> | ||
| </button> | ||
| ); | ||
| }; | ||
|
|
||
| const SetupComponent = ({ | ||
| complete, | ||
| setComplete, | ||
| activeIndex, | ||
| setActiveIndex, | ||
| items, | ||
| }) => { | ||
| const [showBackButton, setShowBackButton] = useState(activeIndex > 1); | ||
|
|
||
| useEffect(() => { | ||
| setShowBackButton(activeIndex > 1); | ||
| }, [activeIndex]); | ||
|
|
||
| const getCurrentForm = () => { | ||
| const currentItem = items.find((item) => item.index === activeIndex); | ||
| return currentItem ? currentItem.form : null; | ||
| }; | ||
|
|
||
| const handleNext = () => { | ||
| if (activeIndex < items.length) { | ||
| setActiveIndex((prevIndex) => prevIndex + 1); | ||
| } else if (activeIndex === items.length) { | ||
| setComplete(true); | ||
| } | ||
| }; | ||
|
|
||
| const handleBack = () => { | ||
| if (activeIndex > 1) { | ||
| setActiveIndex((prevIndex) => prevIndex - 1); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="absolute left-6 top-0 bottom-0 my-auto h-fit space-y-2 flex flex-col items-center text-black text-xs font-semibold"> | ||
| {items.map((item) => ( | ||
| <ProgressAnimate | ||
| key={item.index} | ||
| index={item.index} | ||
| activeIndex={activeIndex} | ||
| onClick={() => { | ||
| setComplete(false); | ||
| setActiveIndex(item.index); | ||
| }} | ||
| complete={complete} | ||
| /> | ||
| ))} | ||
| </div> | ||
| <AnimatePresence mode="wait"> | ||
| {complete ? ( | ||
| <motion.div | ||
| key="logs" | ||
| initial={{ | ||
| opacity: 0, | ||
| }} | ||
| animate={{ | ||
| opacity: 1, | ||
| }} | ||
| exit={{ | ||
| opacity: 0, | ||
| }} | ||
| className="w-full h-full" | ||
| > | ||
| <LogsComponent /> | ||
| </motion.div> | ||
| ) : ( | ||
| <motion.div | ||
| key="forms" | ||
| initial={{ | ||
| opacity: 0, | ||
| }} | ||
| animate={{ | ||
| opacity: 1, | ||
| }} | ||
| exit={{ | ||
| opacity: 0, | ||
| }} | ||
| className="w-[820px] flex items-center justify-center h-[calc(100%-64px)] space-y-4" | ||
| > | ||
| <div className="h-fit w-[280px] space-y-4"> | ||
| <AnimatePresence mode="wait">{getCurrentForm()}</AnimatePresence> | ||
| <div className="w-full h-px bg-gradient-to-r from-transparent via-emerald-400 to-transparent"></div> | ||
| <div className="flex items-center w-full"> | ||
| <AnimatePresence> | ||
| {showBackButton && ( | ||
| <motion.div | ||
| key="back" | ||
| initial={{ opacity: 0, width: 0, marginRight: 0 }} | ||
| animate={{ opacity: 1, width: "100%", marginRight: 16 }} | ||
| exit={{ opacity: 0, width: 0, marginRight: 0 }} | ||
| > | ||
| <Button | ||
| variant="ghostWhite" | ||
| fullWidth | ||
| label="Back" | ||
| onClick={handleBack} | ||
| /> | ||
| </motion.div> | ||
| )} | ||
| <motion.div | ||
| key="next" | ||
| initial={{ opacity: 0, width: 0 }} | ||
| animate={{ | ||
| opacity: 1, | ||
| width: "100%", | ||
| }} | ||
| exit={{ opacity: 0, width: 0 }} | ||
| > | ||
| <Button | ||
| fullWidth | ||
| label={activeIndex === items.length ? "Done" : "Next"} | ||
| onClick={handleNext} | ||
| /> | ||
| </motion.div> | ||
| </AnimatePresence> | ||
| </div> | ||
| </div> | ||
| </motion.div> | ||
| )} | ||
| </AnimatePresence> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default SetupComponent; |
Oops, something went wrong.