Create Reusable Dashboard Widget Component Library

app/page.tsx

@@ -14,6 +14,7 @@ import ErrorFallback from '../components/ErrorFallback'
 import HrmTiles from '../components/HrmTiles'
 import TimerDisplay from '../components/TimerDisplay'
 import { useWebSocket } from '@/context/WebSocketContext'
+import DataWidget from '../components/widgets/DataWidget'
 
 const DOC_URL =
   'https://docs.google.com/document/d/e/2PACX-1vTev5AMiHYi2Jkg9x6zRQoiJ_o2X_wZMqAXVpwgjlSqzlcXelxSc7psjE8n3N-ghzXMFtnv51nc2fJZ/pub?embedded=true'
@@ -68,6 +69,9 @@ const Dashboard = () => {
           />
         </Grid>
 
+        <Grid item xs={12} sm={6} md={4} lg={3}>
+          <DataWidget title="Avg. Heart Rate" value="145" unit="bpm" />
+        </Grid>
         <ErrorBoundary fallback={<ErrorFallback />}>
           <HrmTiles />
         </ErrorBoundary>

components/widgets/DashboardWidget.tsx

@@ -0,0 +1,24 @@
+// components/widgets/DashboardWidget.tsx
+import React, { ReactNode } from 'react';
+import { Typography, Box } from '@mui/material';
+import StyledCard from '../shared/StyledCard';
+
+interface DashboardWidgetProps {
+  title: string;
+  children: ReactNode;
+}
+
+const DashboardWidget: React.FC<DashboardWidgetProps> = ({ title, children }) => {
+  return (
+    <StyledCard>
+      <Typography variant="h6" component="h2" gutterBottom>
+        {title}
+      </Typography>
+      <Box>
+        {children}
+      </Box>
+    </StyledCard>
+  );
+};
+
+export default DashboardWidget;

components/widgets/DataWidget.tsx

@@ -0,0 +1,29 @@
+// components/widgets/DataWidget.tsx
+import React from 'react';
+import { Typography, Box } from '@mui/material';
+import DashboardWidget from './DashboardWidget';
+
+interface DataWidgetProps {
+  title: string;
+  value: string | number;
+  unit?: string;
+}
+
+const DataWidget: React.FC<DataWidgetProps> = ({ title, value, unit }) => {
+  return (
+    <DashboardWidget title={title}>
+      <Box sx={{ display: 'flex', alignItems: 'baseline' }}>
+        <Typography variant="h4" component="span">
+          {value}
+        </Typography>
+        {unit && (
+          <Typography variant="subtitle1" component="span" sx={{ ml: 1 }}>
+            {unit}
+          </Typography>
+        )}
+      </Box>
+    </DashboardWidget>
+  );
+};
+
+export default DataWidget;