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

Add background (it looks nice)

Browse Source
This commit is contained in:
Thomas Camlong
2025-04-17 18:03:13 +02:00
parent 1a18a1de01
commit b63e8f549a
5 changed files with 34 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
import { IconDetails } from "@/components/icon-details"
import { BASE_URL } from "@/constants"
import { getAllIcons, getAuthorData, getTotalIcons } from "@/lib/api"
import { getAllIcons, getAuthorData } from "@/lib/api"
import type { Metadata, ResolvingMetadata } from "next"
import { notFound } from "next/navigation"
@@ -42,7 +42,7 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
return {
title: `${formattedIconName} Icon | Dashboard Icons`,
description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
keywords: [
`${formattedIconName} icon`,
"dashboard icon",
@@ -64,7 +64,7 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
],
openGraph: {
title: `${formattedIconName} Icon | Dashboard Icons`,
description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
type: "article",
url: pageUrl,
images: [
@@ -83,7 +83,7 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
twitter: {
card: "summary_large_image",
title: `${formattedIconName} Icon | Dashboard Icons`,
description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
images: [iconImageUrl],
creator: "@homarr_app",
},
@@ -104,10 +104,5 @@ export default async function IconPage({ params }: { params: Promise<{ icon: str
const authorData = await getAuthorData(originalIconData.update.author.id)
return (
<div className="relative isolate overflow-hidden pt-14">
{/* Existing Icon Details */}
<IconDetails icon={icon} iconData={originalIconData} authorData={authorData} />
</div>
)
return <IconDetails icon={icon} iconData={originalIconData} authorData={authorData} />
}

23
web/src/app/icons/layout.tsx Normal file
View File

@@ -0,0 +1,23 @@
import { cn } from "@/lib/utils"
import React from "react"
interface BackgroundWrapperProps {
children: React.ReactNode
}
export default function BackgroundWrapper({ children }: BackgroundWrapperProps) {
return (
<div className="relative flex w-full items-center justify-center bg-white dark:bg-black">
<div
className={cn(
"absolute inset-0",
"[background-size:40px_40px]",
"[background-image:linear-gradient(to_right,#e4e4e7_1px,transparent_1px),linear-gradient(to_bottom,#e4e4e7_1px,transparent_1px)]",
"dark:[background-image:linear-gradient(to_right,#262626_1px,transparent_1px),linear-gradient(to_bottom,#262626_1px,transparent_1px)]",
)}
/>
<div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-background [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-background" />
<div className="relative z-20">{children}</div>
</div>
)
}