Results Page + Contacts

src/Components/Pages/Services/CardGroup.tsx

@@ -0,0 +1,41 @@
+import { useState } from "react";
+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 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="h-full font-medium md:px-8 py-3 text-2xl md:text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl flex flex-col">
+      {ActiveCards && <ActiveCards />}
+      <Buttons changeActiveGroup={changeActiveGroup} />
+    </div>
+  );
+};
+
+export default CardGroup;