9df51ea38c
This commit updates the project name from 'if.emotion' to 'if-emotion-ux' across configuration files. It also reconciles the React and related dependencies, ensuring consistent versions and updating CDN import maps in `index.html` to reflect React v18.3.1. Additionally, the `puppeteer` dev dependency has been removed, and the `advancedMode` setting has been removed from `UserSettings`, simplifying the configuration. The sidebar now groups sessions by date (Today, Yesterday, Older) for improved organization. The export modal has been updated with new icons and text based on the selected language, and a title prop has been added. The removal of `puppeteer` suggests a shift away from end-to-end testing or a similar integration that relied on it. The simplification of settings and the inclusion of more robust session grouping enhance the user experience and maintainability.
71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
|
|
import React from 'react';
|
|
import { Menu, Settings, Download } from 'lucide-react';
|
|
|
|
interface Props {
|
|
sessionCount: number;
|
|
isOffTheRecord: boolean;
|
|
onOpenSidebar: () => void;
|
|
onOpenSettings: () => void;
|
|
onExport: () => void;
|
|
}
|
|
|
|
export function JourneyHeader({
|
|
sessionCount,
|
|
isOffTheRecord,
|
|
onOpenSidebar,
|
|
onOpenSettings,
|
|
onExport
|
|
}: Props) {
|
|
return (
|
|
<header className="sticky top-0 z-10 bg-sergio-50/95 backdrop-blur-sm border-b border-sergio-200 px-4 py-3">
|
|
<div className="max-w-4xl mx-auto flex items-center justify-between">
|
|
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
onClick={onOpenSidebar}
|
|
className="p-2 -ml-2 text-sergio-600 hover:bg-sergio-200 rounded-lg transition-colors md:hidden"
|
|
aria-label="Open sidebar"
|
|
>
|
|
<Menu size={20} />
|
|
</button>
|
|
|
|
<div className="flex flex-col">
|
|
<h1 className="text-xl font-spanish font-bold text-sergio-700 tracking-tight leading-none">
|
|
if.emotion
|
|
</h1>
|
|
{!isOffTheRecord && (
|
|
<p className="text-[10px] text-sergio-500 font-english uppercase tracking-widest mt-1">
|
|
Session #{sessionCount}
|
|
</p>
|
|
)}
|
|
{isOffTheRecord && (
|
|
<p className="text-[10px] text-red-700 font-english uppercase tracking-widest mt-1 font-bold">
|
|
Off the Record
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
{!isOffTheRecord && (
|
|
<button
|
|
onClick={onExport}
|
|
className="p-2 text-sergio-500 hover:text-sergio-800 hover:bg-sergio-100 rounded-lg transition-colors"
|
|
title="Export Journey"
|
|
>
|
|
<Download size={20} strokeWidth={1.5} />
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={onOpenSettings}
|
|
className="p-2 text-sergio-500 hover:text-sergio-800 hover:bg-sergio-100 rounded-lg transition-colors"
|
|
title="Settings"
|
|
>
|
|
<Settings size={20} strokeWidth={1.5} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|