64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import { useState } from "react";
|
|
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
|
|
import WesiteCards from "./WesiteCards";
|
|
import Buttons from "./Buttons";
|
|
import MarketingCards from "./MarketingCards";
|
|
import CameraCards from "./CameraCards";
|
|
import SocialMediaCards from "./SocialMedia";
|
|
|
|
const CardGroup = () => {
|
|
const [activeGroup, setActiveGroup] = useState("webCards");
|
|
const prefersReducedMotion = useReducedMotion();
|
|
|
|
const changeActiveGroup = (group: string) => {
|
|
setActiveGroup(group);
|
|
};
|
|
|
|
let ActiveCards;
|
|
switch (activeGroup) {
|
|
case "markCards":
|
|
ActiveCards = MarketingCards;
|
|
break;
|
|
case "webCards":
|
|
ActiveCards = WesiteCards;
|
|
break;
|
|
case "smCards":
|
|
ActiveCards = SocialMediaCards;
|
|
break;
|
|
case "camCards":
|
|
ActiveCards = CameraCards;
|
|
break;
|
|
default:
|
|
ActiveCards = null;
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-8 lg:gap-10">
|
|
<Buttons changeActiveGroup={changeActiveGroup} />
|
|
<div className="relative">
|
|
<AnimatePresence mode="wait">
|
|
{ActiveCards && (
|
|
<motion.div
|
|
key={activeGroup}
|
|
initial={
|
|
prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: 12 }
|
|
}
|
|
animate={
|
|
prefersReducedMotion ? { opacity: 1 } : { opacity: 1, y: 0 }
|
|
}
|
|
exit={
|
|
prefersReducedMotion ? { opacity: 0 } : { opacity: 0, y: -12 }
|
|
}
|
|
transition={{ type: "spring", damping: 26, stiffness: 220 }}
|
|
>
|
|
<ActiveCards />
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CardGroup;
|