Skip to content

Commit b030cf1

Browse files
ryzen-xpryzen-xp
committed
[feat]:: add docs and setting page
1 parent 42eb3a5 commit b030cf1

6 files changed

Lines changed: 597 additions & 64 deletions

File tree

‎gateway-web/app/components/HomePage.tsx‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,15 @@ interface SearchResult {
2525
};
2626
}
2727

28-
export const HomePage: React.FC = () => {
28+
interface HomeProps {
29+
currentPage: "home" | "dashboard" | "docs";
30+
setCurrentPage: (page: "home" | "dashboard" | "docs") => void;
31+
}
32+
33+
export const HomePage: React.FC<HomeProps> = ({
34+
currentPage,
35+
setCurrentPage,
36+
}) => {
2937
const [searchQuery, setSearchQuery] = useState<string>("");
3038
const [searchResult, setSearchResult] = useState<SearchResult | null>(null);
3139
const [isRegistering, setIsRegistering] = useState(false);
@@ -127,8 +135,11 @@ export const HomePage: React.FC = () => {
127135
>
128136
Get Started <ArrowRight className="w-5 h-5" />
129137
</button>
130-
<button className="px-8 py-4 bg-white/5 hover:bg-white/10 text-white font-semibold rounded-xl border border-white/10">
131-
Learn More
138+
<button
139+
onClick={() => setCurrentPage("docs")}
140+
className="px-8 py-4 bg-white/5 hover:bg-white/10 text-white font-semibold rounded-xl border border-white/10"
141+
>
142+
Documentation
132143
</button>
133144
</div>
134145
</div>

‎gateway-web/app/components/Navbar.tsx‎

Lines changed: 75 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
"use client";
2-
import React from "react";
2+
import React, { useState } from "react";
33
import { Globe, Home, Settings, LogOut, User, Wallet } from "lucide-react";
44
import { useStarknetWallet } from "../hooks/useStarknetWallet";
5+
import { SettingsModal } from "./Setting";
56

67
interface NavbarProps {
7-
currentPage: "home" | "dashboard";
8+
currentPage: "home" | "dashboard" | "docs";
89
setCurrentPage: (page: "home" | "dashboard") => void;
910
}
1011

@@ -16,59 +17,67 @@ export const Navbar: React.FC<NavbarProps> = ({
1617
isConnected,
1718
username,
1819
formattedAddress,
20+
address,
1921
handleConnect,
2022
handleDisconnect,
2123
} = useStarknetWallet();
2224

25+
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
2326
const isRegistered = username && username !== "";
2427

2528
return (
26-
<nav className="bg-black/30 backdrop-blur-xl border-b border-white/10">
27-
<div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
28-
{/* Logo */}
29-
<div className="flex items-center gap-3">
30-
<div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg flex items-center justify-center">
31-
<Globe className="w-6 h-6 text-white" />
29+
<>
30+
<nav className="bg-black/30 backdrop-blur-xl border-b border-white/10">
31+
<div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
32+
{/* Logo */}
33+
<div className="flex items-center gap-3">
34+
<div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg flex items-center justify-center">
35+
<Globe className="w-6 h-6 text-white" />
36+
</div>
37+
<div>
38+
<h1 className="text-xl font-bold text-white">0xGateway</h1>
39+
<p className="text-xs text-purple-300">
40+
Universal Username System
41+
</p>
42+
</div>
3243
</div>
33-
<div>
34-
<h1 className="text-xl font-bold text-white">0xGateway</h1>
35-
<p className="text-xs text-purple-300">Universal Username System</p>
36-
</div>
37-
</div>
3844

39-
{/* Navigation & Wallet */}
40-
<div className="flex items-center gap-4">
41-
{isConnected ? (
42-
<>
43-
<button
44-
onClick={() => setCurrentPage("home")}
45-
className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-all ${
46-
currentPage === "home"
47-
? "bg-purple-600 text-white"
48-
: "text-gray-300 hover:bg-white/5"
49-
}`}
50-
>
51-
<Home className="w-5 h-5" />
52-
<span className="hidden md:inline">Home</span>
53-
</button>
54-
55-
{isRegistered && (
45+
{/* Navigation & Wallet */}
46+
<div className="flex items-center gap-4">
47+
{isConnected ? (
48+
<>
5649
<button
57-
onClick={() => setCurrentPage("dashboard")}
50+
onClick={() => setCurrentPage("home")}
5851
className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-all ${
59-
currentPage === "dashboard"
52+
currentPage === "home"
6053
? "bg-purple-600 text-white"
6154
: "text-gray-300 hover:bg-white/5"
6255
}`}
6356
>
64-
<Settings className="w-5 h-5" />
65-
<span className="hidden md:inline">Dashboard</span>
57+
<Home className="w-5 h-5" />
58+
<span className="hidden md:inline">Home</span>
6659
</button>
67-
)}
68-
{/* User Info */}
69-
<div className="flex items-center gap-3 px-4 py-2 bg-white/5 rounded-lg border border-white/10">
60+
61+
{isRegistered && (
62+
<button
63+
onClick={() => setCurrentPage("dashboard")}
64+
className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-all ${
65+
currentPage === "dashboard"
66+
? "bg-purple-600 text-white"
67+
: "text-gray-300 hover:bg-white/5"
68+
}`}
69+
>
70+
<Settings className="w-5 h-5" />
71+
<span className="hidden md:inline">Dashboard</span>
72+
</button>
73+
)}
74+
75+
{/* User Info */}
7076
{username ? (
71-
<>
77+
<button
78+
onClick={() => setIsSettingsOpen(true)}
79+
className="flex items-center gap-3 px-4 py-2 bg-white/5 rounded-lg border border-white/10 hover:bg-white/10 transition-all cursor-pointer"
80+
>
7281
<User className="w-5 h-5 text-purple-400" />
7382
<div className="flex flex-col">
7483
<span className="text-white font-medium text-sm">
@@ -78,36 +87,44 @@ export const Navbar: React.FC<NavbarProps> = ({
7887
{formattedAddress}
7988
</span>
8089
</div>
81-
</>
90+
</button>
8291
) : (
83-
<>
92+
<div className="flex items-center gap-3 px-4 py-2 bg-white/5 rounded-lg border border-white/10">
8493
<Wallet className="w-5 h-5 text-purple-400" />
8594
<span className="text-white font-medium text-sm">
8695
{formattedAddress}
8796
</span>
88-
</>
97+
</div>
8998
)}
90-
</div>
9199

100+
<button
101+
onClick={handleDisconnect}
102+
className="px-4 py-2 bg-red-600/20 hover:bg-red-600/30 text-red-400 rounded-lg transition-all flex items-center gap-2 border border-red-500/20"
103+
>
104+
<LogOut className="w-4 h-4" />
105+
<span className="hidden md:inline">Disconnect</span>
106+
</button>
107+
</>
108+
) : (
92109
<button
93-
onClick={handleDisconnect}
94-
className="px-4 py-2 bg-red-600/20 hover:bg-red-600/30 text-red-400 rounded-lg transition-all flex items-center gap-2 border border-red-500/20"
110+
onClick={handleConnect}
111+
className="px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white font-semibold rounded-lg transition-all transform hover:scale-105 shadow-lg shadow-purple-500/50 flex items-center gap-2"
95112
>
96-
<LogOut className="w-4 h-4" />
97-
<span className="hidden md:inline">Disconnect</span>
113+
<Wallet className="w-5 h-5" />
114+
Connect Wallet
98115
</button>
99-
</>
100-
) : (
101-
<button
102-
onClick={handleConnect}
103-
className="px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white font-semibold rounded-lg transition-all transform hover:scale-105 shadow-lg shadow-purple-500/50 flex items-center gap-2"
104-
>
105-
<Wallet className="w-5 h-5" />
106-
Connect Wallet
107-
</button>
108-
)}
116+
)}
117+
</div>
109118
</div>
110-
</div>
111-
</nav>
119+
</nav>
120+
121+
{isRegistered && (
122+
<SettingsModal
123+
isOpen={isSettingsOpen}
124+
onClose={() => setIsSettingsOpen(false)}
125+
username={username}
126+
/>
127+
)}
128+
</>
112129
);
113130
};

0 commit comments

Comments
 (0)