panel/components/common/NavigationToolbar.tsx

"use client";

import { useRouter } from "next/navigation";
import { Button } from "../ui/button";
import { ArrowLeft, Star } from "lucide-react";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
import { Label } from "../ui/label";
import { Input } from "../ui/input";

export function NavigationToolbar({ children }: { children: string }) {
  const router = useRouter();
  const savedAsBookmark = false;

  return (
    <div className="flex items-center gap-2">
      <Button variant="outline" size="icon" onClick={() => router.back()}>
        <ArrowLeft className="h-4 w-4" />
      </Button>
      <Popover>
        <PopoverTrigger asChild>
          <Button variant="outline" size="icon">
            <Star
              className="h-4 w-4"
              fill={savedAsBookmark ? "black" : "transparent"}
            />
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-80">
          <div className="grid gap-4">
            <div className="space-y-2">
              <h4 className="font-medium leading-none">Bookmark</h4>
              <p className="text-sm text-muted-foreground">
                You&apos;ve saved this page for later.
              </p>
            </div>
            <div className="grid gap-2">
              <div className="grid grid-cols-3 items-center gap-4">
                <Label htmlFor="description">Description</Label>
                <Input id="description" className="col-span-2 h-8" />
              </div>
              {savedAsBookmark ? (
                <>
                  <Button variant="secondary">Update</Button>
                  <Button variant="destructive">Remove</Button>
                </>
              ) : (
                <Button variant="secondary">Save</Button>
              )}
            </div>
          </div>
        </PopoverContent>
      </Popover>
      <h2 className="text-2xl">{children}</h2>
    </div>
  );
}