mirror of
https://github.com/walkxcode/dashboard-icons.git
synced 2025-06-28 23:40:21 +08:00
feat(website): enhance website
This commit is contained in:
Bjorn Lammers
Thomas Camlong
parent
6e3a39a4cf
commit
63349f7490
@ -39,6 +39,7 @@
|
||||
"@radix-ui/react-toggle-group": "^1.1.3",
|
||||
"@radix-ui/react-tooltip": "^1.2.0",
|
||||
"@tanstack/react-virtual": "^3.13.6",
|
||||
"canvas-confetti": "^1.9.3",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"cmdk": "^1.1.1",
|
||||
@ -67,6 +68,7 @@
|
||||
"devDependencies": {
|
||||
"@biomejs/biome": "1.9.4",
|
||||
"@tailwindcss/postcss": "^4.1.3",
|
||||
"@types/canvas-confetti": "^1.9.0",
|
||||
"@types/node": "^22.14.0",
|
||||
"@types/react": "^19.1.0",
|
||||
"@types/react-dom": "^19.1.2",
|
||||
|
||||
16
web/pnpm-lock.yaml
generated
16
web/pnpm-lock.yaml
generated
@ -92,6 +92,9 @@ importers:
|
||||
'@tanstack/react-virtual':
|
||||
specifier: ^3.13.6
|
||||
version: 3.13.6(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
|
||||
canvas-confetti:
|
||||
specifier: ^1.9.3
|
||||
version: 1.9.3
|
||||
class-variance-authority:
|
||||
specifier: ^0.7.1
|
||||
version: 0.7.1
|
||||
@ -171,6 +174,9 @@ importers:
|
||||
'@tailwindcss/postcss':
|
||||
specifier: ^4.1.3
|
||||
version: 4.1.3
|
||||
'@types/canvas-confetti':
|
||||
specifier: ^1.9.0
|
||||
version: 1.9.0
|
||||
'@types/node':
|
||||
specifier: ^22.14.0
|
||||
version: 22.14.0
|
||||
@ -1122,6 +1128,9 @@ packages:
|
||||
'@tanstack/virtual-core@3.13.6':
|
||||
resolution: {integrity: sha512-cnQUeWnhNP8tJ4WsGcYiX24Gjkc9ALstLbHcBj1t3E7EimN6n6kHH+DPV4PpDnuw00NApQp+ViojMj1GRdwYQg==}
|
||||
|
||||
'@types/canvas-confetti@1.9.0':
|
||||
resolution: {integrity: sha512-aBGj/dULrimR1XDZLtG9JwxX1b4HPRF6CX9Yfwh3NvstZEm1ZL7RBnel4keCPSqs1ANRu1u2Aoz9R+VmtjYuTg==}
|
||||
|
||||
'@types/d3-array@3.2.1':
|
||||
resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
|
||||
|
||||
@ -1181,6 +1190,9 @@ packages:
|
||||
caniuse-lite@1.0.30001713:
|
||||
resolution: {integrity: sha512-wCIWIg+A4Xr7NfhTuHdX+/FKh3+Op3LBbSp2N5Pfx6T/LhdQy3GTyoTg48BReaW/MyMNZAkTadsBtai3ldWK0Q==}
|
||||
|
||||
canvas-confetti@1.9.3:
|
||||
resolution: {integrity: sha512-rFfTURMvmVEX1gyXFgn5QMn81bYk70qa0HLzcIOSVEyl57n6o9ItHeBtUSWdvKAPY0xlvBHno4/v3QPrT83q9g==}
|
||||
|
||||
class-variance-authority@0.7.1:
|
||||
resolution: {integrity: sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==}
|
||||
|
||||
@ -2673,6 +2685,8 @@ snapshots:
|
||||
|
||||
'@tanstack/virtual-core@3.13.6': {}
|
||||
|
||||
'@types/canvas-confetti@1.9.0': {}
|
||||
|
||||
'@types/d3-array@3.2.1': {}
|
||||
|
||||
'@types/d3-color@3.1.3': {}
|
||||
@ -2734,6 +2748,8 @@ snapshots:
|
||||
|
||||
caniuse-lite@1.0.30001713: {}
|
||||
|
||||
canvas-confetti@1.9.3: {}
|
||||
|
||||
class-variance-authority@0.7.1:
|
||||
dependencies:
|
||||
clsx: 2.1.1
|
||||
|
||||
51
web/src/app/error.tsx
Normal file
51
web/src/app/error.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
"use client"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { AlertTriangle, ArrowLeft, RefreshCcw } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { useEffect } from "react"
|
||||
|
||||
export default function ErrorPage({
|
||||
error,
|
||||
reset,
|
||||
}: {
|
||||
error: Error & { digest?: string }
|
||||
reset: () => void
|
||||
}) {
|
||||
const router = useRouter()
|
||||
|
||||
useEffect(() => {
|
||||
// Log the error to an error reporting service
|
||||
console.error("Application error:", error)
|
||||
}, [error])
|
||||
|
||||
const handleGoBack = () => {
|
||||
router.back()
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="py-16 flex items-center justify-center">
|
||||
<div className="text-center space-y-6 max-w-md">
|
||||
<div className="mx-auto w-16 h-16 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center text-red-600 dark:text-red-400">
|
||||
<AlertTriangle className="w-8 h-8" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold">Something went wrong</h1>
|
||||
<p className="text-muted-foreground">
|
||||
An unexpected error occurred while loading this page. We've been notified and are looking into it.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
|
||||
<Button variant="outline" onClick={() => reset()} className="cursor-pointer">
|
||||
<RefreshCcw className="mr-2 h-4 w-4" />
|
||||
Try again
|
||||
</Button>
|
||||
<Button onClick={handleGoBack} className="cursor-pointer">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Go back
|
||||
</Button>
|
||||
</div>
|
||||
{error.digest && <p className="text-xs text-muted-foreground mt-6">Error ID: {error.digest}</p>}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,67 +1,208 @@
|
||||
"use client"
|
||||
|
||||
import { IconSubmissionContent } from "@/components/icon-submission-form"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuCheckboxItem,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuPortal,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuSub,
|
||||
DropdownMenuSubContent,
|
||||
DropdownMenuSubTrigger,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { BASE_URL } from "@/constants"
|
||||
import type { IconSearchProps } from "@/types/icons"
|
||||
import { fuzzySearch } from "@/lib/utils"
|
||||
import { cn } from "@/lib/utils"
|
||||
import type { Icon, IconSearchProps, IconWithName } from "@/types/icons"
|
||||
import { motion } from "framer-motion"
|
||||
import { Search } from "lucide-react"
|
||||
import { useInView } from "framer-motion"
|
||||
import { ArrowDownAZ, ArrowUpZA, Calendar, Filter, Search, SortAsc, X } from "lucide-react"
|
||||
import { useTheme } from "next-themes"
|
||||
import Image from "next/image"
|
||||
import Link from "next/link"
|
||||
import { usePathname, useRouter, useSearchParams } from "next/navigation"
|
||||
import { useCallback, useEffect, useRef, useState } from "react"
|
||||
import { useTheme } from "next-themes"
|
||||
import { useInView } from "framer-motion"
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react"
|
||||
|
||||
type SortOption = "relevance" | "alphabetical-asc" | "alphabetical-desc" | "newest"
|
||||
|
||||
export function IconSearch({ icons }: IconSearchProps) {
|
||||
const searchParams = useSearchParams()
|
||||
const initialQuery = searchParams.get("q")
|
||||
const initialCategories = searchParams.getAll("category")
|
||||
const initialSort = (searchParams.get("sort") as SortOption) || "relevance"
|
||||
const router = useRouter()
|
||||
const pathname = usePathname()
|
||||
const [searchQuery, setSearchQuery] = useState(initialQuery ?? "")
|
||||
const [selectedCategories, setSelectedCategories] = useState<string[]>(initialCategories ?? [])
|
||||
const [sortOption, setSortOption] = useState<SortOption>(initialSort)
|
||||
const timeoutRef = useRef<NodeJS.Timeout | null>(null)
|
||||
const { resolvedTheme } = useTheme()
|
||||
const [filteredIcons, setFilteredIcons] = useState(() => {
|
||||
if (!initialQuery?.trim()) return icons
|
||||
|
||||
const q = initialQuery.toLowerCase()
|
||||
return icons.filter(({ name, data }) => {
|
||||
if (name.toLowerCase().includes(q)) return true
|
||||
if (data.aliases.some((alias) => alias.toLowerCase().includes(q))) return true
|
||||
if (data.categories.some((category) => category.toLowerCase().includes(q))) return true
|
||||
// Extract all unique categories
|
||||
const allCategories = useMemo(() => {
|
||||
const categories = new Set<string>()
|
||||
for (const icon of icons) {
|
||||
for (const category of icon.data.categories) {
|
||||
categories.add(category)
|
||||
}
|
||||
}
|
||||
return Array.from(categories).sort()
|
||||
}, [icons])
|
||||
|
||||
return false
|
||||
})
|
||||
})
|
||||
const filterIcons = useCallback(
|
||||
(query: string) => {
|
||||
if (!query.trim()) {
|
||||
return icons
|
||||
// Define filterIconsByQueryAndCategory BEFORE it's used in useState
|
||||
const filterIconsByQueryAndCategories = useCallback((iconList: typeof icons, query: string, categories: string[], sort: SortOption) => {
|
||||
let filtered = iconList
|
||||
|
||||
// Apply category filters (if any are selected)
|
||||
if (categories.length > 0) {
|
||||
filtered = filtered.filter(({ data }) =>
|
||||
// Check if the icon has at least one of the selected categories
|
||||
data.categories.some((cat) => categories.some((selectedCat) => cat.toLowerCase() === selectedCat.toLowerCase())),
|
||||
)
|
||||
}
|
||||
|
||||
const q = query.toLowerCase()
|
||||
return icons.filter(({ name, data }) => {
|
||||
if (name.toLowerCase().includes(q)) return true
|
||||
if (data.aliases.some((alias) => alias.toLowerCase().includes(q))) return true
|
||||
if (data.categories.some((category) => category.toLowerCase().includes(q))) return true
|
||||
// Create a scored version of icons for relevance and other sorting
|
||||
let scoredIcons: { icon: (typeof filtered)[0]; score: number; matchedAlias?: string }[] = []
|
||||
|
||||
return false
|
||||
// Apply search query filter and calculate scores
|
||||
if (query.trim()) {
|
||||
scoredIcons = filtered.map((icon) => {
|
||||
// Calculate scores for different fields
|
||||
const nameScore = fuzzySearch(icon.name, query) * 1.5 // Give more weight to name matches
|
||||
|
||||
// Find matching alias if any
|
||||
let matchedAlias: string | undefined = undefined
|
||||
let maxAliasScore = 0
|
||||
|
||||
// Check each alias for a match
|
||||
if (icon.data.aliases.length > 0) {
|
||||
for (const alias of icon.data.aliases) {
|
||||
const aliasScore = fuzzySearch(alias, query) * 1.4
|
||||
if (aliasScore > maxAliasScore) {
|
||||
maxAliasScore = aliasScore
|
||||
matchedAlias = alias
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Get max score from categories
|
||||
const categoryScore =
|
||||
icon.data.categories.length > 0 ? Math.max(...icon.data.categories.map((category) => fuzzySearch(category, query))) : 0
|
||||
|
||||
// Use the highest score
|
||||
const score = Math.max(nameScore, maxAliasScore, categoryScore)
|
||||
|
||||
return {
|
||||
icon,
|
||||
score,
|
||||
matchedAlias: score === maxAliasScore && maxAliasScore > 0 ? matchedAlias : undefined,
|
||||
}
|
||||
})
|
||||
},
|
||||
[icons],
|
||||
)
|
||||
|
||||
// Filter icons with a minimum score
|
||||
scoredIcons = scoredIcons.filter((item) => item.score > 0.2) // Minimum threshold
|
||||
|
||||
// If we're using relevance sorting, apply it now
|
||||
if (sort === "relevance") {
|
||||
// Sort by score
|
||||
scoredIcons.sort((a, b) => b.score - a.score)
|
||||
return scoredIcons.map((item) => item.icon)
|
||||
}
|
||||
|
||||
// Otherwise, we'll use the filtered results for other sorting methods
|
||||
filtered = scoredIcons.map((item) => item.icon)
|
||||
}
|
||||
|
||||
// Apply sorting if not by relevance (which was already handled above)
|
||||
if (sort === "alphabetical-asc") {
|
||||
return filtered.sort((a, b) => a.name.localeCompare(b.name))
|
||||
}
|
||||
if (sort === "alphabetical-desc") {
|
||||
return filtered.sort((a, b) => b.name.localeCompare(a.name))
|
||||
}
|
||||
if (sort === "newest") {
|
||||
return filtered.sort((a, b) => {
|
||||
return new Date(b.data.update.timestamp).getTime() - new Date(a.data.update.timestamp).getTime()
|
||||
})
|
||||
}
|
||||
|
||||
// Default alphabetical sort if no query or sort option not recognized
|
||||
return filtered.sort((a, b) => a.name.localeCompare(b.name))
|
||||
}, [])
|
||||
|
||||
// Now use the function after it's been defined
|
||||
const [filteredIcons, setFilteredIcons] = useState(() => {
|
||||
return filterIconsByQueryAndCategories(icons, initialQuery ?? "", initialCategories ?? [], initialSort)
|
||||
})
|
||||
|
||||
// Store matched aliases separately
|
||||
const [matchedAliases, setMatchedAliases] = useState<Record<string, string>>({})
|
||||
|
||||
const updateResults = useCallback(
|
||||
(query: string) => {
|
||||
setFilteredIcons(filterIcons(query))
|
||||
(query: string, categories: string[], sort: SortOption) => {
|
||||
// Clear existing matched aliases
|
||||
setMatchedAliases({})
|
||||
|
||||
// If we have a query, capture any matched aliases before filtering
|
||||
if (query.trim()) {
|
||||
const newMatches: Record<string, string> = {}
|
||||
const scoredResults = icons.map((icon) => {
|
||||
// Check for alias matches
|
||||
let bestAliasScore = 0
|
||||
let bestAlias = ""
|
||||
for (const alias of icon.data.aliases) {
|
||||
const score = fuzzySearch(alias, query) * 1.4
|
||||
if (score > bestAliasScore && score > 0.3) {
|
||||
// Only consider strong matches
|
||||
bestAliasScore = score
|
||||
bestAlias = alias
|
||||
}
|
||||
}
|
||||
|
||||
// If the name match is weaker than alias match, store the alias
|
||||
const nameScore = fuzzySearch(icon.name, query) * 1.5
|
||||
if (bestAliasScore > nameScore && bestAliasScore > 0.3) {
|
||||
newMatches[icon.name] = bestAlias
|
||||
}
|
||||
|
||||
return { icon }
|
||||
})
|
||||
|
||||
// Update the matched aliases
|
||||
setMatchedAliases(newMatches)
|
||||
}
|
||||
|
||||
// Continue with normal filtering
|
||||
setFilteredIcons(filterIconsByQueryAndCategories(icons, query, categories, sort))
|
||||
const params = new URLSearchParams()
|
||||
if (query) params.set("q", query)
|
||||
|
||||
const newUrl = query ? `${pathname}?${params.toString()}` : pathname
|
||||
// Clear existing category params and add new ones
|
||||
for (const category of categories) {
|
||||
params.append("category", category)
|
||||
}
|
||||
|
||||
// Add sort parameter if not default
|
||||
if (sort !== "relevance" || initialSort !== "relevance") {
|
||||
params.set("sort", sort)
|
||||
}
|
||||
|
||||
const newUrl = params.toString() ? `${pathname}?${params.toString()}` : pathname
|
||||
router.push(newUrl, { scroll: false })
|
||||
},
|
||||
[filterIcons, pathname, router],
|
||||
[filterIconsByQueryAndCategories, icons, pathname, router, initialSort],
|
||||
)
|
||||
|
||||
const handleSearch = useCallback(
|
||||
(query: string) => {
|
||||
setSearchQuery(query)
|
||||
@ -69,11 +210,45 @@ export function IconSearch({ icons }: IconSearchProps) {
|
||||
clearTimeout(timeoutRef.current)
|
||||
}
|
||||
timeoutRef.current = setTimeout(() => {
|
||||
updateResults(query)
|
||||
updateResults(query, selectedCategories, sortOption)
|
||||
}, 100)
|
||||
},
|
||||
[updateResults],
|
||||
[updateResults, selectedCategories, sortOption],
|
||||
)
|
||||
|
||||
const handleCategoryChange = useCallback(
|
||||
(category: string) => {
|
||||
let newCategories: string[]
|
||||
|
||||
if (selectedCategories.includes(category)) {
|
||||
// Remove the category if it's already selected
|
||||
newCategories = selectedCategories.filter((c) => c !== category)
|
||||
} else {
|
||||
// Add the category if it's not selected
|
||||
newCategories = [...selectedCategories, category]
|
||||
}
|
||||
|
||||
setSelectedCategories(newCategories)
|
||||
updateResults(searchQuery, newCategories, sortOption)
|
||||
},
|
||||
[updateResults, searchQuery, selectedCategories, sortOption],
|
||||
)
|
||||
|
||||
const handleSortChange = useCallback(
|
||||
(sort: SortOption) => {
|
||||
setSortOption(sort)
|
||||
updateResults(searchQuery, selectedCategories, sort)
|
||||
},
|
||||
[updateResults, searchQuery, selectedCategories],
|
||||
)
|
||||
|
||||
const clearFilters = useCallback(() => {
|
||||
setSearchQuery("")
|
||||
setSelectedCategories([])
|
||||
setSortOption("relevance")
|
||||
updateResults("", [], "relevance")
|
||||
}, [updateResults])
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (timeoutRef.current) {
|
||||
@ -83,40 +258,216 @@ export function IconSearch({ icons }: IconSearchProps) {
|
||||
}, [])
|
||||
|
||||
// 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
|
||||
}
|
||||
|
||||
if (!searchParams) return null
|
||||
|
||||
const getSortLabel = (sort: SortOption) => {
|
||||
switch (sort) {
|
||||
case "relevance":
|
||||
return "Best match"
|
||||
case "alphabetical-asc":
|
||||
return "A to Z"
|
||||
case "alphabetical-desc":
|
||||
return "Z to A"
|
||||
case "newest":
|
||||
return "Newest first"
|
||||
default:
|
||||
return "Sort"
|
||||
}
|
||||
}
|
||||
|
||||
const getSortIcon = (sort: SortOption) => {
|
||||
switch (sort) {
|
||||
case "relevance":
|
||||
return <Search className="h-4 w-4" />
|
||||
case "alphabetical-asc":
|
||||
return <ArrowDownAZ className="h-4 w-4" />
|
||||
case "alphabetical-desc":
|
||||
return <ArrowUpZA className="h-4 w-4" />
|
||||
case "newest":
|
||||
return <Calendar className="h-4 w-4" />
|
||||
default:
|
||||
return <SortAsc className="h-4 w-4" />
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<motion.div
|
||||
className="relative w-full sm:max-w-md"
|
||||
className="space-y-4 w-full"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<Search className="absolute left-2.5 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground transition-all duration-300" />
|
||||
{/* Search input */}
|
||||
<div className="relative w-full">
|
||||
<div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground transition-all duration-300">
|
||||
<Search className="h-4 w-4" />
|
||||
</div>
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search icons by name, aliases, or categories..."
|
||||
className="w-full pl-8 cursor-text transition-all duration-300 text-sm md:text-base"
|
||||
placeholder="Search icons by name, alias, or category..."
|
||||
className="w-full h-10 pl-9 cursor-text transition-all duration-300 text-sm md:text-base bg-background/80 dark:bg-background/90 border-border shadow-sm hover:border-rose-500/50 focus-visible:ring-rose-500/20"
|
||||
value={searchQuery}
|
||||
onChange={(e) => handleSearch(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Filter and sort controls */}
|
||||
<div className="flex flex-wrap gap-2 justify-start">
|
||||
{/* Filter dropdown */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex-1 sm:flex-none cursor-pointer bg-background/80 dark:bg-background/90 border-border shadow-sm hover:bg-rose-500/10 dark:hover:bg-rose-900/20 hover:border-rose-500"
|
||||
>
|
||||
<Filter className="h-4 w-4 mr-2" />
|
||||
<span>Filter</span>
|
||||
{selectedCategories.length > 0 && (
|
||||
<Badge variant="secondary" className="ml-2 px-1.5">
|
||||
{selectedCategories.length}
|
||||
</Badge>
|
||||
)}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="w-64 sm:w-56">
|
||||
<DropdownMenuLabel className="font-semibold">Categories</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
|
||||
<div className="max-h-[40vh] overflow-y-auto p-1">
|
||||
{allCategories.map((category) => (
|
||||
<DropdownMenuCheckboxItem
|
||||
key={category}
|
||||
checked={selectedCategories.includes(category)}
|
||||
onCheckedChange={() => handleCategoryChange(category)}
|
||||
className="cursor-pointer capitalize"
|
||||
>
|
||||
{category.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())}
|
||||
</DropdownMenuCheckboxItem>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{selectedCategories.length > 0 && (
|
||||
<>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem
|
||||
onClick={() => {
|
||||
setSelectedCategories([])
|
||||
updateResults(searchQuery, [], sortOption)
|
||||
}}
|
||||
className="cursor-pointer text-rose-500 focus:text-rose-500 focus:bg-rose-50 dark:focus:bg-rose-950/20"
|
||||
>
|
||||
Clear all filters
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
{/* Sort dropdown */}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="flex-1 sm:flex-none cursor-pointer bg-background/80 dark:bg-background/90 border-border shadow-sm hover:bg-rose-500/10 dark:hover:bg-rose-900/20 hover:border-rose-500"
|
||||
>
|
||||
{getSortIcon(sortOption)}
|
||||
<span className="ml-2">{getSortLabel(sortOption)}</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="w-56">
|
||||
<DropdownMenuLabel className="font-semibold">Sort By</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuRadioGroup value={sortOption} onValueChange={(value) => handleSortChange(value as SortOption)}>
|
||||
<DropdownMenuRadioItem value="relevance" className="cursor-pointer">
|
||||
<Search className="h-4 w-4 mr-2" />
|
||||
Best match
|
||||
</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="alphabetical-asc" className="cursor-pointer">
|
||||
<ArrowDownAZ className="h-4 w-4 mr-2" />A to Z
|
||||
</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="alphabetical-desc" className="cursor-pointer">
|
||||
<ArrowUpZA className="h-4 w-4 mr-2" />Z to A
|
||||
</DropdownMenuRadioItem>
|
||||
<DropdownMenuRadioItem value="newest" className="cursor-pointer">
|
||||
<Calendar className="h-4 w-4 mr-2" />
|
||||
Newest first
|
||||
</DropdownMenuRadioItem>
|
||||
</DropdownMenuRadioGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
{/* Clear all button */}
|
||||
{(searchQuery || selectedCategories.length > 0 || sortOption !== "relevance") && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={clearFilters}
|
||||
className="flex-1 sm:flex-none cursor-pointer bg-background/80 dark:bg-background/90 hover:bg-rose-500/10 dark:hover:bg-rose-900/20 border-rose-500/20"
|
||||
>
|
||||
<X className="h-4 w-4 mr-2" />
|
||||
<span>Clear all</span>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Active filter badges */}
|
||||
{selectedCategories.length > 0 && (
|
||||
<div className="flex flex-wrap items-center gap-2 mt-2">
|
||||
<span className="text-sm text-muted-foreground">Filters:</span>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{selectedCategories.map((category) => (
|
||||
<Badge
|
||||
key={category}
|
||||
variant="secondary"
|
||||
className="flex items-center gap-1 pl-2 pr-1 bg-rose-500/10 dark:bg-rose-900/20 text-rose-700 dark:text-rose-300 border border-rose-500/20"
|
||||
>
|
||||
{category.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-4 w-4 p-0 hover:bg-transparent cursor-pointer"
|
||||
onClick={() => handleCategoryChange(category)}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</Button>
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSelectedCategories([])
|
||||
updateResults(searchQuery, [], sortOption)
|
||||
}}
|
||||
className="text-xs h-7 px-2 text-rose-500 hover:text-rose-600 hover:bg-rose-500/10 cursor-pointer"
|
||||
>
|
||||
Clear all
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Separator className="my-2" />
|
||||
</motion.div>
|
||||
|
||||
{filteredIcons.length === 0 ? (
|
||||
@ -127,32 +478,61 @@ export function IconSearch({ icons }: IconSearchProps) {
|
||||
transition={{ duration: 0.5, delay: 0.2 }}
|
||||
>
|
||||
<div className="text-center">
|
||||
<h2 className="text-5xl font-semibold">We don't have this one...yet!</h2>
|
||||
<h2 className="text-3xl sm:text-5xl font-semibold">We don't have this one...yet!</h2>
|
||||
<p className="mt-4 text-muted-foreground">
|
||||
{searchQuery && selectedCategories.length > 0
|
||||
? `No icons found matching "${searchQuery}" with the selected filters.`
|
||||
: searchQuery
|
||||
? `No icons found matching "${searchQuery}".`
|
||||
: selectedCategories.length > 0
|
||||
? "No icons found with the selected filters."
|
||||
: "No icons found matching your criteria."}
|
||||
</p>
|
||||
<Button variant="outline" className="mt-4 cursor-pointer" onClick={clearFilters}>
|
||||
Clear all filters
|
||||
</Button>
|
||||
</div>
|
||||
<IconSubmissionContent />
|
||||
</motion.div>
|
||||
) : (
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4 mt-8">
|
||||
{filteredIcons.map(({ name, data }, index) => (
|
||||
<IconCard key={name} name={name} data={data} getIconVariant={getIconVariant} />
|
||||
<>
|
||||
<div className="flex justify-between items-center pb-2">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Found {filteredIcons.length} icon{filteredIcons.length !== 1 ? "s" : ""}.
|
||||
</p>
|
||||
<div className="flex items-center gap-1 text-xs text-muted-foreground">
|
||||
{getSortIcon(sortOption)}
|
||||
<span>{getSortLabel(sortOption)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4 mt-2">
|
||||
{filteredIcons.map(({ name, data }) => (
|
||||
<IconCard key={name} name={name} data={data} getIconVariant={getIconVariant} matchedAlias={matchedAliases[name] || null} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function IconCard({ name, data, getIconVariant }: {
|
||||
name: string;
|
||||
data: any;
|
||||
getIconVariant: (name: string, data: any) => string;
|
||||
function IconCard({
|
||||
name,
|
||||
data,
|
||||
getIconVariant,
|
||||
matchedAlias,
|
||||
}: {
|
||||
name: string
|
||||
data: Icon
|
||||
getIconVariant: (name: string, data: Icon) => string
|
||||
matchedAlias?: string | null
|
||||
}) {
|
||||
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 },
|
||||
@ -160,15 +540,15 @@ function IconCard({ 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
|
||||
@ -182,7 +562,7 @@ function IconCard({ name, data, getIconVariant }: {
|
||||
<Link
|
||||
prefetch={false}
|
||||
href={`/icons/${name}`}
|
||||
className="group flex flex-col items-center p-3 sm:p-4 rounded-lg border border-border bg-background/95 dark:bg-background/80 hover:border-rose-500 hover:bg-rose-500/10 dark:hover:bg-rose-900/30 dark:hover:border-rose-500 transition-all duration-300 hover:shadow-lg hover:shadow-rose-500/5 relative overflow-hidden"
|
||||
className="group flex flex-col items-center p-3 sm:p-4 rounded-lg border border-border bg-background hover:border-rose-500 hover:bg-rose-500/10 dark:hover:bg-rose-900/30 dark:hover:border-rose-500 transition-all duration-300 hover:shadow-lg hover:shadow-rose-500/5 relative overflow-hidden cursor-pointer"
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-rose-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
||||
|
||||
@ -197,7 +577,11 @@ function IconCard({ name, data, getIconVariant }: {
|
||||
<span className="text-xs sm:text-sm text-center truncate w-full capitalize group-hover:text-rose-600 dark:group-hover:text-rose-400 transition-colors duration-200 font-medium">
|
||||
{name.replace(/-/g, " ")}
|
||||
</span>
|
||||
|
||||
{matchedAlias && (
|
||||
<span className="text-[10px] text-center truncate w-full text-rose-500 dark:text-rose-400 mt-1">Alias: {matchedAlias}</span>
|
||||
)}
|
||||
</Link>
|
||||
</motion.div>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import { IconSubmissionContent } from "@/components/icon-submission-form"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { AlertTriangle, ArrowLeft } from "lucide-react"
|
||||
import { AlertTriangle, ArrowLeft, PlusCircle } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
|
||||
export default function NotFound({
|
||||
@ -9,21 +10,38 @@ export default function NotFound({
|
||||
}) {
|
||||
return (
|
||||
<div className="py-16 flex items-center justify-center">
|
||||
<div className="text-center space-y-6 max-w-md">
|
||||
<div className="text-center space-y-8 max-w-2xl mx-auto">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="mx-auto w-16 h-16 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center text-red-600 dark:text-red-400">
|
||||
<AlertTriangle className="w-8 h-8" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold">Icon not found</h1>
|
||||
<p className="text-muted-foreground">The icon you are looking for could not be found or there was an error loading it.</p>
|
||||
<p className="text-muted-foreground">If you believe this is an error, please contact the maintainers of the repository.</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
|
||||
<Button asChild>
|
||||
<h1 className="text-2xl sm:text-3xl font-bold mt-6">Icon not found</h1>
|
||||
<p className="text-muted-foreground mt-3 max-w-md">
|
||||
The icon you are looking for could not be found or there was an error loading it.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button asChild variant="outline">
|
||||
<Link href="/icons">
|
||||
<ArrowLeft className="mr-2 h-4 w-4" />
|
||||
Back to all icons
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-border pt-8 mt-8">
|
||||
<div className="text-center mb-6">
|
||||
<h2 className="text-xl font-semibold">Can't find what you're looking for?</h2>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Contribute to our icon collection by suggesting a new icon or improving an existing one.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<IconSubmissionContent />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
@ -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)
|
||||
}, [])
|
||||
|
||||
React.useEffect(() => {
|
||||
const down = (e: KeyboardEvent) => {
|
||||
if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
|
||||
e.preventDefault()
|
||||
setOpen((open) => !open)
|
||||
// Wrap setIsOpen in useCallback to fix dependency issue
|
||||
const setIsOpen = useCallback(
|
||||
(value: boolean) => {
|
||||
if (externalOnOpenChange) {
|
||||
externalOnOpenChange(value)
|
||||
} else {
|
||||
setInternalOpen(value)
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("keydown", down)
|
||||
return () => document.removeEventListener("keydown", down)
|
||||
}, [])
|
||||
|
||||
// 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)
|
||||
}
|
||||
|
||||
triggerButton.addEventListener("click", handleClick)
|
||||
return () => triggerButton.removeEventListener("click", handleClick)
|
||||
}, [triggerButtonId, mounted])
|
||||
|
||||
const handleInputChange = React.useCallback((value: string) => {
|
||||
setInputValue(value)
|
||||
}, [])
|
||||
|
||||
const handleSelectIcon = React.useCallback(
|
||||
(iconName: string) => {
|
||||
router.push(`/icons/${iconName}`)
|
||||
setOpen(false)
|
||||
},
|
||||
[router],
|
||||
[externalOnOpenChange],
|
||||
)
|
||||
|
||||
if (!mounted) return null
|
||||
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()
|
||||
setIsOpen(!isOpen)
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("keydown", handleKeyDown)
|
||||
return () => document.removeEventListener("keydown", handleKeyDown)
|
||||
}, [isOpen, setIsOpen])
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
// 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
|
||||
|
||||
// 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
|
||||
|
||||
// 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
|
||||
|
||||
// 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" />
|
||||
<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>
|
||||
<span className="capitalize">{icon.replace(/-/g, " ")}</span>
|
||||
</Link>
|
||||
)}
|
||||
</CommandItem>
|
||||
))}
|
||||
)
|
||||
})}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</CommandDialog>
|
||||
)
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { ClientHeader } from "./client-header"
|
||||
import { Header } from "./header"
|
||||
|
||||
export function HeaderWrapper() {
|
||||
return <ClientHeader />
|
||||
return <Header />
|
||||
}
|
||||
|
||||
@ -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"
|
||||
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" />
|
||||
<span>Search</span>
|
||||
<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>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Search icons</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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}`}>
|
||||
<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" />
|
||||
</a>
|
||||
</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>
|
||||
|
||||
@ -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
|
||||
<PlusCircle className="h-4 w-4 transition-all duration-300" /> Contribute new icon
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Suggest a new icon</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
<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)} />
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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 (
|
||||
@ -85,7 +85,7 @@ export function RecentlyAddedIcons({ icons }: { icons: IconWithName[] }) {
|
||||
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>
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
25
web/src/hooks/use-media-query.ts
Normal file
25
web/src/hooks/use-media-query.ts
Normal file
@ -0,0 +1,25 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
|
||||
export function useMediaQuery(query: string): boolean {
|
||||
const [matches, setMatches] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
const media = window.matchMedia(query)
|
||||
|
||||
// Initial check
|
||||
if (media.matches !== matches) {
|
||||
setMatches(media.matches)
|
||||
}
|
||||
|
||||
// Setup listener for changes
|
||||
const listener = () => setMatches(media.matches)
|
||||
media.addEventListener("change", listener)
|
||||
|
||||
// Cleanup
|
||||
return () => media.removeEventListener("change", listener)
|
||||
}, [query, matches])
|
||||
|
||||
return matches
|
||||
}
|
||||
@ -1,26 +1,58 @@
|
||||
import { METADATA_URL } from "@/constants"
|
||||
import type { IconFile, IconWithName } from "@/types/icons"
|
||||
|
||||
/**
|
||||
* Custom error class for API errors
|
||||
*/
|
||||
export class ApiError extends Error {
|
||||
status: number
|
||||
|
||||
constructor(message: string, status = 500) {
|
||||
super(message)
|
||||
this.name = "ApiError"
|
||||
this.status = status
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches all icon data from the metadata.json file
|
||||
*/
|
||||
|
||||
export async function getAllIcons(): Promise<IconFile> {
|
||||
const file = await fetch(METADATA_URL)
|
||||
return (await file.json()) as IconFile
|
||||
try {
|
||||
const response = await fetch(METADATA_URL)
|
||||
|
||||
if (!response.ok) {
|
||||
throw new ApiError(`Failed to fetch icons: ${response.statusText}`, response.status)
|
||||
}
|
||||
|
||||
return (await response.json()) as IconFile
|
||||
} catch (error) {
|
||||
if (error instanceof ApiError) {
|
||||
throw error
|
||||
}
|
||||
console.error("Error fetching icons:", error)
|
||||
throw new ApiError("Failed to fetch icons data. Please try again later.")
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets a list of all icon names.
|
||||
*/
|
||||
export const getIconNames = async (): Promise<string[]> => {
|
||||
try {
|
||||
const iconsData = await getAllIcons()
|
||||
return Object.keys(iconsData)
|
||||
} catch (error) {
|
||||
console.error("Error getting icon names:", error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts icon data to an array format for easier rendering
|
||||
*/
|
||||
export async function getIconsArray(): Promise<IconWithName[]> {
|
||||
try {
|
||||
const iconsData = await getAllIcons()
|
||||
|
||||
return Object.entries(iconsData)
|
||||
@ -29,29 +61,42 @@ export async function getIconsArray(): Promise<IconWithName[]> {
|
||||
data,
|
||||
}))
|
||||
.sort((a, b) => a.name.localeCompare(b.name))
|
||||
} catch (error) {
|
||||
console.error("Error getting icons array:", error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches data for a specific icon
|
||||
*/
|
||||
export async function getIconData(iconName: string): Promise<IconWithName | null> {
|
||||
try {
|
||||
const iconsData = await getAllIcons()
|
||||
const iconData = iconsData[iconName]
|
||||
|
||||
if (!iconData) {
|
||||
return null
|
||||
throw new ApiError(`Icon '${iconName}' not found`, 404)
|
||||
}
|
||||
|
||||
return {
|
||||
name: iconName,
|
||||
data: iconData,
|
||||
}
|
||||
} catch (error) {
|
||||
if (error instanceof ApiError && error.status === 404) {
|
||||
return null
|
||||
}
|
||||
console.error("Error getting icon data:", error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches author data from GitHub API
|
||||
*/
|
||||
export async function getAuthorData(authorId: number) {
|
||||
try {
|
||||
const response = await fetch(`https://api.github.com/user/${authorId}`, {
|
||||
headers: {
|
||||
Authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
|
||||
@ -59,24 +104,57 @@ export async function getAuthorData(authorId: number) {
|
||||
},
|
||||
next: { revalidate: 86400 }, // Revalidate cache once a day
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
// If unauthorized or other error, return a default user object
|
||||
if (response.status === 401 || response.status === 403) {
|
||||
console.warn(`GitHub API rate limit or authorization issue: ${response.statusText}`)
|
||||
return {
|
||||
login: "unknown",
|
||||
avatar_url: "https://avatars.githubusercontent.com/u/0",
|
||||
html_url: "https://github.com",
|
||||
name: "Unknown User",
|
||||
bio: null,
|
||||
}
|
||||
}
|
||||
throw new ApiError(`Failed to fetch author data: ${response.statusText}`, response.status)
|
||||
}
|
||||
|
||||
return response.json()
|
||||
} catch (error) {
|
||||
console.error("Error fetching author data:", error)
|
||||
// Even for unexpected errors, return a default user to prevent page failures
|
||||
return {
|
||||
login: "unknown",
|
||||
avatar_url: "https://avatars.githubusercontent.com/u/0",
|
||||
html_url: "https://github.com",
|
||||
name: "Unknown User",
|
||||
bio: null,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches featured icons for the homepage
|
||||
* Fetches total icon count
|
||||
*/
|
||||
export async function getTotalIcons() {
|
||||
try {
|
||||
const iconsData = await getAllIcons()
|
||||
|
||||
return {
|
||||
totalIcons: Object.keys(iconsData).length,
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error getting total icons:", error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetches recently added icons sorted by timestamp
|
||||
*/
|
||||
export async function getRecentlyAddedIcons(limit = 8): Promise<IconWithName[]> {
|
||||
try {
|
||||
const icons = await getIconsArray()
|
||||
|
||||
return icons
|
||||
@ -85,4 +163,8 @@ export async function getRecentlyAddedIcons(limit = 8): Promise<IconWithName[]>
|
||||
return new Date(b.data.update.timestamp).getTime() - new Date(a.data.update.timestamp).getTime()
|
||||
})
|
||||
.slice(0, limit)
|
||||
} catch (error) {
|
||||
console.error("Error getting recently added icons:", error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,3 +4,122 @@ import { twMerge } from "tailwind-merge"
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate Levenshtein distance between two strings
|
||||
*/
|
||||
export function levenshteinDistance(a: string, b: string): number {
|
||||
const matrix: number[][] = []
|
||||
|
||||
// Initialize the matrix
|
||||
for (let i = 0; i <= b.length; i++) {
|
||||
matrix[i] = [i]
|
||||
}
|
||||
for (let j = 0; j <= a.length; j++) {
|
||||
matrix[0][j] = j
|
||||
}
|
||||
|
||||
// Fill the matrix
|
||||
for (let i = 1; i <= b.length; i++) {
|
||||
for (let j = 1; j <= a.length; j++) {
|
||||
const cost = a[j - 1] === b[i - 1] ? 0 : 1
|
||||
matrix[i][j] = Math.min(
|
||||
matrix[i - 1][j] + 1, // deletion
|
||||
matrix[i][j - 1] + 1, // insertion
|
||||
matrix[i - 1][j - 1] + cost, // substitution
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
return matrix[b.length][a.length]
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate similarity score between two strings (0-1)
|
||||
* Higher score means more similar
|
||||
*/
|
||||
export function calculateStringSimilarity(str1: string, str2: string): number {
|
||||
if (!str1.length || !str2.length) return 0
|
||||
if (str1 === str2) return 1
|
||||
|
||||
const distance = levenshteinDistance(str1.toLowerCase(), str2.toLowerCase())
|
||||
const maxLength = Math.max(str1.length, str2.length)
|
||||
return 1 - distance / maxLength
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if string contains all characters from query in order
|
||||
* Returns match score (0 if no match)
|
||||
*/
|
||||
export function containsCharsInOrder(str: string, query: string): number {
|
||||
if (!query) return 1
|
||||
if (!str) return 0
|
||||
|
||||
const normalizedStr = str.toLowerCase()
|
||||
const normalizedQuery = query.toLowerCase()
|
||||
|
||||
let strIndex = 0
|
||||
let queryIndex = 0
|
||||
|
||||
while (strIndex < normalizedStr.length && queryIndex < normalizedQuery.length) {
|
||||
if (normalizedStr[strIndex] === normalizedQuery[queryIndex]) {
|
||||
queryIndex++
|
||||
}
|
||||
strIndex++
|
||||
}
|
||||
|
||||
// If we matched all characters in the query
|
||||
if (queryIndex === normalizedQuery.length) {
|
||||
// Calculate a score based on closeness of matches
|
||||
// Higher score if characters are close together
|
||||
const matchRatio = normalizedStr.length / (strIndex + 1)
|
||||
return matchRatio
|
||||
}
|
||||
|
||||
return 0
|
||||
}
|
||||
|
||||
/**
|
||||
* Advanced fuzzy search with multiple scoring methods
|
||||
* Returns a score from 0-1, where 1 is a perfect match
|
||||
*/
|
||||
export function fuzzySearch(text: string, query: string): number {
|
||||
if (!query) return 1
|
||||
if (!text) return 0
|
||||
|
||||
// Direct inclusion check (highest priority)
|
||||
const normalizedText = text.toLowerCase()
|
||||
const normalizedQuery = query.toLowerCase()
|
||||
|
||||
if (normalizedText === normalizedQuery) return 1
|
||||
if (normalizedText.includes(normalizedQuery)) return 0.9
|
||||
|
||||
// Check for character sequence matches
|
||||
const sequenceScore = containsCharsInOrder(normalizedText, normalizedQuery)
|
||||
|
||||
// Calculate string similarity
|
||||
const similarityScore = calculateStringSimilarity(normalizedText, normalizedQuery)
|
||||
|
||||
// Word-by-word matching for multi-word queries
|
||||
const textWords = normalizedText.split(/\s+/)
|
||||
const queryWords = normalizedQuery.split(/\s+/)
|
||||
|
||||
let wordMatchCount = 0
|
||||
for (const queryWord of queryWords) {
|
||||
for (const textWord of textWords) {
|
||||
if (
|
||||
textWord.includes(queryWord) ||
|
||||
calculateStringSimilarity(textWord, queryWord) > 0.7 ||
|
||||
containsCharsInOrder(textWord, queryWord) > 0
|
||||
) {
|
||||
wordMatchCount++
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const wordMatchScore = queryWords.length > 0 ? wordMatchCount / queryWords.length : 0
|
||||
|
||||
// Combine scores with weights
|
||||
return Math.max(sequenceScore * 0.3, similarityScore * 0.3, wordMatchScore * 0.4)
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user