Task Header

1"use client";
2 
3import * as React from "react";
4import {
5  Calendar as CalendarIcon,
6  Plus,
7  Link as LinkIcon,
8  Github,
9} from "lucide-react";
10import { Button } from "@/components/ui/button";
11import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
12import { SidebarTrigger } from "@/components/ui/sidebar";
13import { ThemeToggle } from "@/components/theme-toggle";
14import { Calendar } from "@/components/ui/calendar";
15import {
16  Popover,
17  PopoverContent,
18  PopoverTrigger,
19} from "@/components/ui/popover";
20import Link from "next/link";
21import { TaskFilters } from "./task-filters";
22import { TaskSort } from "./task-sort";
23import { TaskAutomate } from "./task-automate";
24import { TaskImportExport } from "./task-import-export";
25 
26export function TaskHeader() {
27  const [open, setOpen] = React.useState(false);
28  const [date, setDate] = React.useState<Date | undefined>(
29    new Date("2024-09-07")
30  );
31  return (
32    <div className="border-b border-border bg-background">
33      <div className="flex items-center justify-between px-3 lg:px-6 py-3">
34        <div className="flex items-center gap-2">
35          <SidebarTrigger />
36          <div className="flex items-center gap-2">
37            <h1 className="text-base lg:text-lg font-semibold">Task</h1>
38          </div>
39        </div>
40 
41        <div className="flex items-center gap-2 lg:gap-4">
42          <Button variant="outline" className="shadow-none" asChild>
43            <Link
44              href="https://github.com/ln-dev7/square-ui/tree/master/templates/task-management"
45              target="_blank"
46              rel="noopener noreferrer"
47            >
48              <Github className="size-4" />
49              GitHub
50            </Link>
51          </Button>
52          <ThemeToggle />
53          <div className="hidden lg:flex items-center gap-2 text-sm text-muted-foreground">
54            <span>Last update 3 days ago</span>
55            <div className="flex -space-x-2 ml-2">
56              <Avatar className="size-5 border-2 border-background">
57                <AvatarImage src="https://api.dicebear.com/9.x/glass/svg?seed=AliceJohnson" />
58                <AvatarFallback>A</AvatarFallback>
59              </Avatar>
60              <Avatar className="size-5 border-2 border-background">
61                <AvatarImage src="https://api.dicebear.com/9.x/glass/svg?seed=BobSmith" />
62                <AvatarFallback>B</AvatarFallback>
63              </Avatar>
64              <Avatar className="size-5 border-2 border-background">
65// … truncated