Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve navbar UI #188

Merged
merged 6 commits into from
Feb 28, 2025
Merged

Improve navbar UI #188

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b74bff4
improve-navbar-ui
MaryammAli Feb 27, 2025
c348fe7
improve-navbar-ui
MaryammAli Feb 28, 2025
da89b23
Merge branch 'Shonen-Labs:main' into improve-navbar-ui
shamoo53 Feb 28, 2025
0f739a5
Merge branch 'main' into improve-navbar-ui
shamoo53 Feb 28, 2025
d5ea659
update changes
MaryammAli Feb 28, 2025
cbae40a
npm run build
MaryammAli Feb 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
266 changes: 180 additions & 86 deletions client/components/playground/Header/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,15 @@ import { Button } from "@/components/ui/button";
import Compile from "../Modal/Compile";
import { connect, disconnect } from "starknetkit";

import { Dialog, DialogContent, DialogHeader } from "@/components/ui/dialog";
import Argent from "@/public/img/Argent Wallet.png";
import Bravoos from "@/public/img/bravoos wallet.jpeg";
import { Home, Upload, MessageSquare, Book, Wallet } from "lucide-react";
import { motion } from "framer-motion";
import Image from 'next/image';




interface HeaderProps {
showClearButton: boolean;
Expand Down Expand Up @@ -35,6 +44,8 @@ export default function Header({
const [isEditing, setIsEditing] = useState(false);
const [projectName, setProjectName] = useState("DevXStark");
const [isCompileModalOpen, setIsCompileModalOpen] = useState(false);
const [isWalletModalOpen, setIsWalletModalOpen] = useState(false);
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

// Wallet connection state
const [connection, setConnection] = useState<StarknetConnection | null>(null);
Expand Down Expand Up @@ -129,104 +140,187 @@ export default function Header({

return (
<>
<div className="flex items-center m-4">
{/* Left: Editable Project Title */}
<div className="flex-1 flex items-center gap-4 ml-8">
{isEditing ? (
<input
type="text"
value={projectName}
onChange={(e) => setProjectName(e.target.value)}
onBlur={() => setIsEditing(false)}
onKeyDown={(e) => e.key === "Enter" && setIsEditing(false)}
className="text-2xl text-black font-semibold bg-transparent outline-none border-b border-white"
autoFocus
/>
) : (
<h2
className="text-2xl font-semibold text-black cursor-pointer"
onClick={() => setIsEditing(true)}
<div className="bg-[radial-gradient(circle,_#797474,_#e6e1e1,_#979191)] animate-smoke shadow-md rounded-full w-[80%] mx-auto mb-6">
<div className="flex items-center m-4">
{/* Left: Editable Project Title */}

<motion.div
className="flex-1 flex items-center "
initial={{ x: -200, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
transition={{ duration: 1.5 }}
>
{isEditing ? (
<input
type="text"
value={projectName}
onChange={(e) => setProjectName(e.target.value)}
onBlur={() => setIsEditing(false)}
onKeyDown={(e) => e.key === "Enter" && setIsEditing(false)}
className="text-2xl text-black font-semibold bg-transparent outline-none border-b border-white"
autoFocus
/>
) : (
<h2
className="text-2xl font-semibold text-black cursor-pointer"
onClick={() => setIsEditing(true)}
>
{projectName || "Project Name"}
</h2>
)}
</motion.div>

{/* Center: Navigation Links */}

<motion.div
className="flex-1 hidden md:flex justify-center"
initial={{ y: -50, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 1.5, delay: 0.5 }}
>
<ul className="flex gap-6">
<li>
<Link
href="/"
className="flex items-center gap-2 hover:text-blue-500 transition-colors hover:scale-110 duration-300 "
>
<Home size={18} /> Home
</Link>
</li>
<li>
<Link
href="/deploy"
className="flex items-center gap-2 hover:text-blue-500 transition-colors hover:scale-110 duration-300 "
>
<Upload size={18} /> Deploy
</Link>
</li>
<li>
<Link
href="/agent/chat/someId"
className="flex items-center gap-2 hover:text-blue-500 transition-colors hover:scale-110 duration-300 "
>
<MessageSquare size={18} /> Agent
</Link>
</li>
<li>
<Link
href="/devx/resources"
className="flex items-center gap-2 hover:text-blue-500 transition-colors hover:scale-110 duration-300 "
>
<Book size={18} /> Resources
</Link>
</li>
</ul>
</motion.div>

{/* CHANGE 4: Add Mobile Menu Button */}
<div className="md:hidden flex items-center mx-2">
<Button
variant="ghost"
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
className="p-2"
>
{projectName || "Project Name"}
</h2>
)}
</div>
{mobileMenuOpen}
</Button>
</div>

{/* Center: Navigation Links */}
<div className="flex-1 flex justify-center">
<ul className="flex gap-6">
<li>
<Link href="/" className="hover:text-blue-500 transition-colors">
Home
</Link>
</li>
<li>
<Link href="/deploy" className="hover:text-blue-500 transition-colors">
Deploy
</Link>
</li>
<li>
<Link href="/agent/chat/someId" className="hover:text-blue-500 transition-colors">
Agent
</Link>
</li>
<li>
<Link href="/devx/resources" className="hover:text-blue-500 transition-colors">
Resources
</Link>
</li>
</ul>
</div>
{/* Right: Wallet Connection & Action Buttons */}
<motion.div
className="flex-1 flex items-center justify-end gap-1 "
initial={{ x: 200, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
transition={{ duration: 1.5, delay: 1 }}
>
{isConnected ? (
<div className="flex items-center gap-2">
<span className="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">
{formatAddress(walletAddress)}
</span>
<Button
variant="outline"
onClick={handleDisconnectWallet}
className=" flex items-center gap-2 text-red-500 border-red-200 hover:bg-red-50"
>
<Wallet size={18} /> Disconnect
</Button>
</div>
) : (
<Button
variant="primary"
onClick={() => setIsWalletModalOpen(true)}
className="flex items-center gap-2 hover:scale-110 duration-300 "
>
<Wallet size={18} /> Connect Wallet
</Button>
)}

{/* Right: Wallet Connection & Action Buttons */}
<div className="flex-1 flex items-center justify-end gap-2 mr-8">
{isConnected ? (
<div className="flex items-center gap-2">
<span className="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">
{formatAddress(walletAddress)}
</span>
{isDeleteVisible && (
<Button
variant="outline"
onClick={handleDisconnectWallet}
className="text-red-500 border-red-200 hover:bg-red-50"
onClick={() => handleDelete(selectedNode)}
className="px-6 bg-[#252525] hover:bg-[#323232] text-white"
>
Disconnect
Delete node
</Button>
</div>
) : (
<Button variant="primary" onClick={() => handleConnectWallet()}>
Connect wallet
</Button>
)}
)}
{showClearButton && (
<Button
onClick={handleClear}
className="px-6 bg-[#252525] hover:bg-[#323232] text-white"
>
Clear
</Button>
)}
{showFinishButton && (
<Compile
nodes={nodes}
edges={edges}
isOpen={isCompileModalOpen}
onOpenChange={setIsCompileModalOpen}
flowSummary={flowSummary}
/>
)}
</motion.div>
</div>
</div>

{isDeleteVisible && (
{/* Wallet Connection Modal */}
<Dialog open={isWalletModalOpen} onOpenChange={setIsWalletModalOpen}>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<h2>Connect your Starknet wallet</h2>
</DialogHeader>
<div className="grid gap-4 py-4">
<Button
onClick={() => handleDelete(selectedNode)}
className="px-6 bg-[#252525] hover:bg-[#323232] text-white"
onClick={handleConnectWallet}
className="flex items-center justify-center gap-2"
>
Delete node
<Image src={Argent.src} alt="Argent" width={40} height={40} />
Connect with Argent
</Button>
)}
{showClearButton && (
<Button
onClick={handleClear}
className="px-6 bg-[#252525] hover:bg-[#323232] text-white"
onClick={handleConnectWallet}
className="flex items-center justify-center gap-2"
>
Clear
<Image
src={Bravoos.src}
alt="Braavos"
width={36} // Set the width in pixels
height={36} // Set the height in pixels
className="rounded-md"
/>
Connect with Braavos
</Button>
)}
{showFinishButton && (
<Compile
nodes={nodes}
edges={edges}
isOpen={isCompileModalOpen}
onOpenChange={setIsCompileModalOpen}
flowSummary={flowSummary}
/>
)}
</div>
</div>

<Button
onClick={handleConnectWallet}
variant="outline"
className="flex items-center justify-center gap-2"
>
Other Starknet Wallet
</Button>
</div>
</DialogContent>
</Dialog>
</>
);
}
}
Loading
Loading