feat: Add animation feature with toggle functionality

- Introduced animation feature flag to control the display of animations in the app.
- Created a new AnimationPage component that utilizes the animation feature flag.
- Added AnimatedBox component to demonstrate animation effects with a toggle button.
- Implemented CSS styles for the animated box and toggle button.
- Updated Header component to include a link to the new Animation page.
- Cleaned up imports in layout and page components.

Author: py-dev-nandini-12

.gitignore

@@ -41,4 +41,5 @@ yarn-error.log*
 next-env.d.ts
 
 tests/reports
-playwright-report
+playwright-report
+.env*.local

package.json

@@ -13,7 +13,7 @@
     "@types/node-fetch": "^2.6.12",
     "@vercel/toolbar": "^0.1.34",
     "flags": "^4.0.0",
-    "next": "15.1.6",
+    "next": "15.3.2",
     "node-fetch": "^3.3.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

pnpm-lock.yaml

@@ -0,0 +1,11 @@
+import { flag } from "flags/next";
+
+export const animationFeatureFlag = flag<boolean>({
+  key: "animation-feature",
+  description: "Enable animations in the app.",
+  decide: () => {
+    const isEnabled = process.env.ANIMATION_FEATURE_ENABLED === "true";
+    console.log("Animation Feature Flag Enabled:", isEnabled);
+    return isEnabled;
+  },
+});

src/app/animation/flags.ts

@@ -0,0 +1,20 @@
+import { animationFeatureFlag } from "./flags";
+import AnimatedBox from "../components/AnimatedBox";
+
+export default async function AnimationPage() {
+  const isAnimationFeatureEnabled = await animationFeatureFlag();
+
+  return (
+    <div>
+      <h1>Animation Feature Page</h1>
+      {isAnimationFeatureEnabled ? (
+        <div>
+          <h2>Animation is Enabled</h2>
+          <AnimatedBox />
+        </div>
+      ) : (
+        <p>🚫 Animation Feature is OFF</p>
+      )}
+    </div>
+  );
+}

src/app/animation/page.tsx

@@ -0,0 +1,26 @@
+.box {
+  width: 100px;
+  height: 100px;
+  background-color: blue;
+  margin: 20px auto;
+  transition: transform 0.5s ease-in-out;
+}
+
+.animate {
+  transform: rotate(360deg);
+}
+
+.toggleButton {
+  display: block;
+  margin: 10px auto;
+  padding: 10px 20px;
+  background-color: #0070f3;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.toggleButton:hover {
+  background-color: #005bb5;
+}

src/app/components/AnimatedBox.module.css

@@ -0,0 +1,23 @@
+"use client";
+
+import { useState } from "react";
+import styles from "./AnimatedBox.module.css";
+
+export default function AnimatedBox() {
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  const toggleAnimation = () => {
+    setIsAnimating((prev) => !prev);
+  };
+
+  return (
+    <div>
+      <button onClick={toggleAnimation} className={styles.toggleButton}>
+        {isAnimating ? "Stop Animation" : "Start Animation"}
+      </button>
+      <div
+        className={`${styles.box} ${isAnimating ? styles.animate : ""}`}
+      ></div>
+    </div>
+  );
+}

src/app/components/AnimatedBox.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 
-export default function Header({
+export default async function Header({
   toggleDarkMode,
   darkMode,
 }: {
@@ -13,22 +13,25 @@ export default function Header({
         padding: "10px",
         borderBottom: "1px solid #ccc",
         display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
       }}
     >
       <nav>
         <Link href="/" style={{ marginRight: "15px" }}>
           Home
         </Link>
-        <a href="/form" style={{ marginRight: "15px" }}>
+        <Link href="/form" style={{ marginRight: "15px" }}>
           Form
-        </a>
-        <a href="/about">About</a>
+        </Link>
+        <Link href="/animation" style={{ marginRight: "15px" }}>
+          Animation
+        </Link>
+        <Link href="/about" style={{ marginRight: "15px" }}>
+          About
+        </Link>
+        <button onClick={toggleDarkMode}>
+          Toggle {darkMode ? "Light" : "Dark"} Mode
+        </button>
       </nav>
-      <button onClick={toggleDarkMode}>
-        Toggle {darkMode ? "Light" : "Dark"} Mode
-      </button>
     </header>
   );
 }

src/app/header.tsx

@@ -1,5 +1,4 @@
 "use client";
-
 import WeatherWidget from "./weather-widget";
 import TaskList from "./task-list";
 import Header from "./header"; // Import the Header component

src/app/layout.tsx

@@ -1,8 +1,10 @@
 import { weatherWidgetFlag } from "../../flags";
 import WeatherWidget from "./weather-widget";
+// import { animationFeatureFlag } from "../../flags";
 
 export default async function Home() {
   const isWeatherWidgetEnabled = await weatherWidgetFlag();
+  // const isAnimationFeatureEnabled = await animationFeatureFlag();
 
   return (
     <div>