Steakpage and Steak card on header ( with hard coded values)

src/components/common/Header.jsx

@@ -1,5 +1,6 @@
 import { useUser } from '@contexts/UserContext';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import FireIcon from '@mui/icons-material/Whatshot';
 import { AppBar, Avatar, Box, Button, IconButton, Toolbar, Typography } from '@mui/material';
 import { useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -16,6 +17,8 @@ const Header = () => {
   // Show back button only on pages other than Home and Streak
   const showBackButton = location.pathname !== '/' && location.pathname !== '/streak';
 
+  //  Hard Coded streak count
+  const streakCount = 7;
   return (
     <AppBar position="sticky" sx={{ backgroundColor: 'primary.light', color: '#000' }}>
       <Toolbar sx={{ justifyContent: 'space-between', position: 'relative' }}>
@@ -47,6 +50,16 @@ const Header = () => {
         <Box sx={{ display: 'flex', alignItems: 'center' }}>
           {user ? (
             <>
+              {/* Streak Fire Icon and Count */}
+              <Box
+                sx={{ display: 'flex', alignItems: 'center', mr: 2, cursor: 'pointer' }}
+                onClick={() => navigate('/streak')}
+              >
+                <FireIcon sx={{ color: 'primary.main', fontSize: 30 }} />
+                <Typography variant="body2" sx={{ ml: 0.5, fontWeight: 'bold', color: 'black' }}>
+                  {streakCount}
+                </Typography>
+              </Box>
               <IconButton edge="end" color="inherit" onClick={() => setOpenConfirmDialog(true)}>
                 <Avatar alt={user.displayName} src={user.photoURL} />
               </IconButton>

src/pages/Streak.jsx

@@ -1,9 +1,95 @@
-import { Box } from '@mui/material';
+import { Box, Typography, Grid } from '@mui/material';
+import FireIcon from '@mui/icons-material/Whatshot';
+import "@styles/StreakPage.css";
+import { useTheme } from '@mui/material/styles';
+
+// Days of the week headers
+const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
 
 const Streak = () => {
+  //  Hard coded streak days
+  const streakCount = 7;
+  const completedDays = [18, 19, 22, 23, 24, 25, 26, 27, 28];
+
+  //month start and end dates
+  const monthStart = new Date(2024, 9, 1);
+  const monthEnd = new Date(2024, 9 + 1, 0);
+
+  // Array to hold each day in October 2024 with the correct weekday alignment
+  const daysInCalendar = [];
+  const totalDays = monthEnd.getDate();
+  const startDay = monthStart.getDay();
+
+  // Adding empty cells for days before the month starts
+  for (let i = 0; i < startDay; i++) {
+    daysInCalendar.push(null);
+  }
+  for (let day = 1; day <= totalDays; day++) {
+    daysInCalendar.push({
+      day,
+      completed: completedDays.includes(day),
+    });
+  }
   return (
-    <Box sx={{ justifyContent: 'center', display: 'flex' }}>
-      <h1>Streak</h1>
+    <Box sx={{ textAlign: 'center', mt: 4 }}>
+      <FireIcon
+        sx={{
+          fontSize: 120,
+          color: "primary.dark",
+          animation: 'burn-animation 1s infinite',
+        }}
+      />
+      <Typography variant="h4" sx={{ fontWeight: 'bold', mt: 2, mb: 3 }}>
+        {streakCount} Day Streak
+      </Typography>
+
+      <Typography variant="body2" sx={{ mb: 1, fontSize: '1rem' }}>
+        October 2024
+      </Typography>
+
+
+
+      {/* Days of the Week Headers */}
+      <Grid container spacing={1} sx={{ maxWidth: 500, margin: 'auto' }}>
+        {daysOfWeek.map((day) => (
+          <Grid item xs={12 / 7} key={day}>
+            <Typography variant="body2" sx={{ fontWeight: 'bold', textAlign: 'center' }}>
+              {day}
+            </Typography>
+          </Grid>
+        ))}
+      </Grid>
+
+      {/* Calendar Grid */}
+      <Grid container spacing={1} sx={{ maxWidth: 500, margin: 'auto' }}>
+        {daysInCalendar.map((dayObj, index) => (
+          <Grid item xs={12 / 7} key={index}>
+            <Box
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                height: '50px', // Height of each calendar cell
+              }}
+            >
+              {dayObj ? (
+                <>
+                  <Typography variant="caption">{dayObj.day}</Typography>
+                  <FireIcon
+                    sx={{
+                      color: dayObj.completed ? "primary.main" : 'gray',
+                      fontSize: 28,
+                      animation: dayObj.completed ? 'burn-animation 3s infinite' : 'none',
+                    }}
+                  />
+                </>
+              ) : (
+                <Typography variant="caption">&nbsp;</Typography> // Empty space for non-month dates
+              )}
+            </Box>
+          </Grid>
+        ))}
+      </Grid>
     </Box>
   );
 };

src/styles/StreakPage.css

@@ -0,0 +1,14 @@
+/* src/styles/styles.css or src/styles/Streak.css */
+@keyframes burn-animation {
+    0% {
+        transform: scale(1);
+    }
+
+    50% {
+        transform: scale(1.1);
+    }
+
+    100% {
+        transform: scale(1);
+    }
+}