initial state: muzick music player + recommendation engine

2026-07-14 01:35:52 +04:00
commit 737bf19fd1
196 changed files with 32431 additions and 0 deletions
@@ -0,0 +1,35 @@
+import type { LucideIcon } from 'lucide-react';
+
+interface PageHeaderProps {
+  icon?: LucideIcon;
+  title: string;
+  subtitle?: string;
+  /** Optional right-aligned actions (buttons, toggles, etc.). */
+  actions?: React.ReactNode;
+}
+
+/**
+ * Consistent page heading: a gradient title with an optional accent icon chip,
+ * subtitle, and right-aligned action slot. Used across the library pages so
+ * every screen opens the same way.
+ */
+export function PageHeader({ icon: Icon, title, subtitle, actions }: PageHeaderProps) {
+  return (
+    <div className="flex items-end justify-between gap-4 animate-rise">
+      <div className="flex items-center gap-4 min-w-0">
+        {Icon && (
+          <div className="flex h-12 w-12 flex-none items-center justify-center rounded-2xl bg-accent/15 text-accent ring-1 ring-accent/25 shadow-lg shadow-accent/10">
+            <Icon size={24} />
+          </div>
+        )}
+        <div className="min-w-0">
+          <h1 className="text-gradient truncate text-3xl font-extrabold tracking-tight sm:text-4xl">
+            {title}
+          </h1>
+          {subtitle && <p className="mt-1 truncate text-sm text-muted">{subtitle}</p>}
+        </div>
+      </div>
+      {actions && <div className="flex flex-none items-center gap-2">{actions}</div>}
+    </div>
+  );
+}