mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-05-29 19:35:20 +02:00
89 lines
3.3 KiB
TypeScript
89 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { Search } from "lucide-react";
|
|
import { type FC } from "react";
|
|
import {
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import {
|
|
TabsList,
|
|
TabsTrigger,
|
|
} from "@/components/ui/tabs";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface ConnectorDialogHeaderProps {
|
|
activeTab: string;
|
|
totalSourceCount: number;
|
|
searchQuery: string;
|
|
onTabChange: (value: string) => void;
|
|
onSearchChange: (query: string) => void;
|
|
isScrolled: boolean;
|
|
}
|
|
|
|
export const ConnectorDialogHeader: FC<ConnectorDialogHeaderProps> = ({
|
|
activeTab,
|
|
totalSourceCount,
|
|
searchQuery,
|
|
onTabChange,
|
|
onSearchChange,
|
|
isScrolled,
|
|
}) => {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex-shrink-0 px-6 sm:px-12 pt-8 sm:pt-10 transition-shadow duration-200 relative z-10",
|
|
isScrolled && "shadow-xl bg-muted/50 backdrop-blur-md"
|
|
)}
|
|
>
|
|
<DialogHeader>
|
|
<DialogTitle className="text-2xl sm:text-3xl font-semibold tracking-tight">
|
|
Connectors
|
|
</DialogTitle>
|
|
<DialogDescription className="text-sm sm:text-base text-muted-foreground/80 mt-1 sm:mt-1.5">
|
|
Search across all your apps and data in one place.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="flex flex-col-reverse sm:flex-row sm:items-end justify-between gap-6 sm:gap-8 mt-6 sm:mt-8 border-b border-slate-400/5 dark:border-white/5">
|
|
<TabsList className="bg-transparent p-0 gap-4 sm:gap-8 h-auto w-full sm:w-auto justify-center sm:justify-start">
|
|
<TabsTrigger
|
|
value="all"
|
|
className="px-0 pb-3 bg-transparent data-[state=active]:bg-transparent shadow-none data-[state=active]:shadow-none rounded-none border-b-[1.5px] border-transparent data-[state=active]:border-foreground dark:data-[state=active]:border-white transition-all text-base font-medium text-muted-foreground data-[state=active]:text-foreground"
|
|
>
|
|
All Connectors
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="active"
|
|
className="group px-0 pb-3 bg-transparent data-[state=active]:bg-transparent shadow-none data-[state=active]:shadow-none rounded-none border-b-[1.5px] border-transparent transition-all text-base font-medium flex items-center gap-2 text-muted-foreground data-[state=active]:text-foreground relative"
|
|
>
|
|
<span className="relative">
|
|
Active
|
|
<span className="absolute bottom-[-13.5px] left-1/2 -translate-x-1/2 w-12 h-[1.5px] bg-foreground dark:bg-white opacity-0 group-data-[state=active]:opacity-100 transition-all duration-200" />
|
|
</span>
|
|
{totalSourceCount > 0 && (
|
|
<span className="px-1.5 py-0.5 rounded-full bg-muted-foreground/15 text-[10px] font-bold">
|
|
{totalSourceCount}
|
|
</span>
|
|
)}
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<div className="w-full sm:w-72 sm:pb-1">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground/60" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search"
|
|
className="w-full bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10 focus:bg-slate-400/10 dark:focus:bg-white/10 border border-border rounded-xl pl-9 pr-4 py-2 text-sm transition-all outline-none placeholder:text-muted-foreground/50"
|
|
value={searchQuery}
|
|
onChange={(e) => onSearchChange(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|