feat(icons/[id]): Refine related icons relevance, display limits, and styling

web/src/components/icon-details.tsx

@@ -10,7 +10,7 @@ import { formatIconName } from "@/lib/utils"
 import type { AuthorData, Icon, IconFile } 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 { Check, Copy, Download, FileType, Github, Moon, PaletteIcon, Sun, ArrowRight } from "lucide-react"
 import dynamic from "next/dynamic"
 import Image from "next/image"
 import Link from "next/link"
@@ -479,31 +479,57 @@ export function IconDetails({ icon, iconData, authorData, allIcons }: IconDetail
 					</Card>
 				</div>
 			</div>
-			{iconData.categories && iconData.categories.length > 0 && (
+			{iconData.categories && iconData.categories.length > 0 && (() => {
-				<section className="container mx-auto mt-12" aria-labelledby="related-icons-title">
+				const MAX_RELATED_ICONS = 16
-					<Card className="bg-background/50 border shadow-lg">
+				const currentCategories = iconData.categories || []
-						<CardHeader>
+
-							<CardTitle>
+				const relatedIconsWithScore = Object.entries(allIcons)
-								<h2 id="related-icons-title">Related Icons</h2>
+					.map(([name, data]) => {
-							</CardTitle>
+						if (name === icon) return null // Exclude the current icon
-							<CardDescription>
+
-								Other icons from {iconData.categories.map((cat) => cat.replace(/-/g, " ")).join(", ")} categories
+						const otherCategories = data.categories || []
-							</CardDescription>
+						const commonCategories = currentCategories.filter((cat) => otherCategories.includes(cat))
-						</CardHeader>
+						const score = commonCategories.length
-						<CardContent>
+
-							<IconsGrid
+						return score > 0 ? { name, data, score } : null
-								filteredIcons={Object.entries(allIcons)
+					})
-									.filter(([name, data]) => {
+					.filter((item): item is { name: string; data: Icon; score: number } => item !== null) // Type guard
-										if (name === icon) return false
+					.sort((a, b) => b.score - a.score) // Sort by score DESC
-										return data.categories?.some((cat) => iconData.categories?.includes(cat))
+
-									})
+				const topRelatedIcons = relatedIconsWithScore.slice(0, MAX_RELATED_ICONS)
-									.map(([name, data]) => ({ name, data }))}
+
-								matchedAliases={{}}
+				const viewMoreUrl = `/icons?${currentCategories.map((cat) => `category=${encodeURIComponent(cat)}`).join("&")}`
-							/>
+
-						</CardContent>
+				if (topRelatedIcons.length === 0) return null
-					</Card>
+
-				</section>
+				return (
-			)}
+					<section className="container mx-auto mt-12" aria-labelledby="related-icons-title">
+						<Card className="bg-background/50 border shadow-lg">
+							<CardHeader>
+								<CardTitle>
+									<h2 id="related-icons-title">Related Icons</h2>
+								</CardTitle>
+								<CardDescription>
+									Other icons from {currentCategories.map((cat) => cat.replace(/-/g, " ")).join(", ")} categories
+								</CardDescription>
+							</CardHeader>
+							<CardContent>
+								<IconsGrid filteredIcons={topRelatedIcons} matchedAliases={{}} />
+								{relatedIconsWithScore.length > MAX_RELATED_ICONS && (
+									<div className="mt-6 text-center">
+										<Button asChild variant="link" className="text-muted-foreground hover:text-primary transition-colors duration-200 hover:no-underline">
+											<Link href={viewMoreUrl} className="no-underline">
+												View all related icons
+												<ArrowRight className="ml-2 h-4 w-4" />
+											</Link>
+										</Button>
+									</div>
+								)}
+							</CardContent>
+						</Card>
+					</section>
+				)
+			})()}
 		</main>
 	)
 }