poyrazavsever/poyraz-portfolio
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Add logo image to the public directory

Browse Source
This commit is contained in:
Poyraz Avsever
2026-03-10 09:36:47 +03:00
parent 437080eb35
commit 29a0a8a893
9 changed files with 1690 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/search-command.tsx
+101
View File
@@ -0,0 +1,101 @@
"use client";
import { Icon } from "@iconify/react";
import { useRouter } from "next/navigation";
import { useEffect, useMemo, useState } from "react";
import {
CommandPalette,
CommandPaletteContent,
CommandPaletteEmpty,
CommandPaletteFooter,
CommandPaletteGroup,
CommandPaletteInput,
CommandPaletteItem,
CommandPaletteList,
CommandPaletteSeparator,
CommandPaletteTrigger,
} from "poyraz-ui/molecules";
import {
COMMAND_PALETTE_GROUPS,
type CommandPaletteItem as PaletteItem,
} from "@/lib/command-palette-links";
export function SearchCommand() {
const [open, setOpen] = useState(false);
const router = useRouter();
const shortcut = useMemo(() => {
if (typeof window === "undefined") return "Ctrl K";
const isMac = /(Mac|iPhone|iPad)/i.test(window.navigator.platform);
return isMac ? "Cmd K" : "Ctrl K";
}, []);
useEffect(() => {
const onKeyDown = (event: KeyboardEvent) => {
const isShortcut = (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k";
if (!isShortcut) return;
event.preventDefault();
setOpen((prev) => !prev);
};
window.addEventListener("keydown", onKeyDown);
return () => window.removeEventListener("keydown", onKeyDown);
}, []);
const handleCommandSelect = (item: PaletteItem) => {
setOpen(false);
if (item.external) {
window.open(item.href, "_blank", "noopener,noreferrer");
return;
}
router.push(item.href);
};
return (
<CommandPalette open={open} onOpenChange={setOpen}>
<CommandPaletteTrigger asChild>
<button
type="button"
className="inline-flex h-8 w-44 cursor-pointer items-center justify-between rounded-sm border border-border px-2.5 text-sm text-muted-foreground transition-colors hover:text-foreground sm:w-52"
aria-label="Open command palette"
>
<span className="inline-flex items-center gap-2">
<Icon icon="mdi:magnify" width={16} height={16} />
<span>Search</span>
</span>
<span className="text-xs text-muted-foreground/80">{shortcut}</span>
</button>
</CommandPaletteTrigger>
<CommandPaletteContent className="rounded-sm">
<CommandPaletteInput placeholder="Search pages and links..." />
<CommandPaletteList>
<CommandPaletteEmpty>No results found.</CommandPaletteEmpty>
{COMMAND_PALETTE_GROUPS.map((group, index) => (
<div key={group.id}>
{index > 0 && <CommandPaletteSeparator />}
<CommandPaletteGroup heading={group.heading}>
{group.items.map((item) => (
<CommandPaletteItem
key={item.id}
icon={<Icon icon={item.icon} width={16} height={16} />}
onClick={() => handleCommandSelect(item)}
className="cursor-pointer"
>
{item.label}
</CommandPaletteItem>
))}
</CommandPaletteGroup>
</div>
))}
</CommandPaletteList>
<CommandPaletteFooter className="text-xs text-muted-foreground">
Press {shortcut} to open quickly
</CommandPaletteFooter>
</CommandPaletteContent>
</CommandPalette>
);
}
components/site-navbar.tsx
+77
View File
@@ -0,0 +1,77 @@
"use client";
import { Icon } from "@iconify/react";
import Link from "next/link";
import { Avatar, AvatarFallback, AvatarImage, Separator } from "poyraz-ui/atoms";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "poyraz-ui/molecules";
import { SearchCommand } from "@/components/search-command";
import { NAV_LINKS, SOCIAL_LINKS } from "@/lib/links";
export function SiteNavbar() {
return (
<header className="flex flex-wrap items-center justify-between gap-4 border-b border-border pb-4">
<Link href="/" aria-label="Go to home" className="inline-flex items-center">
<Avatar className="h-9 w-9 rounded-sm">
<AvatarImage src="/logo/logo.jpeg" alt="Poyraz Avsever" />
<AvatarFallback className="rounded-sm bg-muted text-xs font-semibold">
PA
</AvatarFallback>
</Avatar>
</Link>
<div className="flex flex-wrap items-center justify-end gap-3">
<nav aria-label="Main navigation">
<ul className="flex flex-wrap items-center gap-3 text-sm">
{NAV_LINKS.map((item, index) => (
<li key={item.id} className="flex items-center gap-3">
{index > 0 && (
<Separator orientation="vertical" className="h-4 bg-border" decorative />
)}
<Link
href={item.href}
className="text-foreground/55 transition-colors hover:text-foreground"
>
{item.label}
</Link>
</li>
))}
</ul>
</nav>
<Separator orientation="vertical" className="hidden h-4 bg-border sm:block" decorative />
<SearchCommand />
<DropdownMenu>
<DropdownMenuTrigger className="inline-flex h-8 cursor-pointer items-center gap-2 rounded-sm border border-border px-2.5 text-sm text-muted-foreground transition-colors hover:text-foreground">
<Icon icon="mdi:share-variant" width={16} height={16} />
<span>Social</span>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-52 rounded-sm">
<DropdownMenuLabel>Social Links</DropdownMenuLabel>
<DropdownMenuSeparator />
{SOCIAL_LINKS.map((item) => (
<DropdownMenuItem key={item.id} asChild>
<Link
href={item.href}
target="_blank"
rel="noreferrer"
className="flex items-center gap-2"
>
<Icon icon={item.icon} width={16} height={16} />
<span>{item.label}</span>
</Link>
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
</div>
</header>
);
}