Initial commit: SAPIENS Stock service

components/navigation.tsx

@@ -0,0 +1,52 @@
+"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>
+  )
+}