hrm/components/HrTile.tsx at 089a3debafdbbf81704c86b9dc6c4d2094c52003 · arii/hrm · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
// File: components/HrTile.tsx
'use client'
import CardContent from '@mui/material/CardContent'
import Tooltip from '@mui/material/Tooltip'
import Typography from '@mui/material/Typography'
import { memo } from 'react'
import StyledCard from './shared/StyledCard'

export interface HrTileProps {
  name: string
  bpm: number
  percentMax: number // 0-100
  background: string // hex color
  gradient: string // CSS linear-gradient string for text
  glow: string // CSS box-shadow for card glow
}

const HrTile = ({
  name,
  bpm,
  percentMax,
  background,
  gradient,
  glow,
}: HrTileProps) => {
  return (
    <Tooltip
      title={`Name: ${name}, BPM: ${bpm}, % Max HR: ${percentMax}%`}
      arrow
    >
      <StyledCard
        data-testid="hr-tile-card"
        role="region"
        aria-label={`Heart rate monitor for ${name}: ${bpm} beats per minute, ${percentMax}% of maximum`}
        sx={{
          backgroundColor: background,
          color: '#fff',
          textAlign: 'center',
          minHeight: 180,
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          boxShadow: glow, // Apply the glow effect here
        }}
      >
        <CardContent sx={{ p: 0 }}>
          {/* Giant Percentage - should dominate the tile */}
          <Typography
            sx={{
              fontFamily: 'var(--font-roboto-mono), "Courier New", monospace',
              fontSize: { xs: '6rem', sm: '7rem', md: '8rem' },
              fontWeight: 900,
              lineHeight: 0.85,
              my: 0.5,
              background: gradient, // Apply gradient background
              WebkitBackgroundClip: 'text', // Clip text to background
              WebkitTextFillColor: 'transparent', // Make text transparent
              textShadow: '0 2px 4px rgba(0,0,0,0.2)',
            }}
          >
            {percentMax}%
          </Typography>
          <Typography
            variant="h6"
            sx={{
              fontWeight: 600,
              fontSize: { xs: '1.25rem', sm: '1.5rem' },
              transition: 'font-size 0.3s ease-in-out, color 0.3s ease-in-out', // Subtle animation
            }}
          >
            {bpm} BPM
          </Typography>
          {name && !/^(user|new user)$/i.test(name) && (
            <Typography
              variant="subtitle1"
              sx={{
                fontWeight: 700,
                fontSize: { xs: '1.25rem', sm: '1.5rem' },
                letterSpacing: '0.05em',
                mt: 1, // Add some margin top to separate from BPM
                textOverflow: 'ellipsis', // Truncate with ellipsis
                whiteSpace: 'nowrap', // Prevent wrapping
                overflow: 'hidden', // Hide overflow content
              }}
            >
              {name}
            </Typography>
          )}
        </CardContent>
      </StyledCard>
    </Tooltip>
  )
}

export default memo(HrTile)