import type { BookerLayout, BookerState } from "./types"; // Framer motion fade in animation configs. export const fadeInLeft = { variants: { visible: { opacity: 1, x: 0 }, hidden: { opacity: 0, x: 20 }, }, initial: "hidden", exit: "hidden", animate: "visible", transition: { ease: "easeInOut", delay: 0.1 }, }; export const fadeInUp = { variants: { visible: { opacity: 1, y: 0 }, hidden: { opacity: 0, y: 20 }, }, initial: "hidden", exit: "hidden", animate: "visible", transition: { ease: "easeInOut", delay: 0.1 }, }; type ResizeAnimationConfig = { [key in BookerLayout]: { [key in BookerState | "default"]?: React.CSSProperties; }; }; /** * This configuration is used to animate the grid container for the booker. * The object is structured as following: * * The root property of the object: is the name of the layout * (mobile, small_calendar, large_calendar, large_timeslots) * * The values of these properties are objects that define the animation for each state of the booker. * The animation have the same properties as you could pass to the animate prop of framer-motion: * @see: https://www.framer.com/motion/animation/ */ export const resizeAnimationConfig: ResizeAnimationConfig = { mobile: { default: { width: "100%", gridTemplateAreas: ` "meta" "main" "timeslots" `, gridTemplateColumns: "100%", }, }, small_calendar: { default: { width: "calc(var(--booker-meta-width) + var(--booker-main-width))", gridTemplateAreas: `"meta main"`, gridTemplateColumns: "var(--booker-meta-width) var(--booker-main-width)", }, selecting_time: { width: "100%", maxWidth: "calc(var(--booker-meta-width) + var(--booker-main-width) + var(--booker-timeslots-width))", gridTemplateAreas: `"meta main timeslots"`, gridTemplateColumns: "var(--booker-meta-width) 1fr var(--booker-timeslots-width)", }, }, large_calendar: { default: { width: "100%", gridTemplateAreas: `"meta main"`, gridTemplateColumns: "var(--booker-meta-width) 1fr", }, }, large_timeslots: { default: { width: "100%", gridTemplateAreas: `"meta main"`, gridTemplateColumns: "var(--booker-meta-width) 1fr", }, }, };