47 lines
3.1 KiB
TypeScript
47 lines
3.1 KiB
TypeScript
import { Cpu, Github, Mail, Terminal } from 'lucide-react';
|
|
|
|
type NavigationBarProps = {
|
|
cpuModeEnabled: boolean;
|
|
onCpuModeToggle: () => void;
|
|
};
|
|
|
|
export function NavigationBar({ cpuModeEnabled, onCpuModeToggle }: NavigationBarProps) {
|
|
return (
|
|
<nav className="flex flex-col sm:flex-row justify-between items-start sm:items-center border-b-2 border-dashed border-(--border-main) pb-4 gap-4">
|
|
<div className="flex items-center gap-2 text-sm text-(--text-muted) relative group">
|
|
<Terminal className="w-5 h-5 accent-text transform -rotate-12 group-hover:rotate-12 transition-transform" />
|
|
<span className="font-sketch text-2xl text-(--text-main) tracking-wide">aditya_gupta <span className="text-(--text-dim)">//</span> sortedcord</span>
|
|
|
|
<a
|
|
href="https://discord.gg/mDvfbSTQjJ"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="absolute -top-10 left-80 -translate-y-2 z-50 font-sketch text-sm accent-text rotate-12 flex items-center gap-1 opacity-80 hover:text-(--text-main) transition-colors sm:absolute sm:-top-6 sm:-right-16 sm:mt-0 sm:translate-y-0"
|
|
aria-label="Open root link"
|
|
>
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="transform -scale-x-100 rotate-45"><path d="M5 12h14" /><path d="m12 5 7 7-7 7" /></svg>
|
|
<span>root</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-6 flex-wrap">
|
|
<button
|
|
type="button"
|
|
onClick={onCpuModeToggle}
|
|
className="hidden sm:flex items-center gap-2 text-(--text-muted) hover:text-(--text-main) transition-colors"
|
|
aria-pressed={cpuModeEnabled}
|
|
aria-label="Toggle low CPU mode"
|
|
>
|
|
<Cpu className={`w-4 h-4 ${cpuModeEnabled ? 'text-(--color-accent)' : ''}`} />
|
|
<span className="font-sketch text-lg">cpu_sav</span>
|
|
<span className={`relative inline-flex h-5 w-9 items-center rounded-full border transition-colors ${cpuModeEnabled ? 'bg-(--color-accent) border-(--color-accent)' : 'bg-(--bg-surface) border-(--border-main)'}`}>
|
|
<span className={`inline-block h-4 w-4 transform rounded-full transition-colors ${cpuModeEnabled ? 'translate-x-4 bg-(--bg-base)' : 'translate-x-1 bg-(--color-accent)'}`} />
|
|
</span>
|
|
</button>
|
|
<a href="#" className="font-sketch text-lg hover:text-(--text-main) transition-colors flex items-center gap-2 group"><Github className="w-4 h-4 group-hover:-translate-y-1 transition-transform" /> github</a>
|
|
<a href="#" className="font-sketch text-lg hover:text-(--text-main) transition-colors flex items-center gap-2 group"><Mail className="w-4 h-4 group-hover:-translate-y-1 transition-transform" /> contact</a>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|