jimlee/dashboard-icons
1
0
Fork 0
mirror of https://github.com/walkxcode/dashboard-icons.git synced 2025-10-26 21:19:04 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat(website): enhance website

Browse Source
This commit is contained in:
Bjorn Lammers
2025-04-17 07:21:19 +02:00
committed by Thomas Camlong
parent 6e3a39a4cf
commit 63349f7490
18 changed files with 1264 additions and 487 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
web/src/components/client-header.tsx
View File

@@ -1,161 +0,0 @@
"use client"
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 { motion } from "framer-motion"
import { Github, Menu, Search } from "lucide-react"
import Link from "next/link"
import { useEffect, useState } from "react"
import { CommandMenu } from "./command-menu"
import { HeaderNav } from "./header-nav"
import { Button } from "./ui/button"
import { Sheet, SheetContent, SheetTrigger } from "./ui/sheet"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip"
export function ClientHeader() {
const [icons, setIcons] = useState<Record<string, Icon>>({})
const [isLoaded, setIsLoaded] = useState(false)
useEffect(() => {
async function loadIcons() {
try {
const iconsData = await getAllIcons()
setIcons(iconsData)
setIsLoaded(true)
} catch (error) {
console.error("Failed to load icons:", error)
setIsLoaded(true)
}
}
loadIcons()
}, [])
return (
<motion.header
className="border-b sticky top-0 z-50 bg-background/95 backdrop-blur-md border-border/50"
initial={{ y: -20, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
transition={{ duration: 0.3, ease: "easeOut" }}
>
<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">
<span className="transition-colors duration-300 group-hover:text-rose-500">Dashboard Icons</span>
</Link>
<div className="hidden md:block">
<HeaderNav />
</div>
</div>
<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>
</div>
{/* Mobile search button */}
<div className="md:hidden">
<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"
>
<Search className="h-5 w-5" />
<span className="sr-only">Search 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>
<TooltipTrigger asChild>
<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"
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>
</Link>
</Button>
</TooltipTrigger>
<TooltipContent>
<p>GitHub</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<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-colors duration-200 focus:ring-2 focus:ring-rose-500/20"
>
<Menu className="h-5 w-5" />
<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" />
{isLoaded && <CommandMenu icons={Object.keys(icons)} triggerButtonId="mobile-search-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"
>
<Github className="h-4 w-4" />
GitHub Repository
</Link>
</nav>
</div>
</div>
</SheetContent>
</Sheet>
</div>
</div>
</div>
</motion.header>
)
}

186
web/src/components/command-menu.tsx
View File

@@ -1,103 +1,137 @@
"use client"
import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
import { useMediaQuery } from "@/hooks/use-media-query"
import { fuzzySearch } from "@/lib/utils"
import { Icon } from "@/types/icons"
import { useRouter } from "next/navigation"
import * as React from "react"
import { Button } from "@/components/ui/button"
import { CommandDialog, CommandEmpty, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
import { ImageIcon, Search } from "lucide-react"
import Link from "next/link"
import { useCallback, useEffect, useState } from "react"
interface CommandMenuProps {
icons: string[]
icons: {
name: string
data: {
categories: string[]
aliases: string[]
[key: string]: unknown
}
}[]
triggerButtonId?: string
displayAsButton?: boolean
open?: boolean
onOpenChange?: (open: boolean) => void
}
export function CommandMenu({ icons, triggerButtonId, displayAsButton = false }: CommandMenuProps) {
export function CommandMenu({ icons, open: externalOpen, onOpenChange: externalOnOpenChange }: CommandMenuProps) {
const router = useRouter()
const [open, setOpen] = React.useState(false)
const [mounted, setMounted] = React.useState(false)
const [inputValue, setInputValue] = React.useState("")
const getFilteredIcons = React.useCallback(() => {
const query = inputValue.toLowerCase().trim()
if (!query) return icons.slice(0, 75)
return icons.filter((icon) => {
const iconName = icon.toLowerCase()
if (iconName.includes(query)) return true
const parts = query.split(/\s+/)
let lastIndex = -1
return parts.every((part) => {
const index = iconName.indexOf(part, lastIndex + 1)
if (index === -1) return false
lastIndex = index
return true
})
})
}, [icons, inputValue])
const [internalOpen, setInternalOpen] = useState(false)
const [query, setQuery] = useState("")
const isDesktop = useMediaQuery("(min-width: 768px)")
const filteredIcons = getFilteredIcons()
// Use either external or internal state for controlling open state
const isOpen = externalOpen !== undefined ? externalOpen : internalOpen
React.useEffect(() => {
setMounted(true)
}, [])
// Wrap setIsOpen in useCallback to fix dependency issue
const setIsOpen = useCallback(
(value: boolean) => {
if (externalOnOpenChange) {
externalOnOpenChange(value)
} else {
setInternalOpen(value)
}
},
[externalOnOpenChange],
)
React.useEffect(() => {
const down = (e: KeyboardEvent) => {
if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
const filteredIcons = getFilteredIcons(icons, query)
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
if (
(e.key === "k" && (e.metaKey || e.ctrlKey)) ||
(e.key === "/" && document.activeElement?.tagName !== "INPUT" && document.activeElement?.tagName !== "TEXTAREA")
) {
e.preventDefault()
setOpen((open) => !open)
setIsOpen(!isOpen)
}
}
document.addEventListener("keydown", down)
return () => document.removeEventListener("keydown", down)
}, [])
document.addEventListener("keydown", handleKeyDown)
return () => document.removeEventListener("keydown", handleKeyDown)
}, [isOpen, setIsOpen])
// Effect to connect to external trigger button
React.useEffect(() => {
if (!triggerButtonId || !mounted) return
const triggerButton = document.getElementById(triggerButtonId)
if (!triggerButton) return
const handleClick = () => {
setOpen(true)
function getFilteredIcons(iconList: CommandMenuProps["icons"], query: string) {
if (!query) {
// Return a limited number of icons when no query is provided
return iconList.slice(0, 8)
}
triggerButton.addEventListener("click", handleClick)
return () => triggerButton.removeEventListener("click", handleClick)
}, [triggerButtonId, mounted])
// Calculate scores for each icon
const scoredIcons = iconList.map((icon) => {
// Calculate scores for different fields
const nameScore = fuzzySearch(icon.name, query) * 2.0 // Give more weight to name matches
const handleInputChange = React.useCallback((value: string) => {
setInputValue(value)
}, [])
// Get max score from aliases
const aliasScore =
icon.data.aliases && icon.data.aliases.length > 0
? Math.max(...icon.data.aliases.map((alias) => fuzzySearch(alias, query))) * 1.8 // Increased weight for aliases
: 0
const handleSelectIcon = React.useCallback(
(iconName: string) => {
router.push(`/icons/${iconName}`)
setOpen(false)
},
[router],
)
// Get max score from categories
const categoryScore =
icon.data.categories && icon.data.categories.length > 0
? Math.max(...icon.data.categories.map((category) => fuzzySearch(category, query)))
: 0
if (!mounted) return null
// Use the highest score
const score = Math.max(nameScore, aliasScore, categoryScore)
return { icon, score, matchedField: score === nameScore ? "name" : score === aliasScore ? "alias" : "category" }
})
// Filter icons with a minimum score and sort by highest score
return scoredIcons
.filter((item) => item.score > 0.3) // Higher threshold for more accurate results
.sort((a, b) => b.score - a.score)
.slice(0, 20) // Limit the number of results
.map((item) => item.icon)
}
const handleSelect = (name: string) => {
setIsOpen(false)
router.push(`/icons/${name}`)
}
return (
<CommandDialog open={open} onOpenChange={setOpen}>
<CommandInput placeholder="Type to search icons..." value={inputValue} onValueChange={handleInputChange} />
<CommandList className="max-h-[300px]">
{filteredIcons.length === 0 && <CommandEmpty>No results found. Try a different search term.</CommandEmpty>}
{filteredIcons.map((icon) => (
<CommandItem key={icon} onSelect={() => handleSelectIcon(icon)} className="cursor-pointer">
<Link prefetch={filteredIcons.length < 3} href={`/icons/${icon}`} className="flex items-center gap-2 w-full">
<span className="text-rose-500">
<ImageIcon className="h-4 w-4" />
</span>
<span className="capitalize">{icon.replace(/-/g, " ")}</span>
</Link>
</CommandItem>
))}
<CommandDialog open={isOpen} onOpenChange={setIsOpen}>
<CommandInput placeholder="Search for icons by name, category, or purpose..." value={query} onValueChange={setQuery} />
<CommandList>
<CommandEmpty>No matching icons found. Try a different search term or browse all icons.</CommandEmpty>
<CommandGroup heading="Icons">
{filteredIcons.map(({ name, data }) => {
// Find matched alias for display if available
const matchedAlias =
query && data.aliases && data.aliases.length > 0
? data.aliases.find((alias) => alias.toLowerCase().includes(query.toLowerCase()))
: null
return (
<CommandItem key={name} value={name} onSelect={() => handleSelect(name)} className="flex items-center gap-2 cursor-pointer">
<div className="flex-shrink-0 h-5 w-5 relative">
<div className="h-5 w-5 bg-rose-100 dark:bg-rose-900/30 rounded-md flex items-center justify-center">
<span className="text-[10px] font-medium text-rose-800 dark:text-rose-300">{name.substring(0, 2).toUpperCase()}</span>
</div>
</div>
<span className="flex-grow capitalize">{name.replace(/-/g, " ")}</span>
{matchedAlias && <span className="text-xs text-primary-500 truncate max-w-[100px]">alias: {matchedAlias}</span>}
{!matchedAlias && data.categories && data.categories.length > 0 && (
<span className="text-xs text-muted-foreground truncate max-w-[100px]">
{data.categories[0].replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())}
</span>
)}
</CommandItem>
)
})}
</CommandGroup>
</CommandList>
</CommandDialog>
)

129
web/src/components/footer.tsx
View File

@@ -4,8 +4,30 @@ import { REPO_PATH } from "@/constants"
import { motion } from "framer-motion"
import { ExternalLink, Github, Heart } from "lucide-react"
import Link from "next/link"
import { useState } from "react"
// Pre-define unique IDs for animations to avoid using array indices as keys
const HOVER_HEART_IDS = [
"hover-heart-1",
"hover-heart-2",
"hover-heart-3",
"hover-heart-4",
"hover-heart-5",
"hover-heart-6",
"hover-heart-7",
"hover-heart-8",
]
const BURST_HEART_IDS = ["burst-heart-1", "burst-heart-2", "burst-heart-3", "burst-heart-4", "burst-heart-5"]
export function Footer() {
const [isHeartHovered, setIsHeartHovered] = useState(false)
const [isHeartFilled, setIsHeartFilled] = useState(false)
// Toggle heart fill state and add extra mini hearts on click
const handleHeartClick = () => {
setIsHeartFilled(!isHeartFilled)
}
return (
<footer className="border-t py-12 bg-background relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-r from-rose-500/[0.03] via-transparent to-rose-500/[0.03]" />
@@ -66,10 +88,109 @@ export function Footer() {
transition={{ duration: 0.5, delay: 0.2 }}
>
<h3 className="font-bold text-lg text-foreground/90">Community</h3>
<p className="text-sm text-muted-foreground flex flex-wrap items-center gap-1.5 leading-relaxed">
Made with <Heart className="h-3.5 w-3.5 text-rose-500 flex-shrink-0 animate-pulse" /> by Homarr Labs and the open source
community.
</p>
<div className="text-sm text-muted-foreground flex flex-wrap items-center gap-1.5 leading-relaxed">
Made with{" "}
<div className="relative inline-block">
<motion.div
className="cursor-pointer"
onMouseEnter={() => setIsHeartHovered(true)}
onMouseLeave={() => setIsHeartHovered(false)}
onClick={handleHeartClick}
whileTap={{ scale: 0.85 }}
>
<motion.div
animate={{
scale: isHeartFilled ? [1, 1.3, 1] : 1,
}}
transition={{
duration: isHeartFilled ? 0.4 : 0,
ease: "easeInOut",
}}
>
<Heart
className="h-3.5 w-3.5 text-rose-500 flex-shrink-0 hover:scale-125 transition-all duration-200"
fill={isHeartFilled ? "#f43f5e" : "none"}
strokeWidth={isHeartFilled ? 1.5 : 2}
/>
</motion.div>
</motion.div>
{/* Easter egg mini hearts */}
{isHeartHovered && (
<>
{HOVER_HEART_IDS.map((id, i) => (
<motion.div
key={id}
initial={{ scale: 0, opacity: 0 }}
animate={{
scale: [0, 1, 0.8],
opacity: [0, 1, 0],
x: [0, (i % 2 === 0 ? 1 : -1) * Math.random() * 20],
y: [0, -Math.random() * 30],
}}
transition={{
duration: 0.8 + Math.random() * 0.5,
ease: "easeOut",
delay: Math.random() * 0.2,
}}
className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
>
<Heart className={`h-2 w-2 ${i < 3 ? "text-rose-300" : i < 6 ? "text-rose-400" : "text-rose-500"}`} />
</motion.div>
))}
{/* Subtle particle glow */}
<motion.div
initial={{ scale: 0, opacity: 0 }}
animate={{
scale: [0, 3],
opacity: [0, 0.3, 0],
}}
transition={{ duration: 0.6, ease: "easeOut" }}
className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3 h-3 rounded-full bg-rose-500/20 pointer-events-none"
/>
</>
)}
{/* Heart fill animation extras */}
{isHeartFilled && (
<>
{/* Radiating circles on heart fill */}
<motion.div
initial={{ scale: 0.5, opacity: 0 }}
animate={{
scale: [0.5, 2.5],
opacity: [0.5, 0],
}}
transition={{ duration: 0.6, ease: "easeOut" }}
className="absolute left-1/2 top-1/2 w-3 h-3 rounded-full bg-rose-500/30 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
/>
{/* Extra burst of mini hearts when filled */}
{BURST_HEART_IDS.map((id, i) => (
<motion.div
key={id}
initial={{ scale: 0, opacity: 0 }}
animate={{
scale: [0, 1, 0.8],
opacity: [0, 1, 0],
x: [0, Math.cos((i * Math.PI) / 2.5) * 25],
y: [0, Math.sin((i * Math.PI) / 2.5) * 25],
}}
transition={{
duration: 0.6,
ease: "easeOut",
}}
className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
>
<Heart className="h-2 w-2 text-rose-500" fill="#f43f5e" />
</motion.div>
))}
</>
)}
</div>{" "}
by Homarr Labs and the open source community.
</div>
<Link
href="https://github.com/homarr-labs"
target="_blank"

4
web/src/components/header-wrapper.tsx
View File

@@ -1,5 +1,5 @@
import { ClientHeader } from "./client-header"
import { Header } from "./header"
export function HeaderWrapper() {
return <ClientHeader />
return <Header />
}

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

@@ -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>
)
}

8
web/src/components/hero.tsx
View File

@@ -7,7 +7,7 @@ import { cn } from "@/lib/utils"
import { motion, useAnimation, useInView } from "framer-motion"
import { Circle, Github, Heart, Search, Sparkles } from "lucide-react"
import Link from "next/link"
import { useEffect, useState, useRef } from "react"
import { useEffect, useRef, useState } from "react"
interface IconCardProps {
name: string
@@ -72,7 +72,7 @@ function ElegantShape({
delay,
ease: [0.23, 0.86, 0.39, 0.96],
opacity: { duration: 1.2 },
}
},
})
}
}, [controls, delay, isInView, rotate])
@@ -302,7 +302,7 @@ export function HeroSection({ totalIcons }: { totalIcons: number }) {
<Input
name="q"
type="search"
placeholder={`Search ${totalIcons} icons...`}
placeholder={`Find any of ${totalIcons} icons by name or category...`}
className="pl-10 h-10 md:h-12 rounded-lg border-muted-foreground/20 focus:border-rose-500 focus:ring-rose-500/20 transition-all bg-background/95 dark:bg-background/90 backdrop-blur-sm text-sm md:text-base"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
@@ -318,7 +318,7 @@ export function HeroSection({ totalIcons }: { totalIcons: number }) {
<div className="flex gap-3 md:gap-4 flex-wrap justify-center">
<Button variant="default" className="h-9 md:h-10 px-4 gap-2 bg-rose-500 hover:bg-rose-600 text-white" asChild>
<Link href="/icons" className="flex items-center text-sm md:text-base">
Browse all icons
Explore all icons
</Link>
</Button>
<Button

142
web/src/components/icon-details.tsx
View File

@@ -6,14 +6,15 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { BASE_URL, REPO_PATH } from "@/constants"
import type { AuthorData, Icon } from "@/types/icons"
import confetti from "canvas-confetti"
import { motion } from "framer-motion"
import { Check, Copy, Download, FileType, Github, Moon, PaletteIcon, Sun } from "lucide-react"
import { useTheme } from "next-themes"
import Image from "next/image"
import Link from "next/link"
import { useState } from "react"
import { useCallback, useState } from "react"
import { toast } from "sonner"
import { Carbon } from "./carbon"
import { useTheme } from "next-themes"
export type IconDetailsProps = {
icon: string
@@ -44,24 +45,52 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
const availableFormats = getAvailableFormats()
const [copiedVariants, setCopiedVariants] = useState<Record<string, boolean>>({})
// Launch confetti from the pointer position
const launchConfetti = useCallback((originX?: number, originY?: number) => {
const defaults = {
startVelocity: 30,
spread: 360,
ticks: 50,
zIndex: 0,
disableForReducedMotion: true,
colors: ["#ff0a54", "#ff477e", "#ff7096", "#ff85a1", "#fbb1bd", "#f9bec7"],
}
// If we have origin coordinates, use them
if (originX !== undefined && originY !== undefined) {
confetti({
...defaults,
particleCount: 100,
origin: { x: originX / window.innerWidth, y: originY / window.innerHeight },
})
} else {
// Default to center of screen
confetti({
...defaults,
particleCount: 100,
origin: { x: 0.5, y: 0.5 },
})
}
}, [])
// Helper function to get the appropriate icon variant based on theme
const getIconVariant = (iconName: string) => {
// Check if the icon has theme variants
if (iconColorVariants) {
// If in dark mode and a light variant exists, use the light variant
if (resolvedTheme === 'dark' && iconColorVariants.light) {
return iconColorVariants.light;
if (resolvedTheme === "dark" && iconColorVariants.light) {
return iconColorVariants.light
}
// If in light mode and a dark variant exists, use the dark variant
else if (resolvedTheme === 'light' && iconColorVariants.dark) {
return iconColorVariants.dark;
if (resolvedTheme === "light" && iconColorVariants.dark) {
return iconColorVariants.dark
}
}
// Fall back to the default name if no appropriate variant
return iconName;
return iconName
}
const handleCopy = (url: string, variantKey: string) => {
const handleCopy = (url: string, variantKey: string, event?: React.MouseEvent) => {
navigator.clipboard.writeText(url)
setCopiedVariants((prev) => ({
...prev,
@@ -74,11 +103,57 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
}))
}, 2000)
// Launch confetti from click position or center of screen
if (event) {
launchConfetti(event.clientX, event.clientY)
} else {
launchConfetti()
}
toast.success("URL copied", {
description: "The icon URL has been copied to your clipboard",
description: "The icon URL has been copied to your clipboard. Ready to use!",
})
}
const handleDownload = async (event: React.MouseEvent, url: string, filename: string) => {
event.preventDefault()
// Launch confetti from download button position
launchConfetti(event.clientX, event.clientY)
try {
// Show loading toast
toast.loading("Preparing download...")
// Fetch the file first as a blob
const response = await fetch(url)
const blob = await response.blob()
// Create a blob URL and use it for download
const blobUrl = URL.createObjectURL(blob)
const link = document.createElement("a")
link.href = blobUrl
link.download = filename
document.body.appendChild(link)
link.click()
// Clean up
document.body.removeChild(link)
setTimeout(() => URL.revokeObjectURL(blobUrl), 100)
toast.dismiss()
toast.success("Download started", {
description: "Your icon file is being downloaded and will be saved to your device.",
})
} catch (error) {
console.error("Download error:", error)
toast.dismiss()
toast.error("Download failed", {
description: "There was an error downloading the file. Please try again.",
})
}
}
const renderVariant = (format: string, iconName: string, theme?: "light" | "dark") => {
const variantName = theme && iconColorVariants?.[theme] ? iconColorVariants[theme] : iconName
const url = `${BASE_URL}/${format}/${variantName}.${format}`
@@ -95,7 +170,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
className="relative w-28 h-28 mb-3 cursor-pointer rounded-xl overflow-hidden group"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
onClick={() => handleCopy(url, variantKey)}
onClick={(e) => handleCopy(url, variantKey, e)}
>
<div className="absolute inset-0 border-2 border-transparent group-hover:border-primary/20 rounded-xl z-10 transition-colors" />
@@ -123,7 +198,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
</motion.div>
</TooltipTrigger>
<TooltipContent>
<p>Click to copy URL to clipboard</p>
<p>Click to copy direct URL to clipboard</p>
</TooltipContent>
</Tooltip>
@@ -132,14 +207,17 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
<div className="flex gap-2 mt-3 w-full justify-center">
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline" size="icon" className="h-8 w-8 rounded-lg" asChild>
<a href={url} download={`${iconName}.${format}`}>
<Download className="w-4 h-4" />
</a>
<Button
variant="outline"
size="icon"
className="h-8 w-8 rounded-lg cursor-pointer"
onClick={(e) => handleDownload(e, url, `${iconName}.${format}`)}
>
<Download className="w-4 h-4" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Download icon</p>
<p>Download icon file</p>
</TooltipContent>
</Tooltip>
@@ -149,13 +227,13 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
variant="outline"
size="icon"
className="h-8 w-8 rounded-lg cursor-pointer"
onClick={() => handleCopy(url, `btn-${variantKey}`)}
onClick={(e) => handleCopy(url, `btn-${variantKey}`, e)}
>
{copiedVariants[`btn-${variantKey}`] ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Copy URL to clipboard</p>
<p>Copy direct URL to clipboard</p>
</TooltipContent>
</Tooltip>
@@ -235,9 +313,16 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
<h3 className="text-sm font-semibold text-muted-foreground">Categories</h3>
<div className="flex flex-wrap gap-2">
{iconData.categories.map((category) => (
<span key={category} className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold">
{category}
</span>
<Link
key={category}
href={`/icons?category=${encodeURIComponent(category)}`}
className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold hover:bg-rose-500/10 hover:border-rose-500/30 transition-colors cursor-pointer"
>
{category
.split("-")
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
.join(" ")}
</Link>
))}
</div>
</div>
@@ -246,13 +331,18 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
{iconData.aliases && iconData.aliases.length > 0 && (
<div className="space-y-3">
<h3 className="text-sm font-semibold text-muted-foreground">Aliases</h3>
<div className="flex flex-wrap gap-1">
<div className="flex flex-wrap gap-2">
{iconData.aliases.map((alias) => (
<span key={alias} className="inline-flex items-center rounded-full bg-muted px-2.5 py-0.5 text-xs">
<span
key={alias}
className="inline-flex items-center rounded-full bg-rose-50 dark:bg-rose-950/20 border border-rose-100 dark:border-rose-900/30 px-2.5 py-1 text-xs text-rose-700 dark:text-rose-300"
title={`This icon can also be found by searching for "${alias}"`}
>
{alias}
</span>
))}
</div>
<p className="text-[10px] text-muted-foreground mt-1">These aliases can be used to find this icon in search results.</p>
</div>
)}
</div>
@@ -350,11 +440,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
<div className="space-y-3">
<h3 className="text-sm font-semibold text-muted-foreground">Source</h3>
<Button variant="outline" className="w-full" asChild>
<Link
href={`${REPO_PATH}/blob/main/meta/${icon}.json`}
target="_blank"
rel="noopener noreferrer"
>
<Link href={`${REPO_PATH}/blob/main/meta/${icon}.json`} target="_blank" rel="noopener noreferrer">
<Github className="w-4 h-4 mr-2" />
View on GitHub
</Link>

48
web/src/components/icon-submission-form.tsx
View File

@@ -2,7 +2,6 @@
import { Button } from "@/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
import { REPO_PATH } from "@/constants"
import { DialogDescription } from "@radix-ui/react-dialog"
import { ExternalLink, PlusCircle } from "lucide-react"
@@ -13,31 +12,31 @@ export const ISSUE_TEMPLATES = [
{
id: "add_monochrome_icon",
name: "Add light & dark icon",
description: "Use this template to add a new icon to the project. Monochrome icons need both light and dark versions.",
description: "Submit a new icon with both light and dark versions for optimal theme compatibility.",
url: `${REPO_PATH}/issues/new?template=add_monochrome_icon.yml`,
},
{
id: "add_normal_icon",
name: "Add normal icon",
description: "Use this template to add a new icon to the project. Normal icons work for both light and dark themes.",
description: "Submit a new icon that works well across both light and dark themes.",
url: `${REPO_PATH}/issues/new?template=add_normal_icon.yml`,
},
{
id: "update_monochrome_icon",
name: "Update light & dark icon",
description: "Use this template to update an existing icon. Monochrome icons need both light and dark versions.",
description: "Improve an existing icon by updating both light and dark versions.",
url: `${REPO_PATH}/issues/new?template=update_monochrome_icon.yml`,
},
{
id: "update_normal_icon",
name: "Update normal icon",
description: "Use this template to update an existing icon. Normal icons work for both light and dark themes.",
description: "Improve an existing icon that works across both light and dark themes.",
url: `${REPO_PATH}/issues/new?template=update_normal_icon.yml`,
},
{
id: "blank_issue",
name: "Something else",
description: "You'd like to do something else? Use this template to create a new issue.",
description: "Create a custom issue for other suggestions, bug reports, or improvements.",
url: `${REPO_PATH}/issues/new?template=BLANK_ISSUE`,
},
]
@@ -46,15 +45,15 @@ export function IconSubmissionContent({ onClose }: { onClose?: () => void }) {
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-2">
{ISSUE_TEMPLATES.map((template) => (
<Link key={template.id} href={template.url} className="w-full" target="_blank" rel="noopener noreferrer">
<Link key={template.id} href={template.url} className="w-full group" target="_blank" rel="noopener noreferrer">
<Button
key={template.id}
variant="outline"
className="w-full flex flex-col items-start gap-1 h-auto p-4 text-left 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"
className="w-full flex flex-col items-start gap-1 h-auto p-4 text-left 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"
>
<div className="flex w-full items-center justify-between">
<span className="font-medium">{template.name}</span>
<ExternalLink className="h-4 w-4 text-muted-foreground" />
<span className="font-medium group-hover:text-rose-500 transition-all duration-300">{template.name}</span>
<ExternalLink className="h-4 w-4 text-muted-foreground group-hover:text-rose-500 transition-all duration-300" />
</div>
<span className="text-xs text-muted-foreground">{template.description}</span>
</Button>
@@ -69,27 +68,18 @@ export function IconSubmissionForm() {
return (
<Dialog open={open} onOpenChange={setOpen}>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<DialogTrigger asChild>
<Button
variant="outline"
className="hidden md:inline-flex 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"
>
<PlusCircle className="h-4 w-4 transition-all duration-300" /> Suggest new icon
</Button>
</DialogTrigger>
</TooltipTrigger>
<TooltipContent>
<p>Suggest a new icon</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<DialogTrigger asChild>
<Button
variant="outline"
className="hidden md:inline-flex 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"
>
<PlusCircle className="h-4 w-4 transition-all duration-300" /> Contribute new icon
</Button>
</DialogTrigger>
<DialogContent className="md:max-w-4xl backdrop-blur-2xl">
<DialogHeader>
<DialogTitle>Suggest a new icon</DialogTitle>
<DialogDescription>You can suggest a new icon by creating an issue on GitHub using one of the templates below.</DialogDescription>
<DialogTitle>Contribute a new icon</DialogTitle>
<DialogDescription>Choose a template below to suggest a new icon or improve an existing one.</DialogDescription>
</DialogHeader>
<div className="mt-4">
<IconSubmissionContent onClose={() => setOpen(false)} />

2
web/src/components/license-notice.tsx
View File

@@ -42,7 +42,7 @@ export function LicenseNotice() {
identification purposes only and do not imply endorsement.
</p>
<p>
Read the{" "}
View our{" "}
<Link
href={`${REPO_PATH}/blob/main/LICENSE`}
className="underline hover:text-foreground"

50
web/src/components/recently-added-icons.tsx
View File

@@ -1,13 +1,13 @@
"use client"
import { BASE_URL } from "@/constants"
import type { IconWithName } from "@/types/icons"
import type { Icon, IconWithName } from "@/types/icons"
import { format, isToday, isYesterday } from "date-fns"
import { motion, useInView } from "framer-motion"
import { ArrowRight, Clock, ExternalLink } from "lucide-react"
import { useTheme } from "next-themes"
import Image from "next/image"
import Link from "next/link"
import { useTheme } from "next-themes"
import { useRef } from "react"
function formatIconDate(timestamp: string): string {
@@ -25,20 +25,20 @@ export function RecentlyAddedIcons({ icons }: { icons: IconWithName[] }) {
const { resolvedTheme } = useTheme()
// Helper function to get the appropriate icon variant based on theme
const getIconVariant = (name: string, data: any) => {
const getIconVariant = (name: string, data: Icon) => {
// Check if the icon has theme variants and use appropriate one
if (data.colors) {
// If in dark mode and a light variant exists, use the light variant
if (resolvedTheme === 'dark' && data.colors.light) {
return data.colors.light;
if (resolvedTheme === "dark" && data.colors.light) {
return data.colors.light
}
// If in light mode and a dark variant exists, use the dark variant
else if (resolvedTheme === 'light' && data.colors.dark) {
return data.colors.dark;
if (resolvedTheme === "light" && data.colors.dark) {
return data.colors.dark
}
}
// Fall back to the default name if no appropriate variant
return name;
return name
}
return (
@@ -74,18 +74,18 @@ export function RecentlyAddedIcons({ icons }: { icons: IconWithName[] }) {
))}
</div>
<motion.div
<motion.div
className="mt-12 text-center"
initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }}
viewport={{ once: true }}
viewport={{ once: true }}
transition={{ duration: 0.8, delay: 0.4 }}
>
<Link
href="/icons"
className="text-rose-500 dark:text-rose-400 hover:text-rose-600 dark:hover:text-rose-300 font-medium inline-flex items-center py-2 px-4 rounded-full border border-rose-200 dark:border-rose-800/30 hover:bg-rose-50 dark:hover:bg-rose-900/20 transition-all duration-200 group hover-lift soft-shadow"
>
View all icons
View complete collection
<ArrowRight className="w-4 h-4 ml-1.5 transition-transform duration-200 group-hover:translate-x-1" />
</Link>
</motion.div>
@@ -95,17 +95,21 @@ export function RecentlyAddedIcons({ icons }: { icons: IconWithName[] }) {
}
// Extracted component for better animation handling
function RecentIconCard({ name, data, getIconVariant }: {
name: string;
data: any;
getIconVariant: (name: string, data: any) => string;
function RecentIconCard({
name,
data,
getIconVariant,
}: {
name: string
data: Icon
getIconVariant: (name: string, data: Icon) => string
}) {
const ref = useRef(null);
const ref = useRef(null)
const isInView = useInView(ref, {
once: false,
amount: 0.2,
margin: "100px 0px"
});
margin: "100px 0px",
})
const variants = {
hidden: { opacity: 0, y: 20, scale: 0.95 },
@@ -113,15 +117,15 @@ function RecentIconCard({ name, data, getIconVariant }: {
opacity: 1,
y: 0,
scale: 1,
transition: { duration: 0.4, ease: [0.25, 0.1, 0.25, 1.0] }
transition: { duration: 0.4, ease: [0.25, 0.1, 0.25, 1.0] },
},
exit: {
opacity: 0,
y: -10,
scale: 0.98,
transition: { duration: 0.3, ease: [0.25, 0.1, 0.25, 1.0] }
}
};
transition: { duration: 0.3, ease: [0.25, 0.1, 0.25, 1.0] },
},
}
return (
<motion.div
@@ -162,5 +166,5 @@ function RecentIconCard({ name, data, getIconVariant }: {
</div>
</Link>
</motion.div>
);
)
}