53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
"use client"
|
|
|
|
import { Input } from "@/components/ui/input"
|
|
import { Search } from "lucide-react"
|
|
import Image from "next/image"
|
|
import { useTheme } from "next-themes"
|
|
import { useEffect, useState } from "react"
|
|
import { ThemeToggle } from "@/components/theme-toggle"
|
|
|
|
export function Navigation() {
|
|
const { theme, systemTheme } = useTheme()
|
|
const [mounted, setMounted] = useState(false)
|
|
|
|
useEffect(() => {
|
|
setMounted(true)
|
|
}, [])
|
|
|
|
if (!mounted) {
|
|
return null
|
|
}
|
|
|
|
const currentTheme = theme === "system" ? systemTheme : theme
|
|
const logoSrc = currentTheme === "dark" ? "/logo-white.svg" : "/logo-black.svg"
|
|
|
|
return (
|
|
<nav className="border-b border-border bg-card">
|
|
<div className="flex items-center justify-between px-6 py-4">
|
|
<div className="flex items-center space-x-8">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="flex items-center justify-center">
|
|
<Image
|
|
src={logoSrc || "/placeholder.svg"}
|
|
alt="Sapiens Logo"
|
|
width={130}
|
|
height={36}
|
|
className="w-32 h-9"
|
|
/>
|
|
</div>
|
|
<span className="font-semibold text-lg">Finance</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center space-x-4">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
|
|
<Input placeholder="Search stocks..." className="pl-10 w-64 bg-input border-border" />
|
|
</div>
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|