remove the intersection observer from achievementProgress, removed timeline.css file and rewrite its code to tailwindCss code, implemented achievement schine animation in achievement and achievement components

Author: QuickerMaths

packages/app/src/app/dashboard/_components/achievementProgress.tsx

@@ -1,12 +1,11 @@
 "use client";
 
-import React, { useEffect, useRef, useState } from "react";
+import React from "react";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Avatar, AvatarImage } from "@/components/ui/avatar";
 import { BanIcon } from "lucide-react";
 import { Achievement as PrsimaAchievement } from "@prisma/client";
 import { Achievement } from "@/types/achievement";
-import "../timeline.css";
 
 interface Props {
   userAchievements: PrsimaAchievement[];
@@ -34,36 +33,8 @@ export default function AchievementProgress({
   return (
     <ScrollArea className="rounded-md h-[300px] border-2 border-primary p-4 mt-10">
       <h3 className="text-primary font-special">Achievement Progress</h3>
-      <div className="timeline">
+      <div className="relative my-[20px] flex flex-col justify-center items-center">
         {updatedAllAch.map((achievement) => {
-          const timelineItemRef = useRef<HTMLDivElement>(null);
-
-          const [isVisible, setIsVisible] = useState<boolean>(false);
-
-          useEffect(() => {
-            const observer = new IntersectionObserver(
-              (entries) => {
-                const [entry] = entries;
-                setIsVisible(entry.isIntersecting);
-              },
-              {
-                root: null,
-                rootMargin: "-20px",
-                threshold: 0.1, // Adjust this threshold as per your needs
-              }
-            );
-
-            if (timelineItemRef.current) {
-              observer.observe(timelineItemRef.current);
-            }
-
-            return () => {
-              if (timelineItemRef.current) {
-                observer.unobserve(timelineItemRef.current);
-              }
-            };
-          }, [timelineItemRef]);
-
           const isUnlocked = userAchievements.some(
             (userAchievement) =>
               userAchievement.achievementType === achievement.type
@@ -73,22 +44,28 @@ export default function AchievementProgress({
 
           return (
             <div
-              ref={timelineItemRef}
               key={achievement.type}
               id={itemId}
-              className={`timeline-item ${isUnlocked ? "unlocked" : "locked"} ${
-                isVisible && "animate-fade"
-              } shadow-lg shadow-accent opacity-100 `}
+              style={
+                isUnlocked
+                  ? {
+                      backgroundImage: "var(--achievement-progress-gradient)",
+                    }
+                  : {}
+              }
+              className={`relative h-[62px] p-[3px] mb-[20px] rounded-sm  cursor-pointer w-1/2 lg:w-1/4  ${
+                isUnlocked ? "animate-gradient bg-achievement" : "bg-red-500"
+              }  shadow-lg shadow-accent even:ml-[50%] odd:mr-[50%]`}
             >
-              <div className="timeline-content">
+              <div className="flex items-center justify-center text-center w-full h-full bg-accent rounded-md">
                 {isUnlocked ? (
                   <Avatar>
                     <AvatarImage src={achievement.image} />
                   </Avatar>
                 ) : (
                   <BanIcon className="text-primary" />
                 )}
-                <p>{achievement.name}</p>
+                <p className="m-0 pl-[3px]">{achievement.name}</p>
               </div>
             </div>
           );

packages/app/src/app/dashboard/timeline.css

@@ -16,32 +16,39 @@ export const AchievementCard = ({
   };
 }) => {
   return (
-    <li className="flex items-center justify-between bg-accent p-3 sm:p-4 md:px-6 md:py-3 rounded-sm">
-      <div className="flex-1 flex flex-col gap-2">
-        <h3 className="text-xl font-bold">{achievement.name}</h3>
-        {achievement.description && (
-          <p className="text-sm text-muted-foreground">
-            {achievement.description}
+    <li
+      className="p-[5px] rounded-sm cursor-pointer animate-gradient bg-achievement"
+      style={{
+        backgroundImage: "var(--achievement-progress-gradient)",
+      }}
+    >
+      <div className="w-full h-full flex items-center justify-between  bg-accent p-3 sm:p-4 md:px-6 md:py-3">
+        <div className="flex-1 flex flex-col gap-2">
+          <h3 className="text-xl font-bold">{achievement.name}</h3>
+          {achievement.description && (
+            <p className="text-sm text-muted-foreground">
+              {achievement.description}
+            </p>
+          )}
+          <p className="flex items-center text-xs text-accent-foreground">
+            <Icons.trophy className="w-4 h-4 mr-2" />
+            <span>
+              Unlocked:{" "}
+              <time dateTime={achievement.unlockedAt.toISOString()}>
+                {achievement.unlockedAt.toLocaleDateString()}
+              </time>
+            </span>
           </p>
-        )}
-        <p className="flex items-center text-xs text-accent-foreground">
-          <Icons.trophy className="w-4 h-4 mr-2" />
-          <span>
-            Unlocked:{" "}
-            <time dateTime={achievement.unlockedAt.toISOString()}>
-              {achievement.unlockedAt.toLocaleDateString()}
-            </time>
-          </span>
-        </p>
-      </div>
-      <div className="w-13 h-13 md:w-20 md:h-20">
-        <Image
-          src={achievement.image}
-          width={50}
-          height={50}
-          alt={`Achievement: ${achievement.name}`}
-          className="w-full max-w-full object-cover"
-        />
+        </div>
+        <div className="w-13 h-13 md:w-20 md:h-20">
+          <Image
+            src={achievement.image}
+            width={50}
+            height={50}
+            alt={`Achievement: ${achievement.name}`}
+            className="w-full max-w-full object-cover"
+          />
+        </div>
       </div>
     </li>
   );
@@ -78,7 +85,7 @@ export function unlockAchievement({
 }) {
   toast({
     description: (
-      <div className="flex flex-col gap-4">
+      <div className="flex justify-center items-center flex-col gap-4">
         <div className="flex items-center gap-2 text-lg md:text-xl">
           <UnlockIcon className="text-accent-foreground" />{" "}
           <span className="text-muted-foreground">Unlocked:</span>{" "}