refactors!

components/layout/Header.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+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;