84 lines
2.0 KiB
TypeScript
84 lines
2.0 KiB
TypeScript
import Clock from '../Clock';
|
|
import { Config } from '../../types';
|
|
|
|
interface HeaderProps {
|
|
config: Config;
|
|
}
|
|
|
|
const getClockSizeClass = (size: string) => {
|
|
switch (size) {
|
|
case 'tiny':
|
|
return 'text-3xl';
|
|
case 'small':
|
|
return 'text-4xl';
|
|
case 'medium':
|
|
return 'text-5xl';
|
|
case 'large':
|
|
return 'text-6xl';
|
|
default:
|
|
return 'text-5xl';
|
|
}
|
|
};
|
|
|
|
const getTitleSizeClass = (size: string) => {
|
|
switch (size) {
|
|
case 'tiny':
|
|
return 'text-4xl';
|
|
case 'small':
|
|
return 'text-5xl';
|
|
case 'medium':
|
|
return 'text-6xl';
|
|
case 'large':
|
|
return 'text-7xl';
|
|
default:
|
|
return 'text-6xl';
|
|
}
|
|
};
|
|
|
|
const getSubtitleSizeClass = (size: string) => {
|
|
switch (size) {
|
|
case 'tiny':
|
|
return 'text-lg';
|
|
case 'small':
|
|
return 'text-xl';
|
|
case 'medium':
|
|
return 'text-2xl';
|
|
case 'large':
|
|
return 'text-3xl';
|
|
default:
|
|
return 'text-2xl';
|
|
}
|
|
};
|
|
|
|
const Header: React.FC<HeaderProps> = ({ config }) => {
|
|
return (
|
|
<>
|
|
{config.clock.enabled && (
|
|
<div className="absolute top-5 left-1/2 -translate-x-1/2 z-10 flex justify-center w-auto p-2">
|
|
<Clock config={config} getClockSizeClass={getClockSizeClass} />
|
|
</div>
|
|
)}
|
|
<div className={`flex flex-col ${config.alignment === 'bottom' ? 'mt-auto' : ''} items-center`}>
|
|
{(config.title || config.subtitle) && (
|
|
<div className="text-center">
|
|
<h1
|
|
className={`${getTitleSizeClass(config.titleSize)} font-extrabold text-white tracking-tighter mb-3 mt-4`}
|
|
style={{ textShadow: '0 2px 4px rgba(0,0,0,0.5)' }}
|
|
>
|
|
{config.title}
|
|
</h1>
|
|
<p
|
|
className={`${getSubtitleSizeClass(config.subtitleSize)} text-slate-300`}
|
|
style={{ textShadow: '0 1px 3px rgba(0,0,0,0.5)' }}
|
|
>
|
|
{config.subtitle}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Header;
|