42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { useSleepSession } from '../../hooks/useSleepSession';
|
|
import { formatElapsedTime } from '../../utils/time';
|
|
|
|
const StatusBanner = () => {
|
|
const { activeSession, isLoading } = useSleepSession();
|
|
const [elapsed, setElapsed] = useState<string>('');
|
|
|
|
useEffect(() => {
|
|
if (!activeSession) {
|
|
setElapsed('');
|
|
return;
|
|
}
|
|
|
|
const updateElapsed = () => {
|
|
setElapsed(formatElapsedTime(activeSession.start_time));
|
|
};
|
|
|
|
updateElapsed();
|
|
const interval = setInterval(updateElapsed, 1000);
|
|
return () => clearInterval(interval);
|
|
}, [activeSession?.start_time]);
|
|
|
|
if (isLoading) return <div className="p-4 text-center">Loading...</div>;
|
|
|
|
if (activeSession) {
|
|
return (
|
|
<div className="bg-amber-100 text-amber-800 p-4 rounded-lg shadow-sm mb-4 flex items-center justify-center space-x-2">
|
|
<span>Baby is sleeping 😴</span>
|
|
{elapsed && <span className="font-mono">({elapsed})</span>}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="bg-blue-100 text-blue-800 p-4 rounded-lg shadow-sm mb-4 flex items-center justify-center space-x-2">
|
|
<span>Baby is awake 👶</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default StatusBanner; |