-
Hello World
+
+
+
Background Remover
+
+ Remove backgrounds from images with AI-powered precision
+
+
);
}
diff --git a/apps/tools/src/components/header.tsx b/apps/tools/src/components/header.tsx
index 5a35b399..1cca54dd 100644
--- a/apps/tools/src/components/header.tsx
+++ b/apps/tools/src/components/header.tsx
@@ -1,33 +1,36 @@
"use client";
-import { useState } from "react";
import Link from "next/link";
-import { motion } from "motion/react";
+import { usePathname } from "next/navigation";
import { Button } from "./ui/button";
-import { ArrowRight } from "lucide-react";
import Image from "next/image";
-import { ThemeToggle } from "./theme-toggle";
-import { GithubIcon, MenuIcon } from "@opencut/ui/icons";
-import { cn } from "@/lib/utils";
-import { DEFAULT_LOGO_URL, SOCIAL_LINKS } from "@/constants/site-constants";
+import { DEFAULT_LOGO_URL } from "@/constants/site-constants";
+import {
+ HoverCard,
+ HoverCardContent,
+ HoverCardTrigger,
+} from "@/components/ui/hover-card";
+import { CheckIcon } from "lucide-react";
-export function Header() {
- const [isMenuOpen, setIsMenuOpen] = useState(false);
-
- const links = [
- {
- label: "Contributors",
- href: "/contributors",
+export function Header({rightContent}: {rightContent?: React.ReactNode}) {
+ const pathname = usePathname();
+ const tools = {
+ video: {
+ label: "Video tools",
+ items: [
+ { name: "Video Editor", href: "/video-editor" },
+ { name: "Video Compressor", href: "/video-compressor" },
+ { name: "Video Converter", href: "/video-converter" },
+ ],
},
- {
- label: "Sponsors",
- href: "/sponsors",
+ image: {
+ label: "Image tools",
+ items: [
+ { name: "BG Remover", href: "/bg-remover" },
+ { name: "Color Replacer", href: "/color-replacer" },
+ ],
},
- {
- label: "Blog",
- href: "/blog",
- },
- ];
+ };
return (
@@ -42,88 +45,41 @@ export function Header() {
height={32}
/>
-
-
- setIsMenuOpen(false)}
- >
-
-
- {links.map((link, index) => (
-
- setIsMenuOpen(false)}
- >
- {link.label}
-
-
- ))}
-
- {
- e.preventDefault();
- e.stopPropagation();
- }}
- />
-
-
+ {rightContent}
);
diff --git a/apps/tools/src/components/ui/button.tsx b/apps/tools/src/components/ui/button.tsx
index 1d4d6e5e..8b36ef29 100644
--- a/apps/tools/src/components/ui/button.tsx
+++ b/apps/tools/src/components/ui/button.tsx
@@ -13,8 +13,6 @@ const buttonVariants = cva(
"bg-foreground text-background shadow-sm hover:bg-foreground/90",
primary:
"bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
- "primary-gradient":
- "bg-gradient-to-r from-cyan-400 to-blue-500 text-white hover:opacity-85 transition-opacity",
destructive:
"bg-destructive/0 border border-destructive/25 text-destructive shadow-xs hover:bg-destructive hover:text-destructive-foreground",
outline:
diff --git a/apps/tools/src/components/ui/popover.tsx b/apps/tools/src/components/ui/popover.tsx
index 406ff8eb..0fada7f0 100644
--- a/apps/tools/src/components/ui/popover.tsx
+++ b/apps/tools/src/components/ui/popover.tsx
@@ -21,7 +21,7 @@ const PopoverContent = React.forwardRef<
align={align}
sideOffset={sideOffset}
className={cn(
- "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-[0_0_10px_rgba(0,0,0,0.15)] outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+ "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-[0_0_20px_rgba(0,0,0,0.15)] outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className
)}
{...props}
diff --git a/apps/tools/src/components/ui/spinner.tsx b/apps/tools/src/components/ui/spinner.tsx
new file mode 100644
index 00000000..3e4ea072
--- /dev/null
+++ b/apps/tools/src/components/ui/spinner.tsx
@@ -0,0 +1,17 @@
+import { Loader2Icon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+ return (
+