RomanNum3ral
/
OpenCut
mirror of https://github.com/OpenCut-app/OpenCut.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge 44c4fd5e67 into 238750c025

This commit is contained in:
Dipanshu Rawat 2026-05-19 10:40:55 +07:00 committed by GitHub
parent 238750c025 44c4fd5e67
commit a2e0bbdd47
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 198 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

396
apps/web/src/components/header.tsx
View File

@ -1,198 +1,198 @@
"use client"; "use client";
import { useState } from "react"; import { useState } from "react";
import Link from "next/link"; import Link from "next/link";
import { motion } from "motion/react"; import { motion } from "motion/react";
import { Button } from "./ui/button"; import { Button } from "./ui/button";
import { ArrowRight } from "lucide-react"; import { ArrowRight } from "lucide-react";
import Image from "next/image"; import Image from "next/image";
import { ThemeToggle } from "./theme-toggle"; import { ThemeToggle } from "./theme-toggle";
import { import {
Copy01Icon, Copy01Icon,
Download01Icon, Download01Icon,
GithubIcon, GithubIcon,
LinkSquare02Icon, LinkSquare02Icon,
Menu02Icon, Menu02Icon,
} from "@hugeicons/core-free-icons"; } from "@hugeicons/core-free-icons";
import { HugeiconsIcon } from "@hugeicons/react"; import { HugeiconsIcon } from "@hugeicons/react";
import { cn } from "@/utils/ui"; import { cn } from "@/utils/ui";
import { DEFAULT_LOGO_URL, SITE_URL } from "@/site/brand"; import { DEFAULT_LOGO_URL, SITE_URL } from "@/site/brand";
import { SOCIAL_LINKS } from "@/site/social"; import { SOCIAL_LINKS } from "@/site/social";
import { import {
ContextMenu, ContextMenu,
ContextMenuContent, ContextMenuContent,
ContextMenuItem, ContextMenuItem,
ContextMenuTrigger, ContextMenuTrigger,
} from "./ui/context-menu"; } from "./ui/context-menu";
export function Header() { export function Header() {
const [isMenuOpen, setIsMenuOpen] = useState(false); const [isMenuOpen, setIsMenuOpen] = useState(false);
const closeMenu = () => setIsMenuOpen(false); const closeMenu = () => setIsMenuOpen(false);
const links = [ const links = [
{ {
label: "Roadmap", label: "Roadmap",
href: "/roadmap", href: "/roadmap",
}, },
{ {
label: "Contributors", label: "Contributors",
href: "/contributors", href: "/contributors",
}, },
{ {
label: "Sponsors", label: "Sponsors",
href: "/sponsors", href: "/sponsors",
}, },
{ {
label: "Blog", label: "Blog",
href: "/blog", href: "/blog",
}, },
]; ];
return ( return (
<header className="bg-background shadow-background/85 sticky top-0 z-10 shadow-[0_30px_35px_15px_rgba(0,0,0,1)]"> <header className="bg-background shadow-background/85 sticky top-0 z-10 shadow-[0_30px_35px_15px_rgba(0,0,0,1)]">
<div className="relative flex w-full items-center justify-between px-6 pt-4"> <div className="relative flex w-full items-center justify-between px-6 pt-4">
<div className="relative z-10 flex items-center gap-6"> <div className="relative z-10 flex items-center gap-6">
<ContextMenu> <ContextMenu>
<ContextMenuTrigger asChild> <ContextMenuTrigger asChild>
<Link href="/" className="flex items-center gap-3"> <Link href="/" className="flex items-center gap-3">
<Image <Image
src={DEFAULT_LOGO_URL} src={DEFAULT_LOGO_URL}
alt="OpenCut Logo" alt="OpenCut Logo"
className="invert dark:invert-0" className="invert dark:invert-0"
width={32} width={32}
height={32} height={32}
/> />
</Link> </Link>
</ContextMenuTrigger> </ContextMenuTrigger>
<ContextMenuContent> <ContextMenuContent>
<ContextMenuItem <ContextMenuItem
onClick={async () => { onClick={async () => {
const res = await fetch(DEFAULT_LOGO_URL); const res = await fetch(DEFAULT_LOGO_URL);
const svg = await res.text(); const svg = await res.text();
await navigator.clipboard.writeText(svg); await navigator.clipboard.writeText(svg);
}} }}
> >
<HugeiconsIcon icon={Copy01Icon} /> <HugeiconsIcon icon={Copy01Icon} />
Copy SVG Copy SVG
</ContextMenuItem> </ContextMenuItem>
<ContextMenuItem <ContextMenuItem
onClick={() => { onClick={() => {
const a = document.createElement("a"); const a = document.createElement("a");
a.href = DEFAULT_LOGO_URL; a.href = DEFAULT_LOGO_URL;
a.download = "opencut-logo.svg"; a.download = "opencut-logo.svg";
a.click(); a.click();
}} }}
> >
<HugeiconsIcon icon={Download01Icon} /> <HugeiconsIcon icon={Download01Icon} />
Download SVG Download SVG
</ContextMenuItem> </ContextMenuItem>
<Link href="/brand"> <Link href="/brand">
<ContextMenuItem> <ContextMenuItem>
<HugeiconsIcon icon={LinkSquare02Icon} /> <HugeiconsIcon icon={LinkSquare02Icon} />
Brand assets Brand assets
</ContextMenuItem> </ContextMenuItem>
</Link> </Link>
</ContextMenuContent> </ContextMenuContent>
</ContextMenu> </ContextMenu>
<nav className="hidden items-center gap-4 md:flex"> <nav className="hidden items-center gap-4 md:flex">
{links.map((link) => ( {links.map((link) => (
<Link key={link.href} href={link.href}> <Link key={link.href} href={link.href}>
<Button variant="text" className="p-0 text-sm"> <Button variant="text" className="p-0 text-sm">
{link.label} {link.label}
</Button> </Button>
</Link> </Link>
))} ))}
</nav> </nav>
</div> </div>
<div className="relative z-10"> <div className="relative z-10">
<div className="flex items-center gap-3 md:hidden"> <div className="flex items-center gap-3 md:hidden">
<Button <Button
variant="text" variant="text"
size="icon" size="icon"
className="flex items-center justify-center p-0" className="flex items-center justify-center p-0"
onClick={() => setIsMenuOpen(!isMenuOpen)} onClick={() => setIsMenuOpen(!isMenuOpen)}
> >
<HugeiconsIcon icon={Menu02Icon} size={30} /> <HugeiconsIcon icon={Menu02Icon} size={30} />
</Button> </Button>
</div> </div>
<div className="hidden items-center gap-3 md:flex"> <div className="hidden items-center gap-3 md:flex">
<Link href={SOCIAL_LINKS.github}> <Link href={SOCIAL_LINKS.github}>
<Button className="bg-background text-sm" variant="outline"> <Button className="bg-background text-sm" variant="outline">
<HugeiconsIcon icon={GithubIcon} className="size-4" /> <HugeiconsIcon icon={GithubIcon} className="size-4" />
40k+ 51k+
</Button> </Button>
</Link> </Link>
<Link href="/projects"> <Link href="/projects">
<Button className="text-sm"> <Button className="text-sm">
Projects Projects
<ArrowRight className="size-4" /> <ArrowRight className="size-4" />
</Button> </Button>
</Link> </Link>
<ThemeToggle /> <ThemeToggle />
</div> </div>
</div> </div>
<div <div
className={cn( className={cn(
"bg-background/20 pointer-events-none fixed inset-0 opacity-0 backdrop-blur-3xl", "bg-background/20 pointer-events-none fixed inset-0 opacity-0 backdrop-blur-3xl",
"transition-opacity duration-150", "transition-opacity duration-150",
isMenuOpen && "pointer-events-auto opacity-100", isMenuOpen && "pointer-events-auto opacity-100",
)} )}
> >
<div className="relative h-full"> <div className="relative h-full">
<button <button
type="button" type="button"
aria-label="Close menu" aria-label="Close menu"
className="absolute inset-0" className="absolute inset-0"
onClick={closeMenu} onClick={closeMenu}
onKeyDown={(event) => { onKeyDown={(event) => {
if ( if (
event.key === "Enter" || event.key === "Enter" ||
event.key === " " || event.key === " " ||
event.key === "Escape" event.key === "Escape"
) { ) {
event.preventDefault(); event.preventDefault();
closeMenu(); closeMenu();
} }
}} }}
/> />
<nav className="flex flex-col gap-3 px-6 pt-[5rem]"> <nav className="flex flex-col gap-3 px-6 pt-[5rem]">
{links.map((link, index) => ( {links.map((link, index) => (
<motion.div <motion.div
key={link.href} key={link.href}
initial={{ scale: 0.98, opacity: 0 }} initial={{ scale: 0.98, opacity: 0 }}
animate={{ animate={{
scale: isMenuOpen ? 1 : 0.98, scale: isMenuOpen ? 1 : 0.98,
opacity: isMenuOpen ? 1 : 0, opacity: isMenuOpen ? 1 : 0,
}} }}
transition={{ transition={{
duration: 0.4, duration: 0.4,
delay: isMenuOpen ? index * 0.1 : 0, delay: isMenuOpen ? index * 0.1 : 0,
ease: [0.25, 0.46, 0.45, 0.94], ease: [0.25, 0.46, 0.45, 0.94],
}} }}
> >
<Link <Link
href={link.href} href={link.href}
className="text-2xl font-semibold" className="text-2xl font-semibold"
onClick={() => setIsMenuOpen(false)} onClick={() => setIsMenuOpen(false)}
> >
{link.label} {link.label}
</Link> </Link>
</motion.div> </motion.div>
))} ))}
</nav> </nav>
<ThemeToggle <ThemeToggle
className="absolute right-8 bottom-8 size-10" className="absolute right-8 bottom-8 size-10"
iconClassName="!size-[1.2rem]" iconClassName="!size-[1.2rem]"
onToggle={(e) => { onToggle={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
}} }}
/> />
</div> </div>
</div> </div>
</div> </div>
</header> </header>
); );
} }