ob/ob248.com
1
0
Fork 0
mirror of https://github.com/hex248/ob248.com.git synced 2026-02-07 18:23:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

command palette button/prompt

Browse Source
This commit is contained in:
Oliver Bryan
2025-10-29 00:31:41 +00:00
parent 1798ce362e
commit 6f2b3fbbe4
1 changed files with 44 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/Header.astro
View File

@@ -1,4 +1,6 @@
--- ---
import { Icon } from "astro-icon/components";
const { currentPage, innerClass } = Astro.props; const { currentPage, innerClass } = Astro.props;
const pages = [ const pages = [
@@ -21,14 +23,23 @@ const pages = [
.cancel-button:hover .text { .cancel-button:hover .text {
color: var(--ayu-red-500); color: var(--ayu-red-500);
} }
.command-palette-toggle {
transition: color 0.3s ease;
cursor: pointer;
}
.command-palette-toggle:hover {
color: var(--ayu-accent);
}
</style> </style>
<header> <header>
<div class="w-full flex items-center justify-between border-ayu-gutter"> <div class="w-full flex items-center justify-between border-ayu-gutter">
<div <div
class={`flex items-center border-b-1 lg:border-1 border-ayu-gutter py-2 ${innerClass}`} class={`flex items-center justify-between border-b-1 lg:border-1 border-ayu-gutter py-2 ${innerClass}`}
> >
<a href="/" class="flex items-center gap-2"> <div class="flex items-center">
<a href="/" class="flex items-center gap-4">
<img <img
src="/favicon.svg" src="/favicon.svg"
alt="oliver bryan icon" alt="oliver bryan icon"
@@ -54,5 +65,13 @@ const pages = [
) )
} }
</div> </div>
<span
class="flex items-center justify-center gap-2 text-ayu-gutter no-select command-palette-toggle"
onclick="toggleCommandPalette()"
>
ctrl + k
<Icon name="mdi:toy-brick-search" class="w-5 h-5" />
</span>
</div>
</div> </div>
</header> </header>