mirror of
https://github.com/walkxcode/dashboard-icons.git
synced 2025-10-31 16:57:58 +01:00
Add background (it looks nice)
This commit is contained in:
Thomas Camlong
@@ -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
23
web/src/app/icons/layout.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
@@ -2,11 +2,11 @@ import { PostHogProvider } from "@/components/PostHogProvider"
|
||||
import { Footer } from "@/components/footer"
|
||||
import { HeaderWrapper } from "@/components/header-wrapper"
|
||||
import { LicenseNotice } from "@/components/license-notice"
|
||||
import { getTotalIcons } from "@/lib/api"
|
||||
import type { Metadata, Viewport } from "next"
|
||||
import { Inter } from "next/font/google"
|
||||
import { Toaster } from "sonner"
|
||||
import "./globals.css"
|
||||
import { getTotalIcons } from "@/lib/api"
|
||||
import { ThemeProvider } from "./theme-provider"
|
||||
|
||||
const inter = Inter({
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { HeroSection } from "@/components/hero"
|
||||
import { RecentlyAddedIcons } from "@/components/recently-added-icons"
|
||||
import { BASE_URL, REPO_NAME, REPO_PATH } from "@/constants"
|
||||
import { BASE_URL, REPO_NAME } from "@/constants"
|
||||
import { getRecentlyAddedIcons, getTotalIcons } from "@/lib/api"
|
||||
import type { Metadata } from "next"
|
||||
|
||||
|
||||
@@ -251,11 +251,11 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="container mx-auto pt-12 pb-14">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
||||
{/* Left Column: Icon Info and Author */}
|
||||
<div className="lg:col-span-1">
|
||||
<Card className="h-full backdrop-blur-sm bg-card/50 border shadow-lg">
|
||||
<Card className="h-full bg-background/80 border shadow-lg">
|
||||
<CardHeader className="pb-4">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="relative w-32 h-32 rounded-xl overflow-hidden border flex items-center justify-center p-3 ">
|
||||
@@ -364,7 +364,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
||||
|
||||
{/* Middle Column: Icon variants */}
|
||||
<div className="lg:col-span-2">
|
||||
<Card className="h-full backdrop-blur-sm bg-card/50 shadow-lg">
|
||||
<Card className="h-full bg-background/80 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle>Icon variants</CardTitle>
|
||||
<CardDescription>Click on any icon to copy its URL to your clipboard</CardDescription>
|
||||
@@ -402,7 +402,7 @@ export function IconDetails({ icon, iconData, authorData }: IconDetailsProps) {
|
||||
|
||||
{/* Right Column: Technical details */}
|
||||
<div className="lg:col-span-1">
|
||||
<Card className="h-full backdrop-blur-sm bg-card/50 border shadow-lg">
|
||||
<Card className="h-full bg-background/80 border shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle>Technical details</CardTitle>
|
||||
</CardHeader>
|
||||
|
||||
Reference in New Issue
Block a user