ultisuite-client/components/gmail/contacts-page/contacts-header.tsx
R3D347HR4Y 6ec95262af Add OnlyOffice integration and update project configurations
- Updated .env.example to include configuration for OnlyOffice Document Server.
- Modified the workspace configuration to remove the drive-suite path.
- Adjusted TypeScript environment imports for consistency.
- Enhanced Next.js configuration to disable canvas in Webpack.
- Updated package.json to include new dependencies for OnlyOffice and PDF.js.
- Added global styles for OnlyOffice theme integration in the CSS.
- Created new layout and page components for the Drive feature, including public sharing and editing functionalities.
- Updated metadata handling across various layouts to reflect the new app structure.
2026-06-07 15:49:21 +02:00

71 lines
2.0 KiB
TypeScript

"use client"
import { Menu, Search, X } from "lucide-react"
import { Button } from "@/components/ui/button"
import { HeaderAccountActions } from "@/components/suite/header-account-actions"
import {
CONTACTS_ICON_BTN_CLASS,
CONTACTS_SEARCH_BAR_CLASS,
CONTACTS_SEARCH_INPUT_CLASS,
} from "@/lib/contacts-chrome-classes"
import { cn } from "@/lib/utils"
interface ContactsHeaderProps {
searchQuery: string
onSearchChange: (q: string) => void
sidebarOpen: boolean
onOpenSidebar: () => void
}
export function ContactsHeader({
searchQuery,
onSearchChange,
sidebarOpen,
onOpenSidebar,
}: ContactsHeaderProps) {
return (
<header className="flex h-16 shrink-0 items-center gap-2 border-b border-border bg-mail-surface px-3 sm:gap-4 sm:px-6">
{!sidebarOpen && (
<Button
type="button"
variant="ghost"
size="icon"
className={cn("h-10 w-10 shrink-0 rounded-full", CONTACTS_ICON_BTN_CLASS)}
onClick={onOpenSidebar}
aria-label="Ouvrir le menu"
>
<Menu className="h-5 w-5" />
</Button>
)}
<div className="flex min-w-0 flex-1 items-center">
<div className={CONTACTS_SEARCH_BAR_CLASS}>
<Search className="h-5 w-5 shrink-0 text-muted-foreground" />
<input
type="text"
value={searchQuery}
onChange={(e) => onSearchChange(e.target.value)}
placeholder="Rechercher"
className={CONTACTS_SEARCH_INPUT_CLASS}
/>
{searchQuery && (
<button
type="button"
onClick={() => onSearchChange("")}
className="rounded-full p-1 hover:bg-accent"
aria-label="Effacer la recherche"
>
<X className="h-4 w-4 text-muted-foreground" />
</button>
)}
</div>
</div>
<HeaderAccountActions
className="shrink-0 pl-1 sm:pl-4"
settingsHref="/mail/settings/accounts"
/>
</header>
)
}