mirror/dashboard-icons
1
0
Fork 0
mirror of https://github.com/walkxcode/dashboard-icons.git synced 2025-11-09 04:58:57 +01:00
Code Issues Packages Projects Releases Wiki Activity

Format codebase

Browse Source
This commit is contained in:
Thomas Camlong
2025-04-17 15:12:28 +02:00
parent 5be07bbfb8
commit 16d6e34c3f
15 changed files with 743 additions and 1001 deletions
Download Patch File Download Diff File Expand all files Collapse all files

281
web/src/app/globals.css
View File

@@ -5,56 +5,56 @@
@custom-variant dark (&:is(.dark *));
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--font-sans: var(--font-sans);
--font-mono: var(--font-mono);
--font-serif: var(--font-serif);
--font-sans: var(--font-sans);
--font-mono: var(--font-mono);
--font-serif: var(--font-serif);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--shadow-2xs: var(--shadow-2xs);
--shadow-xs: var(--shadow-xs);
--shadow-sm: var(--shadow-sm);
--shadow: var(--shadow);
--shadow-md: var(--shadow-md);
--shadow-lg: var(--shadow-lg);
--shadow-xl: var(--shadow-xl);
--shadow-2xl: var(--shadow-2xl);
--shadow-2xs: var(--shadow-2xs);
--shadow-xs: var(--shadow-xs);
--shadow-sm: var(--shadow-sm);
--shadow: var(--shadow);
--shadow-md: var(--shadow-md);
--shadow-lg: var(--shadow-lg);
--shadow-xl: var(--shadow-xl);
--shadow-2xl: var(--shadow-2xl);
--animate-marquee: marquee var(--duration) infinite linear;
--animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
@@ -79,71 +79,80 @@
}
@keyframes marquee {
from {
transform: translateX(0);}
to {
transform: translateX(calc(-100% - var(--gap)));}
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-100% - var(--gap)));
}
}
@keyframes marquee-vertical {
from {
transform: translateY(0);}
to {
transform: translateY(calc(-100% - var(--gap)));}
from {
transform: translateY(0);
}
to {
transform: translateY(calc(-100% - var(--gap)));
}
}
@keyframes aurora {
0% {
background-position: 0% 50%;
transform: rotate(-5deg) scale(0.9);
}
25% {
background-position: 50% 100%;
transform: rotate(5deg) scale(1.1);
}
50% {
background-position: 100% 50%;
transform: rotate(-3deg) scale(0.95);
}
75% {
background-position: 50% 0%;
transform: rotate(3deg) scale(1.05);
}
100% {
background-position: 0% 50%;
transform: rotate(-5deg) scale(0.9);
}
}
0% {
background-position: 0% 50%;
transform: rotate(-5deg) scale(0.9);
}
25% {
background-position: 50% 100%;
transform: rotate(5deg) scale(1.1);
}
50% {
background-position: 100% 50%;
transform: rotate(-3deg) scale(0.95);
}
75% {
background-position: 50% 0%;
transform: rotate(3deg) scale(1.05);
}
100% {
background-position: 0% 50%;
transform: rotate(-5deg) scale(0.9);
}
}
--animate-shiny-text: shiny-text 8s infinite
;
@keyframes shiny-text {
0%, 90%, 100% {
background-position: calc(-100% - var(--shiny-width)) 0;}
30%, 60% {
background-position: calc(100% + var(--shiny-width)) 0;}}}
--animate-shiny-text: shiny-text 8s infinite;
@keyframes shiny-text {
0%,
90%,
100% {
background-position: calc(-100% - var(--shiny-width)) 0;
}
30%,
60% {
background-position: calc(100% + var(--shiny-width)) 0;
}
}
}
:root {
--radius: 0.4rem;
--background: oklch(0.99 0 0);
--foreground: oklch(0.32 0 0);
--card: oklch(1.00 0 0);
--card-foreground: oklch(0.32 0 0);
--popover: oklch(1.00 0 0);
--popover-foreground: oklch(0.32 0 0);
--primary: oklch(0.67 0.20 23.80);
--primary-foreground: oklch(1.00 0 0);
--secondary: oklch(0.97 0.00 264.54);
--secondary-foreground: oklch(0.45 0.03 256.80);
--muted: oklch(0.98 0.00 247.84);
--muted-foreground: oklch(0.55 0.02 264.36);
--background: oklch(0.99 0 0);
--foreground: oklch(0.32 0 0);
--card: oklch(1.0 0 0);
--card-foreground: oklch(0.32 0 0);
--popover: oklch(1.0 0 0);
--popover-foreground: oklch(0.32 0 0);
--primary: oklch(0.67 0.2 23.8);
--primary-foreground: oklch(1.0 0 0);
--secondary: oklch(0.97 0.0 264.54);
--secondary-foreground: oklch(0.45 0.03 256.8);
--muted: oklch(0.98 0.0 247.84);
--muted-foreground: oklch(0.55 0.02 264.36);
--accent: oklch(0.967 0.001 286.375);
--accent-foreground: oklch(0.21 0.006 285.885);
--destructive: oklch(0.64 0.21 25.33);
--destructive-foreground: oklch(1.00 0 0);
--border: oklch(0.90 0.01 247.88);
--destructive: oklch(0.64 0.21 25.33);
--destructive-foreground: oklch(1.0 0 0);
--border: oklch(0.9 0.01 247.88);
--input: oklch(0.92 0.004 286.32);
@@ -162,33 +171,38 @@
--sidebar-ring: oklch(0.637 0.237 25.331);
--shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
--shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
--shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
--shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
--shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
--shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
--shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 1px 2px -1px
hsl(0 0% 0% / 0.1);
--shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 1px 2px -1px
hsl(0 0% 0% / 0.1);
--shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 2px 4px -1px
hsl(0 0% 0% / 0.1);
--shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 4px 6px -1px
hsl(0 0% 0% / 0.1);
--shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 8px 10px -1px
hsl(0 0% 0% / 0.1);
--shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
}
.dark {
--background: oklch(.141 .005 285.823);
--foreground: oklch(0.92 0 0);
--card: oklch(0.31 0.03 268.64);
--card-foreground: oklch(0.92 0 0);
--popover: oklch(0.29 0.02 268.40);
--popover-foreground: oklch(0.92 0 0);
--primary: oklch(0.67 0.20 23.80);
--primary-foreground: oklch(1.00 0 0);
--secondary: oklch(0.31 0.03 266.71);
--secondary-foreground: oklch(0.92 0 0);
--muted: oklch(0.31 0.03 266.71);
--muted-foreground: oklch(0.72 0 0);
--accent: oklch(0.34 0.06 267.59);
--accent-foreground: oklch(0.88 0.06 254.13);
--destructive: oklch(0.64 0.21 25.33);
--destructive-foreground: oklch(1.00 0 0);
--border: oklch(0.38 0.03 269.73);
--background: oklch(0.141 0.005 285.823);
--foreground: oklch(0.92 0 0);
--card: oklch(0.31 0.03 268.64);
--card-foreground: oklch(0.92 0 0);
--popover: oklch(0.29 0.02 268.4);
--popover-foreground: oklch(0.92 0 0);
--primary: oklch(0.67 0.2 23.8);
--primary-foreground: oklch(1.0 0 0);
--secondary: oklch(0.31 0.03 266.71);
--secondary-foreground: oklch(0.92 0 0);
--muted: oklch(0.31 0.03 266.71);
--muted-foreground: oklch(0.72 0 0);
--accent: oklch(0.34 0.06 267.59);
--accent-foreground: oklch(0.88 0.06 254.13);
--destructive: oklch(0.64 0.21 25.33);
--destructive-foreground: oklch(1.0 0 0);
--border: oklch(0.38 0.03 269.73);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.637 0.237 25.331);
@@ -207,13 +221,18 @@
--sidebar-ring: oklch(0.637 0.237 25.331);
--shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
--shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
--shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
--shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
--shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
--shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
--shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 1px 2px -1px
hsl(0 0% 0% / 0.1);
--shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 1px 2px -1px
hsl(0 0% 0% / 0.1);
--shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 2px 4px -1px
hsl(0 0% 0% / 0.1);
--shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 4px 6px -1px
hsl(0 0% 0% / 0.1);
--shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.1), 0px 8px 10px -1px
hsl(0 0% 0% / 0.1);
--shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
}
@layer base {
@@ -241,4 +260,4 @@
.glass-effect {
@apply backdrop-blur-sm;
}
}
}

