72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import type { ReactNode } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { theme } from '../theme';
|
|
|
|
export interface TaskTab {
|
|
id: string;
|
|
label: string;
|
|
badge?: ReactNode;
|
|
}
|
|
|
|
interface TaskHeaderProps {
|
|
title: string;
|
|
subtitle?: string;
|
|
tabs: TaskTab[];
|
|
activeTab: string;
|
|
onTabChange: (tabId: string) => void;
|
|
}
|
|
|
|
/**
|
|
* Header for the Tasks screen: renders hero copy plus animated pill tabs.
|
|
*/
|
|
const TaskHeader: React.FC<TaskHeaderProps> = ({ title, subtitle, tabs, activeTab, onTabChange }) => {
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<div className="flex flex-col gap-3">
|
|
<h1
|
|
className="font-playfair text-3xl font-semibold text-cream"
|
|
style={{ letterSpacing: '0.6px' }}
|
|
>
|
|
{title}
|
|
</h1>
|
|
{subtitle && (
|
|
<p className="max-w-2xl text-base text-cream/70" style={theme.typography.body}>
|
|
{subtitle}
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
{tabs.map((tab) => {
|
|
const isActive = tab.id === activeTab;
|
|
return (
|
|
<button
|
|
key={tab.id}
|
|
type="button"
|
|
onClick={() => onTabChange(tab.id)}
|
|
className={`relative flex items-center gap-2 rounded-full border px-5 py-2 text-xs font-semibold uppercase tracking-[0.14em] transition-all duration-200 ${
|
|
isActive
|
|
? 'border-luxury-gold/70 bg-[#1A4036]/80 text-luxury-gold shadow-[0_10px_24px_rgba(203,169,81,0.35)]'
|
|
: 'border-transparent bg-transparent text-cream/60 hover:border-luxury-gold/30 hover:bg-[#1A4036]/30 hover:text-cream'
|
|
}`}
|
|
>
|
|
{isActive && (
|
|
<motion.span
|
|
layoutId="task-tab-glow"
|
|
className="absolute inset-0 rounded-full bg-luxury-gold/10"
|
|
transition={{ type: 'spring', stiffness: 260, damping: 24 }}
|
|
/>
|
|
)}
|
|
<span className="relative z-10">{tab.label}</span>
|
|
{tab.badge && <span className="relative z-10">{tab.badge}</span>}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TaskHeader;
|