40 lines
1.3 KiB
JavaScript
40 lines
1.3 KiB
JavaScript
import React from "react";
|
|
import "./topbar.css";
|
|
|
|
export default function TopBar({ username, theme, setTheme, onLoginClick, onSignupClick }) {
|
|
return (
|
|
<div className="topbar">
|
|
|
|
<div className="topbar-left">
|
|
<img
|
|
src="/icons/logo-master.png"
|
|
alt="SocioWire Logo"
|
|
className="sw-logo"
|
|
/>
|
|
|
|
<div className="title-block">
|
|
<div className="main-title">SocioWire</div>
|
|
<div className="sub-title">Wired to life</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="topbar-right">
|
|
<div className="theme-switch">
|
|
<button className={\`theme-dot \${theme === "dark" ? "theme-dot-active" : ""}\`} onClick={() => setTheme("dark")}>D</button>
|
|
<button className={\`theme-dot \${theme === "blue" ? "theme-dot-active" : ""}\`} onClick={() => setTheme("blue")}>B</button>
|
|
<button className={\`theme-dot \${theme === "light" ? "theme-dot-active" : ""}\`} onClick={() => setTheme("light")}>L</button>
|
|
</div>
|
|
|
|
{username ? (
|
|
<div className="username-chip">{username}</div>
|
|
) : (
|
|
<>
|
|
<button className="btn-primary" onClick={onLoginClick}>Login</button>
|
|
<button className="btn-secondary" onClick={onSignupClick}>Sign up</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|