-
+
- Get started by editing
- src/app/page.tsx
-
-
- By{' '}
-
-
-
-
-
-
-
+ - Docs{' '} - - -> - -
-- Find in-depth information about Next.js features and API. -
- - - -- Learn{' '} - - -> - -
-- Learn about Next.js in an interactive course with quizzes! -
- - - -- Templates{' '} - - -> - -
-- Explore the Next.js 13 playground. -
- - - -- Deploy{' '} - - -> - -
-- Instantly deploy your Next.js site to a shareable URL with Vercel. -
- -
+
+
+ );
+}
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
new file mode 100644
index 0000000..bcb3d5c
--- /dev/null
+++ b/src/components/Logo.tsx
@@ -0,0 +1,19 @@
+export default function Logo() {
+ return (
+
+ );
+}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
new file mode 100644
index 0000000..67e8c6f
--- /dev/null
+++ b/src/components/Navbar.tsx
@@ -0,0 +1,53 @@
+import Image from "next/image";
+import Link from "next/link";
+import { useRef, useState, MouseEvent } from "react";
+import Button from "./Button";
+import Logo from "./Logo";
+import ThemeSelector from "./ThemeSelector";
+import {
+ ContextMenu,
+ ContextMenuContent,
+ ContextMenuItem,
+ ContextMenuTrigger,
+} from "./ui/context-menu";
+
+export default function Navbar() {
+ return (
+
+ );
+}
diff --git a/src/components/ThemeSelector.tsx b/src/components/ThemeSelector.tsx
new file mode 100644
index 0000000..9fdd752
--- /dev/null
+++ b/src/components/ThemeSelector.tsx
@@ -0,0 +1,36 @@
+"use client";
+import useTheme from "@/lib/useTheme";
+import { MoonIcon, SunIcon } from "lucide-react";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+
+export default function ThemeSelector() {
+ const [theme, setTheme] = useTheme();
+
+ return (
+