feat: add fade animation to streak card flip

Author: Awnder

src/components/ui/date-picker.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
+import { motion } from "framer-motion";
 
 import { cn } from "@/lib/utils";
 
@@ -58,7 +59,10 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(
 
       for (let day = 1; day <= daysInCurrentMonth; day++) {
         days.push(
-          <div
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.01 * day }}
             key={day}
             className={cn(
               "grid-item place-self-center cursor-pointer rounded-lg w-[30px] h-[30px] flex items-center justify-center hover:bg-primary/30 transition-colors",
@@ -72,7 +76,7 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(
             onClick={() => handleDateClick(day)}
           >
             {day}
-          </div>
+          </motion.div>
         );
       }
 
@@ -89,24 +93,47 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(
         {...props}
       >
         <div className="flex flex-row items-center gap-2 mb-2">
-          <ChevronLeft
-            onClick={handlePrevMonth}
-            className="cursor-pointer rounded-md border-2 hover:bg-primary/30 hover:border-0 transition-colors"
-          />
-          <span className="flex text-lg font-bold text-center">
+          <motion.div
+            initial={{ opacity: 0, x: -10 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: 0.01 }}
+          >
+            <ChevronLeft
+              onClick={handlePrevMonth}
+              className="cursor-pointer rounded-md border-2 hover:bg-primary/30 hover:border-0 transition-colors"
+            />
+          </motion.div>
+          <motion.span 
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.01 }}
+            className="flex text-lg font-bold text-center"
+          >
             {currentDate.toLocaleString("default", { month: "long" })}{" "}
             {currentDate.getFullYear()}
-          </span>
-          <ChevronRight
-            onClick={handleNextMonth}
-            className="cursor-pointer rounded-md border-2 hover:bg-primary/30 hover:border-0 transition-colors"
-          />
+          </motion.span>
+          <motion.div
+            initial={{ opacity: 0, x: 10 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: 0.01 }}
+          >
+            <ChevronRight
+              onClick={handleNextMonth}
+              className="cursor-pointer rounded-md border-2 hover:bg-primary/30 hover:border-0 transition-colors"
+            />
+          </motion.div>
         </div>
         <div className="h-full w-full grid grid-cols-7 gap-1 p-2">
           {["S", "M", "T", "W", "T", "F", "S"].map((date, index) => (
-            <div key={`${date}-${index}`} className="grid-item place-self-center">
+            <motion.div 
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.01 * index }}
+              className="grid-item place-self-center"
+              key={`${date}-${index}`} 
+            >
               {date}
-            </div>
+            </motion.div>
           ))}
           {renderDays()}
         </div>

src/pages/Dashboard.tsx

@@ -11,8 +11,7 @@ import {
   MessageCircle,
   Map,
   HeartPulse,
-  ArrowDown,
-  ArrowUp
+  CheckIcon
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
@@ -185,7 +184,12 @@ const Dashboard: React.FC = () => {
           )}>
             {/* Current Streak Card - Check In Side */}
             {isCheckInSide ? (
-              <div>
+              <motion.div
+                key="check-in-side"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 0.5 }}
+              >
                 <CardHeader className="pb-2">
                   <CardTitle className="flex items-center">
                     <Trophy className="h-5 w-5 mr-2 text-primary" />
@@ -227,10 +231,15 @@ const Dashboard: React.FC = () => {
                     Edit Streak Start Date
                   </Button>
                 </CardFooter>
-              </div>
+              </motion.div>
             ) : (
               // Current Streak Card - Set Streak Start Date Side
-              <div>
+              <motion.div
+                key="streak-start-side"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                transition={{ duration: 0.5 }}
+              >
                 <CardHeader className="pb-2">
                   <CardTitle className="flex items-center">
                     <Trophy className="h-5 w-5 mr-2 text-primary" />
@@ -241,7 +250,7 @@ const Dashboard: React.FC = () => {
                   </CardDescription>
                 </CardHeader>
                 <CardContent>
-                  <div className="flex items-center justify-center py-6">
+                  <div className="flex items-center justify-center">
                     {/* calculate the streak start date to display in DatePicker */}
                     <DatePicker onDateChange={setSelectedDate} preselectedDate={new Date(Date.now() - streak * 24 * 60 * 60 * 1000)} />
                   </div>
@@ -251,7 +260,7 @@ const Dashboard: React.FC = () => {
                     onClick={handleStreakSet} 
                     className="w-full"
                   >
-                    Set Streak Start Date
+                    Set Streak Start Date <CheckIcon />
                   </Button>
                   <Button
                     variant="outline"
@@ -261,7 +270,7 @@ const Dashboard: React.FC = () => {
                     Cancel
                   </Button>
                 </CardFooter>
-              </div>
+              </motion.div>
             )}
           </Card>
         </motion.div>