Appheaders3

1import { Button } from "@/ui/button";
2import { Input } from "@/ui/input";
3import {
4  Tooltip,
5  TooltipContent,
6  TooltipProvider,
7  TooltipTrigger,
8} from "@/ui/tooltip";
9import { Download, Plus, Search, Upload } from "@mynaui/icons-react";
10 
11export default function AppHeaders2() {
12  return (
13    <header className="flex items-center justify-between gap-4 border-b bg-background px-6 py-4">
14      <div className="flex items-center gap-4">
15        <h1 className="text-lg font-semibold">Products</h1>
16        <div className="relative hidden md:block">
17          <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
18          <Input
19            type="search"
20            placeholder="Search products..."
21            className="w-[280px] pl-9"
22          />
23        </div>
24      </div>
25 
26      <div className="flex items-center gap-2">
27        <TooltipProvider>
28          <Tooltip>
29            <TooltipTrigger asChild>
30              <Button variant="outline" size="icon">
31                <Upload className="size-4" />
32              </Button>
33            </TooltipTrigger>
34            <TooltipContent>
35              <p>Import Products</p>
36            </TooltipContent>
37          </Tooltip>
38        </TooltipProvider>
39 
40        <TooltipProvider>
41          <Tooltip>
42            <TooltipTrigger asChild>
43              <Button variant="outline" size="icon">
44                <Download className="size-4" />
45              </Button>
46            </TooltipTrigger>
47            <TooltipContent>
48              <p>Export Products</p>
49            </TooltipContent>
50          </Tooltip>
51        </TooltipProvider>
52 
53        <Button>
54          <Plus className="size-4 stroke-2" />
55          Add Product
56        </Button>
57      </div>
58    </header>
59  );
60}