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 pages = [
@@ -21,14 +23,23 @@ const pages = [
.cancel-button:hover .text {
color: var(--ayu-red-500);
}
.command-palette-toggle {
transition: color 0.3s ease;
cursor: pointer;
}
.command-palette-toggle:hover {
color: var(--ayu-accent);
}
</style>
<header>
<div class="w-full flex items-center justify-between border-ayu-gutter">
<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
src="/favicon.svg"
alt="oliver bryan icon"
@@ -54,5 +65,13 @@ const pages = [
)
}
</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>
</header>