mirror of
https://github.com/walkxcode/dashboard-icons.git
synced 2025-10-27 13:39:03 +08:00
feat(website): enhance website
This commit is contained in:
Bjorn Lammers
committed by
Thomas Camlong
Thomas Camlong
parent
6e3a39a4cf
commit
63349f7490
@@ -3,8 +3,8 @@
|
||||
import { IconSubmissionForm } from "@/components/icon-submission-form"
|
||||
import { ThemeSwitcher } from "@/components/theme-switcher"
|
||||
import { REPO_PATH } from "@/constants"
|
||||
import { getAllIcons } from "@/lib/api"
|
||||
import type { Icon } from "@/types/icons"
|
||||
import { getIconsArray } from "@/lib/api"
|
||||
import type { IconWithName } from "@/types/icons"
|
||||
import { motion } from "framer-motion"
|
||||
import { Github, Menu, Search } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
@@ -16,14 +16,15 @@ import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet"
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip"
|
||||
|
||||
export function Header() {
|
||||
const [icons, setIcons] = useState<Record<string, Icon>>({})
|
||||
const [iconsData, setIconsData] = useState<IconWithName[]>([])
|
||||
const [isLoaded, setIsLoaded] = useState(false)
|
||||
const [commandMenuOpen, setCommandMenuOpen] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
async function loadIcons() {
|
||||
try {
|
||||
const iconsData = await getAllIcons()
|
||||
setIcons(iconsData)
|
||||
const icons = await getIconsArray()
|
||||
setIconsData(icons)
|
||||
setIsLoaded(true)
|
||||
} catch (error) {
|
||||
console.error("Failed to load icons:", error)
|
||||
@@ -34,6 +35,11 @@ export function Header() {
|
||||
loadIcons()
|
||||
}, [])
|
||||
|
||||
// Function to open the command menu
|
||||
const openCommandMenu = () => {
|
||||
setCommandMenuOpen(true)
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.header
|
||||
className="border-b sticky top-0 z-50 bg-background/95 backdrop-blur-md border-border/50"
|
||||
@@ -43,9 +49,8 @@ export function Header() {
|
||||
>
|
||||
<div className="px-4 md:px-12 flex items-center justify-between h-16 md:h-18">
|
||||
<div className="flex items-center gap-2 md:gap-6">
|
||||
<Link href="/" className="text-lg md:text-xl font-bold group relative">
|
||||
<span className="relative z-10 inline-block transition-colors duration-300 group-hover:text-rose-500">Dashboard Icons</span>
|
||||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-rose-500 group-hover:w-full transition-all duration-300 ease-in-out rounded-full" />
|
||||
<Link href="/" className="text-lg md:text-xl font-bold group">
|
||||
<span className="transition-colors duration-300 group-hover:text-rose-500">Dashboard Icons</span>
|
||||
</Link>
|
||||
<div className="hidden md:block">
|
||||
<HeaderNav />
|
||||
@@ -54,27 +59,18 @@ export function Header() {
|
||||
<div className="flex items-center gap-2 md:gap-4">
|
||||
{/* Desktop search button */}
|
||||
<div className="hidden md:block">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="gap-2 cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 hover:border-rose-500 dark:hover:border-rose-500 transition-colors duration-200 shadow-sm"
|
||||
id="desktop-search-button"
|
||||
>
|
||||
<Search className="h-4 w-4" />
|
||||
<span>Search</span>
|
||||
<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-border/80 bg-muted/80 px-1.5 font-mono text-[10px] font-medium opacity-100">
|
||||
<span className="text-xs">⌘</span>K
|
||||
</kbd>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Search icons</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="gap-2 cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 hover:border-rose-500 dark:hover:border-rose-500 transition-all duration-300"
|
||||
onClick={openCommandMenu}
|
||||
>
|
||||
<Search className="h-4 w-4 transition-all duration-300" />
|
||||
<span>Find icons</span>
|
||||
<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-border/80 bg-muted/80 px-1.5 font-mono text-[10px] font-medium opacity-100">
|
||||
<span className="text-xs">⌘</span>K
|
||||
</kbd>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Mobile search button */}
|
||||
@@ -82,16 +78,15 @@ export function Header() {
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="rounded-lg cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 transition-colors duration-200 focus:ring-2 focus:ring-rose-500/20"
|
||||
id="mobile-search-button"
|
||||
className="rounded-lg cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 transition-all duration-300 focus:ring-2 focus:ring-rose-500/20"
|
||||
onClick={openCommandMenu}
|
||||
>
|
||||
<Search className="h-5 w-5" />
|
||||
<span className="sr-only">Search icons</span>
|
||||
<Search className="h-5 w-5 transition-all duration-300" />
|
||||
<span className="sr-only">Find icons</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="hidden md:flex items-center gap-2 md:gap-4">
|
||||
{isLoaded && <CommandMenu icons={Object.keys(icons)} triggerButtonId="desktop-search-button" />}
|
||||
<IconSubmissionForm />
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
@@ -99,17 +94,17 @@ export function Header() {
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="rounded-lg cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 transition-colors duration-200 focus:ring-2 focus:ring-rose-500/20"
|
||||
className="rounded-lg cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 transition-all duration-300 focus:ring-2 focus:ring-rose-500/20"
|
||||
asChild
|
||||
>
|
||||
<Link href={REPO_PATH} target="_blank" className="group">
|
||||
<Github className="h-5 w-5 group-hover:text-rose-500 transition-colors duration-200" />
|
||||
<span className="sr-only">GitHub</span>
|
||||
<Github className="h-5 w-5 group-hover:text-rose-500 transition-all duration-300" />
|
||||
<span className="sr-only">View on GitHub</span>
|
||||
</Link>
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>GitHub</p>
|
||||
<p>View on GitHub</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
@@ -123,9 +118,9 @@ export function Header() {
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-10 w-10 rounded-full cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 transition-colors duration-200 focus:ring-2 focus:ring-rose-500/20"
|
||||
className="h-10 w-10 rounded-full cursor-pointer hover:bg-rose-500/10 dark:hover:bg-rose-900/30 transition-all duration-300 focus:ring-2 focus:ring-rose-500/20"
|
||||
>
|
||||
<Menu className="h-5 w-5" />
|
||||
<Menu className="h-5 w-5 transition-all duration-300" />
|
||||
<span className="sr-only">Toggle menu</span>
|
||||
</Button>
|
||||
</SheetTrigger>
|
||||
@@ -139,14 +134,22 @@ export function Header() {
|
||||
<nav className="space-y-6">
|
||||
<HeaderNav />
|
||||
<div className="border-t pt-6" />
|
||||
{isLoaded && <CommandMenu icons={Object.keys(icons)} triggerButtonId="mobile-search-button" />}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-sm h-8 rounded-md cursor-pointer flex items-center gap-2 bg-background border-border hover:bg-rose-500/10 hover:text-rose-500 w-full justify-start transition-all duration-300"
|
||||
onClick={openCommandMenu}
|
||||
>
|
||||
<Search className="h-3.5 w-3.5 transition-all duration-300" />
|
||||
<span>Find and filter icons</span>
|
||||
</Button>
|
||||
<IconSubmissionForm />
|
||||
<Link
|
||||
href={REPO_PATH}
|
||||
target="_blank"
|
||||
className="flex items-center gap-2 text-sm font-medium text-rose-500 hover:text-rose-600 transition-colors cursor-pointer p-2 hover:bg-rose-500/5 rounded-md"
|
||||
className="flex items-center gap-2 text-sm font-medium text-rose-500 hover:text-rose-600 transition-all duration-300 cursor-pointer p-2 hover:bg-rose-500/5 rounded-md"
|
||||
>
|
||||
<Github className="h-4 w-4" />
|
||||
<Github className="h-4 w-4 transition-all duration-300" />
|
||||
GitHub Repository
|
||||
</Link>
|
||||
</nav>
|
||||
@@ -157,6 +160,9 @@ export function Header() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Single instance of CommandMenu */}
|
||||
{isLoaded && <CommandMenu icons={iconsData} open={commandMenuOpen} onOpenChange={setCommandMenuOpen} />}
|
||||
</motion.header>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user