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

Add more SEO

Browse Source
This commit is contained in:
Thomas Camlong 2025-04-17 17:27:06 +02:00
parent e5414be19f
commit 4af84b39b7
No known key found for this signature in database
GPG Key ID: A678F374F428457B
1 changed files with 39 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,6 +15,7 @@ import { useCallback, useState } from "react"
import { toast } from "sonner" import { toast } from "sonner"
import { Carbon } from "./carbon" import { Carbon } from "./carbon"
import { MagicCard } from "./magicui/magic-card" import { MagicCard } from "./magicui/magic-card"
import { Badge } from "./ui/badge"
export type IconDetailsProps = { export type IconDetailsProps = {
icon: string icon: string
@ -270,8 +271,8 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
</div> </div>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="space-y-6"> <div className="space-y-4">
<div className="space-y-3"> <div>
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<p className="text-sm"> <p className="text-sm">
@ -303,19 +304,17 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
</div> </div>
{iconData.categories && iconData.categories.length > 0 && ( {iconData.categories && iconData.categories.length > 0 && (
<div className="space-y-3"> <div>
<h3 className="text-sm font-semibold text-muted-foreground">Categories</h3> <h3 className="text-sm font-semibold text-muted-foreground">Categories</h3>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{iconData.categories.map((category) => ( {iconData.categories.map((category) => (
<Link <Link key={category} href={`/icons?category=${encodeURIComponent(category)}`} className="cursor-pointer">
key={category} <Badge variant="outline" className="inline-flex items-center border border-primary/20 hover:border-primary px-2.5 py-0.5 text-sm">
href={`/icons?category=${encodeURIComponent(category)}`} {category
className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold0/10 transition-colors cursor-pointer" .split("-")
> .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
{category .join(" ")}
.split("-") </Badge>
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
.join(" ")}
</Link> </Link>
))} ))}
</div> </div>
@ -323,22 +322,41 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
)} )}
{iconData.aliases && iconData.aliases.length > 0 && ( {iconData.aliases && iconData.aliases.length > 0 && (
<div className="space-y-3"> <div>
<h3 className="text-sm font-semibold text-muted-foreground">Aliases</h3> <h3 className="text-sm font-semibold text-muted-foreground">Aliases</h3>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{iconData.aliases.map((alias) => ( {iconData.aliases.map((alias) => (
<span <Badge
variant="outline"
key={alias} key={alias}
className="inline-flex items-center rounded-full bg-rose-50 dark:bg-rose-950/20 border px-2.5 py-1 text-xs text-rose-700 dark:text-rose-300" className="inline-flex items-center px-2.5 py-1 text-xs"
title={`This icon can also be found by searching for "${alias}"`} title={`This icon can also be found by searching for "${alias}"`}
> >
{alias} {alias}
</span> </Badge>
))} ))}
</div> </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>
)} )}
<div>
<h3 className="text-sm font-semibold text-muted-foreground">About this icon</h3>
<div className="text-xs text-muted-foreground space-y-2">
<p>This icon is licensed under the open source MIT license</p>
<p>
Available in{" "}
{availableFormats.length > 1
? `${availableFormats.length} formats (${availableFormats.map((f) => f.toUpperCase()).join(", ")})`
: `${availableFormats[0].toUpperCase()} format`}{" "}
with a base format of {iconData.base.toUpperCase()}.
{iconData.colors && " Includes both light and dark theme variants for better integration with different UI designs."}
</p>
<p>
Use the {icon} icon in your web applications, dashboards, or documentation to enhance visual communication and user
experience.
</p>
</div>
</div>
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
@ -390,7 +408,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<div className="space-y-6"> <div className="space-y-6">
<div className="space-y-3"> <div className="">
<h3 className="text-sm font-semibold text-muted-foreground">Base format</h3> <h3 className="text-sm font-semibold text-muted-foreground">Base format</h3>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<FileType className="w-4 h-4 text-blue-500" /> <FileType className="w-4 h-4 text-blue-500" />
@ -398,7 +416,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
</div> </div>
</div> </div>
<div className="space-y-3"> <div className="">
<h3 className="text-sm font-semibold text-muted-foreground">Available formats</h3> <h3 className="text-sm font-semibold text-muted-foreground">Available formats</h3>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{availableFormats.map((format) => ( {availableFormats.map((format) => (
@ -410,7 +428,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
</div> </div>
{iconData.colors && ( {iconData.colors && (
<div className="space-y-3"> <div className="">
<h3 className="text-sm font-semibold text-muted-foreground">Color variants</h3> <h3 className="text-sm font-semibold text-muted-foreground">Color variants</h3>
<div className="space-y-2"> <div className="space-y-2">
{Object.entries(iconData.colors).map(([theme, variant]) => ( {Object.entries(iconData.colors).map(([theme, variant]) => (
@ -424,7 +442,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
</div> </div>
)} )}
<div className="space-y-3"> <div className="">
<h3 className="text-sm font-semibold text-muted-foreground">Source</h3> <h3 className="text-sm font-semibold text-muted-foreground">Source</h3>
<Button variant="outline" className="w-full" asChild> <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">