artivate/components/ui/header.tsx

98 lines
4.1 KiB
TypeScript
Raw Normal View History

2025-02-24 15:52:36 +07:00
"use client";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Logo } from "@/components/logo";
import { useState, useEffect } from "react";
export function Header() {
const [contractAddress, setContractAddress] = useState("Fetching...");
const [buttonText, setButtonText] = useState("Fetching...");
useEffect(() => {
const fetchContractAddress = async () => {
try {
const res = await fetch("https://catools.dev3vds1.link/get/artivate");
const data = await res.json();
const address = data[0]?.address || "Unavailable";
setContractAddress(address);
setButtonText(`CA: ${address}`);
} catch (error) {
console.error("Error fetching contract address:", error);
setContractAddress("Error");
setButtonText("CA: Error");
}
};
fetchContractAddress();
}, []);
const handleCopy = async () => {
try {
await navigator.clipboard.writeText(contractAddress);
setButtonText("Copied!");
setTimeout(() => setButtonText(`CA: ${contractAddress}`), 2000);
} catch (err) {
console.error("Failed to copy text:", err);
}
};
return (
<header className="sticky top-0 z-50">
<nav className="container mx-auto px-6 py-4">
<div className="hidden md:flex items-center justify-between text-xs font-fk-grotesk-mono">
<div className="flex-1">
<div className="flex items-center uppercase">
<div className="pr-2 relative">
<Link
href="#features"
className="bg-[#1e1a46] px-3 py-2 rounded-md hover:bg-[#1e1a46]/70 transition-colors"
>
Features
</Link>
<img
src="/images/button-separator-header.svg"
alt="Separator"
className="absolute w-2 right-0 top-1/2 -translate-y-1/2"
/>
</div>
<div className="pr-2 relative">
<Link
href="#tokenomics"
className="bg-[#1e1a46] px-4 py-2 rounded-md hover:bg-[#1e1a46]/70 transition-colors"
>
Tokenomics
</Link>
<img
src="/images/button-separator-header.svg"
alt="Separator"
className="absolute w-2 right-0 top-1/2 -translate-y-1/2"
/>
</div>
<div>
<Link
href="#0"
className="bg-[#1e1a46] px-4 py-2 rounded-md hover:bg-[#1e1a46]/70 transition-colors"
>
Applications
</Link>
</div>
</div>
</div>
<div className="flex-1 flex justify-center">
<Logo />
</div>
<div className="flex-1 flex justify-end">
<Button
className="bg-[#1e1a46] px-4 py-2 rounded-md hover:bg-[#1e1a46]/70 transition-colors uppercase text-xs"
onClick={handleCopy}
>
{buttonText}
</Button>
</div>
</div>
</nav>
</header>
);
}