opensource/dashboard-icons
1
0
Fork 0
mirror of https://github.com/walkxcode/dashboard-icons.git synced 2025-06-28 23:40:21 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Fix header styling

Browse Source
This commit is contained in:
Thomas Camlong 2025-04-17 10:29:05 +02:00
parent f99c0a0b6d
commit a522f27bef
No known key found for this signature in database
GPG Key ID: A678F374F428457B
1 changed files with 48 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
web/src/components/header.tsx
View File

@ -1,44 +1,49 @@
"use client" "use client";
import { IconSubmissionForm } from "@/components/icon-submission-form" import { IconSubmissionForm } from "@/components/icon-submission-form";
import { ThemeSwitcher } from "@/components/theme-switcher" import { ThemeSwitcher } from "@/components/theme-switcher";
import { REPO_PATH } from "@/constants" import { REPO_PATH } from "@/constants";
import { getIconsArray } from "@/lib/api" import { getIconsArray } from "@/lib/api";
import type { IconWithName } from "@/types/icons" import type { IconWithName } from "@/types/icons";
import { motion } from "framer-motion" import { motion } from "framer-motion";
import { Github, Menu, Search } from "lucide-react" import { Github, Menu, Search } from "lucide-react";
import Link from "next/link" import Link from "next/link";
import { useEffect, useState } from "react" import { useEffect, useState } from "react";
import { CommandMenu } from "./command-menu" import { CommandMenu } from "./command-menu";
import { HeaderNav } from "./header-nav" import { HeaderNav } from "./header-nav";
import { Button } from "./ui/button" import { Button } from "./ui/button";
import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet" import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip" import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "./ui/tooltip";
export function Header() { export function Header() {
const [iconsData, setIconsData] = useState<IconWithName[]>([]) const [iconsData, setIconsData] = useState<IconWithName[]>([]);
const [isLoaded, setIsLoaded] = useState(false) const [isLoaded, setIsLoaded] = useState(false);
const [commandMenuOpen, setCommandMenuOpen] = useState(false) const [commandMenuOpen, setCommandMenuOpen] = useState(false);
useEffect(() => { useEffect(() => {
async function loadIcons() { async function loadIcons() {
try { try {
const icons = await getIconsArray() const icons = await getIconsArray();
setIconsData(icons) setIconsData(icons);
setIsLoaded(true) setIsLoaded(true);
} catch (error) { } catch (error) {
console.error("Failed to load icons:", error) console.error("Failed to load icons:", error);
setIsLoaded(true) setIsLoaded(true);
} }
} }
loadIcons() loadIcons();
}, []) }, []);
// Function to open the command menu // Function to open the command menu
const openCommandMenu = () => { const openCommandMenu = () => {
setCommandMenuOpen(true) setCommandMenuOpen(true);
} };
return ( return (
<motion.header <motion.header
@ -49,10 +54,15 @@ export function Header() {
> >
<div className="px-4 md:px-12 flex items-center justify-between h-16 md:h-18"> <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"> <div className="flex items-center gap-2 md:gap-6">
<Link href="/" className="text-lg md:text-xl font-bold group"> <Link
<span className="transition-colors duration-300 group-hover:text-rose-500">Dashboard Icons</span> href="/"
className="text-lg md:text-xl font-bold group hidden md:block"
>
<span className="transition-colors duration-300 group-hover:text-rose-500">
Dashboard Icons
</span>
</Link> </Link>
<div className="hidden md:block"> <div className="flex-nowrap">
<HeaderNav /> <HeaderNav />
</div> </div>
</div> </div>
@ -109,59 +119,17 @@ export function Header() {
</TooltipProvider> </TooltipProvider>
</div> </div>
<ThemeSwitcher /> <ThemeSwitcher />
{/* Mobile menu */}
<div className="md:hidden">
<Sheet>
<SheetTrigger asChild>
<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-all duration-300 focus:ring-2 focus:ring-rose-500/20"
>
<Menu className="h-5 w-5 transition-all duration-300" />
<span className="sr-only">Toggle menu</span>
</Button>
</SheetTrigger>
<SheetContent side="right" className="w-[280px] sm:w-[320px] p-0">
<div className="flex flex-col h-full py-6">
<div className="px-6 mb-6">
<h2 className="text-xl font-bold text-rose-500">Dashboard Icons</h2>
</div>
<div className="flex-1 overflow-auto px-6">
<nav className="space-y-6">
<HeaderNav />
<div className="border-t pt-6" />
<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-all duration-300 cursor-pointer p-2 hover:bg-rose-500/5 rounded-md"
>
<Github className="h-4 w-4 transition-all duration-300" />
GitHub Repository
</Link>
</nav>
</div>
</div>
</SheetContent>
</Sheet>
</div>
</div> </div>
</div> </div>
{/* Single instance of CommandMenu */} {/* Single instance of CommandMenu */}
{isLoaded && <CommandMenu icons={iconsData} open={commandMenuOpen} onOpenChange={setCommandMenuOpen} />} {isLoaded && (
<CommandMenu
icons={iconsData}
open={commandMenuOpen}
onOpenChange={setCommandMenuOpen}
/>
)}
</motion.header> </motion.header>
) );
} }