2
web/src/app/icons/[icon]/page.tsx
View File

@@ -74,7 +74,7 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
height: 512,
alt: `${formattedIconName} Icon`,
type: "image/png",
}
},
],
authors: [authorName, "homarr"],
publishedTime: updateDate.toISOString(),

338
web/src/app/icons/components/icon-search.tsx
View File

@@ -1,9 +1,9 @@
"use client";
"use client"
import { IconSubmissionContent } from "@/components/icon-submission-form";
import { MagicCard } from "@/components/magicui/magic-card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { IconSubmissionContent } from "@/components/icon-submission-form"
import { MagicCard } from "@/components/magicui/magic-card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import {
DropdownMenu,
DropdownMenuCheckboxItem,
@@ -14,242 +14,217 @@ import {
DropdownMenuRadioItem,
DropdownMenuSeparator,
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 { Icon, IconSearchProps } from "@/types/icons";
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, useMemo, useRef, useState } from "react";
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
import { BASE_URL } from "@/constants"
import type { Icon, IconSearchProps } from "@/types/icons"
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, useMemo, useRef, useState } from "react"
type SortOption =
| "relevance"
| "alphabetical-asc"
| "alphabetical-desc"
| "newest";
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 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()
// Extract all unique categories
const allCategories = useMemo(() => {
const categories = new Set<string>();
const categories = new Set<string>()
for (const icon of icons) {
for (const category of icon.data.categories) {
categories.add(category);
categories.add(category)
}
}
return Array.from(categories).sort();
}, [icons]);
return Array.from(categories).sort()
}, [icons])
// Simple filter function using substring matching
const filterIcons = useCallback(
(query: string, categories: string[], sort: SortOption) => {
// First filter by categories if any are selected
let filtered = icons;
let filtered = icons
if (categories.length > 0) {
filtered = filtered.filter(({ data }) =>
data.categories.some((cat) =>
categories.some(
(selectedCat) => cat.toLowerCase() === selectedCat.toLowerCase(),
),
),
);
data.categories.some((cat) => categories.some((selectedCat) => cat.toLowerCase() === selectedCat.toLowerCase())),
)
}
// Then filter by search query
if (query.trim()) {
const q = query.toLowerCase();
const q = query.toLowerCase()
filtered = filtered.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;
return false;
});
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
return false
})
}
// Apply sorting
if (sort === "alphabetical-asc") {
return filtered.sort((a, b) => a.name.localeCompare(b.name));
return filtered.sort((a, b) => a.name.localeCompare(b.name))
}
if (sort === "alphabetical-desc") {
return filtered.sort((a, b) => b.name.localeCompare(a.name));
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()
);
});
return new Date(b.data.update.timestamp).getTime() - new Date(a.data.update.timestamp).getTime()
})
}
// Default sort (relevance or fallback to alphabetical)
return filtered.sort((a, b) => a.name.localeCompare(b.name));
return filtered.sort((a, b) => a.name.localeCompare(b.name))
},
[icons],
);
)
// Find matched aliases for display purposes
const matchedAliases = useMemo(() => {
if (!searchQuery.trim()) return {};
if (!searchQuery.trim()) return {}
const q = searchQuery.toLowerCase();
const matches: Record<string, string> = {};
const q = searchQuery.toLowerCase()
const matches: Record<string, string> = {}
icons.forEach(({ name, data }) => {
for (const { name, data } of icons) {
// If name doesn't match but an alias does, store the first matching alias
if (!name.toLowerCase().includes(q)) {
const matchingAlias = data.aliases.find((alias) =>
alias.toLowerCase().includes(q)
);
const matchingAlias = data.aliases.find((alias) => alias.toLowerCase().includes(q))
if (matchingAlias) {
matches[name] = matchingAlias;
matches[name] = matchingAlias
}
}
});
}
return matches;
}, [icons, searchQuery]);
return matches
}, [icons, searchQuery])
// Use useMemo for filtered icons
const filteredIcons = useMemo(() => {
return filterIcons(searchQuery, selectedCategories, sortOption);
}, [filterIcons, searchQuery, selectedCategories, sortOption]);
return filterIcons(searchQuery, selectedCategories, sortOption)
}, [filterIcons, searchQuery, selectedCategories, sortOption])
const updateResults = useCallback(
(query: string, categories: string[], sort: SortOption) => {
const params = new URLSearchParams();
if (query) params.set("q", query);
const params = new URLSearchParams()
if (query) params.set("q", query)
// Clear existing category params and add new ones
for (const category of categories) {
params.append("category", category);
params.append("category", category)
}
// Add sort parameter if not default
if (sort !== "relevance" || initialSort !== "relevance") {
params.set("sort", sort);
params.set("sort", sort)
}
const newUrl = params.toString()
? `${pathname}?${params.toString()}`
: pathname;
router.push(newUrl, { scroll: false });
const newUrl = params.toString() ? `${pathname}?${params.toString()}` : pathname
router.push(newUrl, { scroll: false })
},
[pathname, router, initialSort],
);
)
const handleSearch = useCallback(
(query: string) => {
setSearchQuery(query);
setSearchQuery(query)
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
clearTimeout(timeoutRef.current)
}
timeoutRef.current = setTimeout(() => {
updateResults(query, selectedCategories, sortOption);
}, 200); // Changed from 100ms to 200ms
updateResults(query, selectedCategories, sortOption)
}, 200) // Changed from 100ms to 200ms
},
[updateResults, selectedCategories, sortOption],
);
)
const handleCategoryChange = useCallback(
(category: string) => {
let newCategories: string[];
let newCategories: string[]
if (selectedCategories.includes(category)) {
// Remove the category if it's already selected
newCategories = selectedCategories.filter((c) => c !== category);
newCategories = selectedCategories.filter((c) => c !== category)
} else {
// Add the category if it's not selected
newCategories = [...selectedCategories, category];
newCategories = [...selectedCategories, category]
}
setSelectedCategories(newCategories);
updateResults(searchQuery, newCategories, sortOption);
setSelectedCategories(newCategories)
updateResults(searchQuery, newCategories, sortOption)
},
[updateResults, searchQuery, selectedCategories, sortOption],
);
)
const handleSortChange = useCallback(
(sort: SortOption) => {
setSortOption(sort);
updateResults(searchQuery, selectedCategories, sort);
setSortOption(sort)
updateResults(searchQuery, selectedCategories, sort)
},
[updateResults, searchQuery, selectedCategories],
);
)
const clearFilters = useCallback(() => {
setSearchQuery("");
setSelectedCategories([]);
setSortOption("relevance");
updateResults("", [], "relevance");
}, [updateResults]);
setSearchQuery("")
setSelectedCategories([])
setSortOption("relevance")
updateResults("", [], "relevance")
}, [updateResults])
useEffect(() => {
return () => {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
clearTimeout(timeoutRef.current)
}
};
}, []);
}
}, [])
if (!searchParams) return null;
if (!searchParams) return null
const getSortLabel = (sort: SortOption) => {
switch (sort) {
case "relevance":
return "Best match";
return "Best match"
case "alphabetical-asc":
return "A to Z";
return "A to Z"
case "alphabetical-desc":
return "Z to A";
return "Z to A"
case "newest":
return "Newest first";
return "Newest first"
default:
return "Sort";
return "Sort"
}
};
}
const getSortIcon = (sort: SortOption) => {
switch (sort) {
case "relevance":
return <Search className="h-4 w-4" />;
return <Search className="h-4 w-4" />
case "alphabetical-asc":
return <ArrowDownAZ className="h-4 w-4" />;
return <ArrowDownAZ className="h-4 w-4" />
case "alphabetical-desc":
return <ArrowUpZA className="h-4 w-4" />;
return <ArrowUpZA className="h-4 w-4" />
case "newest":
return <Calendar className="h-4 w-4" />;
return <Calendar className="h-4 w-4" />
default:
return <SortAsc className="h-4 w-4" />;
return <SortAsc className="h-4 w-4" />
}
};
}
return (
<>
@@ -273,11 +248,7 @@ export function IconSearch({ icons }: IconSearchProps) {
{/* Filter dropdown */}
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="outline"
size="sm"
className="flex-1 sm:flex-none cursor-pointer border-border shadow-sm0/10 "
>
<Button variant="outline" size="sm" className="flex-1 sm:flex-none cursor-pointer border-border shadow-sm0/10 ">
<Filter className="h-4 w-4 mr-2" />
<span>Filter</span>
{selectedCategories.length > 0 && (
@@ -288,9 +259,7 @@ export function IconSearch({ icons }: IconSearchProps) {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="w-64 sm:w-56">
<DropdownMenuLabel className="font-semibold">
Categories
</DropdownMenuLabel>
<DropdownMenuLabel className="font-semibold">Categories</DropdownMenuLabel>
<DropdownMenuSeparator />
<div className="max-h-[40vh] overflow-y-auto p-1">
@@ -301,9 +270,7 @@ export function IconSearch({ icons }: IconSearchProps) {
onCheckedChange={() => handleCategoryChange(category)}
className="cursor-pointer capitalize"
>
{category
.replace(/-/g, " ")
.replace(/\b\w/g, (c) => c.toUpperCase())}
{category.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())}
</DropdownMenuCheckboxItem>
))}
</div>
@@ -313,8 +280,8 @@ export function IconSearch({ icons }: IconSearchProps) {
<DropdownMenuSeparator />
<DropdownMenuItem
onClick={() => {
setSelectedCategories([]);
updateResults(searchQuery, [], sortOption);
setSelectedCategories([])
updateResults(searchQuery, [], sortOption)
}}
className="cursor-pointer focus: focus:bg-rose-50 dark:focus:bg-rose-950/20"
>
@@ -338,37 +305,20 @@ export function IconSearch({ icons }: IconSearchProps) {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="w-56">
<DropdownMenuLabel className="font-semibold">
Sort By
</DropdownMenuLabel>
<DropdownMenuLabel className="font-semibold">Sort By</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup
value={sortOption}
onValueChange={(value) => handleSortChange(value as SortOption)}
>
<DropdownMenuRadioItem
value="relevance"
className="cursor-pointer"
>
<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"
>
<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"
>
<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"
>
<DropdownMenuRadioItem value="newest" className="cursor-pointer">
<Calendar className="h-4 w-4 mr-2" />
Newest first
</DropdownMenuRadioItem>
@@ -377,15 +327,8 @@ export function IconSearch({ icons }: IconSearchProps) {
</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 border-rose-500/20"
>
{(searchQuery || selectedCategories.length > 0 || sortOption !== "relevance") && (
<Button variant="outline" size="sm" onClick={clearFilters} className="flex-1 sm:flex-none cursor-pointer border-rose-500/20">
<X className="h-4 w-4 mr-2" />
<span>Clear all</span>
</Button>
@@ -398,14 +341,8 @@ export function IconSearch({ icons }: IconSearchProps) {
<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"
>
{category
.replace(/-/g, " ")
.replace(/\b\w/g, (c) => c.toUpperCase())}
<Badge key={category} variant="secondary" className="flex items-center gap-1 pl-2 pr-1">
{category.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase())}
<Button
variant="ghost"
size="sm"
@@ -422,8 +359,8 @@ export function IconSearch({ icons }: IconSearchProps) {
variant="ghost"
size="sm"
onClick={() => {
setSelectedCategories([]);
updateResults(searchQuery, [], sortOption);
setSelectedCategories([])
updateResults(searchQuery, [], sortOption)
}}
className="text-xs h-7 px-2 0/10 cursor-pointer"
>
@@ -438,9 +375,7 @@ export function IconSearch({ icons }: IconSearchProps) {
{filteredIcons.length === 0 ? (
<div className="flex flex-col gap-8 py-12 max-w-2xl mx-auto">
<div className="text-center">
<h2 className="text-3xl sm: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.`
@@ -467,18 +402,13 @@ export function IconSearch({ icons }: IconSearchProps) {
</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}
matchedAlias={matchedAliases[name] || null}
/>
<IconCard key={name} name={name} data={data} matchedAlias={matchedAliases[name] || null} />
))}
</div>
</>
)}
</>
);
)
}
function IconCard({
@@ -486,16 +416,16 @@ function IconCard({
data: iconData,
matchedAlias,
}: {
name: string;
data: Icon;
matchedAlias?: string | null;
name: string
data: Icon
matchedAlias?: string | null
}) {
const ref = useRef(null);
const ref = useRef(null)
const isInView = useInView(ref, {
once: false,
amount: 0.2,
margin: "100px 0px",
});
})
const variants = {
hidden: { opacity: 0, y: 20, scale: 0.95 },
@@ -511,15 +441,11 @@ function IconCard({
scale: 0.98,
transition: { duration: 0.3, ease: [0.25, 0.1, 0.25, 1.0] },
},
};
}
return (
<MagicCard className="rounded-md shadow-md">
<Link
prefetch={false}
href={`/icons/${name}`}
className="group flex flex-col items-center p-3 sm:p-4 cursor-pointer"
>
<Link prefetch={false} href={`/icons/${name}`} className="group flex flex-col items-center p-3 sm:p-4 cursor-pointer">
<div className="relative h-12 w-12 sm:h-16 sm:w-16 mb-2">
<Image
src={`${BASE_URL}/${iconData.base}/${name}.${iconData.base}`}
@@ -532,12 +458,8 @@ function IconCard({
{name.replace(/-/g, " ")}
</span>
{matchedAlias && (
<span className="text-[10px] text-center truncate w-full mt-1">
Alias: {matchedAlias}
</span>
)}
{matchedAlias && <span className="text-[10px] text-center truncate w-full mt-1">Alias: {matchedAlias}</span>}
</Link>
</MagicCard>
);
)
}