chore: format web codebase

web/src/app/icons/[icon]/opengraph-image.tsx

@@ -1,7 +1,7 @@
-import { getAllIcons } from "@/lib/api"
-import { ImageResponse } from "next/og"
 import { readFile } from "node:fs/promises"
 import { join } from "node:path"
+import { getAllIcons } from "@/lib/api"
+import { ImageResponse } from "next/og"
 
 export const dynamic = "force-static"
 

web/src/app/icons/[icon]/page.tsx

@@ -1,49 +1,44 @@
-import { IconDetails } from "@/components/icon-details";
+import { IconDetails } from "@/components/icon-details"
-import { BASE_URL, WEB_URL } from "@/constants";
+import { BASE_URL, WEB_URL } from "@/constants"
-import { getAllIcons, getAuthorData } from "@/lib/api";
+import { getAllIcons, getAuthorData } from "@/lib/api"
-import type { Metadata, ResolvingMetadata } from "next";
+import type { Metadata, ResolvingMetadata } from "next"
-import { notFound } from "next/navigation";
+import { notFound } from "next/navigation"
 
-export const dynamicParams = false;
+export const dynamicParams = false
 
 export async function generateStaticParams() {
-	const iconsData = await getAllIcons();
+	const iconsData = await getAllIcons()
 	return Object.keys(iconsData).map((icon) => ({
 		icon,
-	}));
+	}))
 }
 
-export const dynamic = "force-static";
+export const dynamic = "force-static"
 
 type Props = {
-	params: Promise<{ icon: string }>;
+	params: Promise<{ icon: string }>
-	searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+	searchParams: Promise<{ [key: string]: string | string[] | undefined }>
-};
+}
 
-export async function generateMetadata(
+export async function generateMetadata({ params, searchParams }: Props, parent: ResolvingMetadata): Promise<Metadata> {
-	{ params, searchParams }: Props,
+	const { icon } = await params
-	parent: ResolvingMetadata,
+	const iconsData = await getAllIcons()
-): Promise<Metadata> {
-	const { icon } = await params;
-	const iconsData = await getAllIcons();
 	if (!iconsData[icon]) {
-		notFound();
+		notFound()
 	}
-	const authorData = await getAuthorData(iconsData[icon].update.author.id);
+	const authorData = await getAuthorData(iconsData[icon].update.author.id)
-	const authorName = authorData.name || authorData.login;
+	const authorName = authorData.name || authorData.login
-	const updateDate = new Date(iconsData[icon].update.timestamp);
+	const updateDate = new Date(iconsData[icon].update.timestamp)
-	const totalIcons = Object.keys(iconsData).length;
+	const totalIcons = Object.keys(iconsData).length
 
-	console.debug(
+	console.debug(`Generated metadata for ${icon} by ${authorName} (${authorData.html_url}) updated at ${updateDate.toLocaleString()}`)
-		`Generated metadata for ${icon} by ${authorName} (${authorData.html_url}) updated at ${updateDate.toLocaleString()}`,
-	);
 
-	const iconImageUrl = `${BASE_URL}/png/${icon}.png`;
+	const iconImageUrl = `${BASE_URL}/png/${icon}.png`
-	const pageUrl = `${WEB_URL}/icons/${icon}`;
+	const pageUrl = `${WEB_URL}/icons/${icon}`
 	const formattedIconName = icon
 		.split("-")
 		.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-		.join(" ");
+		.join(" ")
 
 	return {
 		title: `${formattedIconName} Icon | Dashboard Icons`,
@@ -77,15 +72,7 @@ export async function generateMetadata(
 			publishedTime: updateDate.toISOString(),
 			modifiedTime: updateDate.toISOString(),
 			section: "Icons",
-			tags: [
+			tags: [formattedIconName, "dashboard icon", "service icon", "application icon", "tool icon", "web dashboard", "app directory"],
-				formattedIconName,
-				"dashboard icon",
-				"service icon",
-				"application icon",
-				"tool icon",
-				"web dashboard",
-				"app directory",
-			],
 		},
 		twitter: {
 			card: "summary_large_image",
@@ -101,27 +88,19 @@ export async function generateMetadata(
 				webp: `${BASE_URL}/webp/${icon}.webp`,
 			},
 		},
-	};
+	}
 }
 
-export default async function IconPage({
+export default async function IconPage({ params }: { params: Promise<{ icon: string }> }) {
-	params,
+	const { icon } = await params
-}: { params: Promise<{ icon: string }> }) {
+	const iconsData = await getAllIcons()
-	const { icon } = await params;
+	const originalIconData = iconsData[icon]
-	const iconsData = await getAllIcons();
-	const originalIconData = iconsData[icon];
 
 	if (!originalIconData) {
-		notFound();
+		notFound()
 	}
 
-	const authorData = await getAuthorData(originalIconData.update.author.id);
+	const authorData = await getAuthorData(originalIconData.update.author.id)
 
-	return (
+	return <IconDetails icon={icon} iconData={originalIconData} authorData={authorData} />
-		<IconDetails
-			icon={icon}
-			iconData={originalIconData}
-			authorData={authorData}
-		/>
-	);
 }

web/src/app/layout.tsx

@@ -7,8 +7,8 @@ import type { Metadata, Viewport } from "next"
 import { Inter } from "next/font/google"
 import { Toaster } from "sonner"
 import "./globals.css"
-import { ThemeProvider } from "./theme-provider"
 import { getDescription, websiteTitle } from "@/constants"
+import { ThemeProvider } from "./theme-provider"
 
 const inter = Inter({
 	variable: "--font-inter",

web/src/components/header.tsx

@@ -58,11 +58,7 @@ export function Header() {
 				<div className="flex items-center gap-2 md:gap-4">
 					{/* Desktop search button */}
 					<div className="hidden md:block">
-						<Button
+						<Button variant="outline" className="gap-2 cursor-pointer   transition-all duration-300" onClick={openCommandMenu}>
-							variant="outline"
-							className="gap-2 cursor-pointer   transition-all duration-300"
-							onClick={openCommandMenu}
-						>
 							<Search className="h-4 w-4 transition-all duration-300" />
 							<span>Find icons</span>
 							<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-border/80 bg-muted/80 px-1.5 font-mono text-[10px] font-medium opacity-100">

web/src/components/hero.tsx

@@ -216,7 +216,8 @@ export function HeroSection({ totalIcons, stars }: { totalIcons: number; stars:
 					</h1>
 
 					<p className="text-sm sm:text-base md:text-xl text-muted-foreground leading-relaxed mb-8 font-light tracking-wide max-w-2xl mx-auto px-4 motion-preset-slide-down motion-duration-500">
-						A collection of <NumberTicker value={totalIcons} startValue={1000} className="font-bold tracking-tighter text-muted-foreground" /> curated icons
+						A collection of{" "}
+						<NumberTicker value={totalIcons} startValue={1000} className="font-bold tracking-tighter text-muted-foreground" /> curated icons
 						for services, applications and tools, designed specifically for dashboards and app directories.
 					</p>
 					<div className="flex flex-col gap-4 max-w-3xl mx-auto">

web/src/components/icon-submission-form.tsx

@@ -72,10 +72,7 @@ export function IconSubmissionForm() {
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
 			<DialogTrigger asChild>
-				<Button
+				<Button variant="outline" className="hidden md:inline-flex cursor-pointer transition-all duration-300">
-					variant="outline"
-					className="hidden md:inline-flex cursor-pointer transition-all duration-300"
-				>
 					<PlusCircle className="h-4 w-4 transition-all duration-300" /> Contribute new icon
 				</Button>
 			</DialogTrigger>

web/src/components/magicui/number-ticker.tsx

@@ -1,64 +1,57 @@
-"use client";
+"use client"
 
-import { useInView, useMotionValue, useSpring } from "motion/react";
+import { useInView, useMotionValue, useSpring } from "motion/react"
-import { ComponentPropsWithoutRef, useEffect, useRef } from "react";
+import { type ComponentPropsWithoutRef, useEffect, useRef } from "react"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 interface NumberTickerProps extends ComponentPropsWithoutRef<"span"> {
-  value: number;
+	value: number
-  startValue?: number;
+	startValue?: number
-  direction?: "up" | "down";
+	direction?: "up" | "down"
-  delay?: number;
+	delay?: number
-  decimalPlaces?: number;
+	decimalPlaces?: number
 }
 
 export function NumberTicker({
-  value,
+	value,
-  startValue = 0,
+	startValue = 0,
-  direction = "up",
+	direction = "up",
-  delay = 0,
+	delay = 0,
-  className,
+	className,
-  decimalPlaces = 0,
+	decimalPlaces = 0,
-  ...props
+	...props
 }: NumberTickerProps) {
-  const ref = useRef<HTMLSpanElement>(null);
+	const ref = useRef<HTMLSpanElement>(null)
-  const motionValue = useMotionValue(direction === "down" ? value : startValue);
+	const motionValue = useMotionValue(direction === "down" ? value : startValue)
-  const springValue = useSpring(motionValue, {
+	const springValue = useSpring(motionValue, {
-    damping: 30,
+		damping: 30,
-    stiffness: 200,
+		stiffness: 200,
-  });
+	})
-  const isInView = useInView(ref, { once: true, margin: "0px" });
+	const isInView = useInView(ref, { once: true, margin: "0px" })
 
-  useEffect(() => {
+	useEffect(() => {
-    if (isInView) {
+		if (isInView) {
-      const timer = setTimeout(() => {
+			const timer = setTimeout(() => {
-        motionValue.set(direction === "down" ? startValue : value);
+				motionValue.set(direction === "down" ? startValue : value)
-      }, delay * 1000);
+			}, delay * 1000)
-      return () => clearTimeout(timer);
+			return () => clearTimeout(timer)
-    }
+		}
-  }, [motionValue, isInView, delay, value, direction, startValue]);
+	}, [motionValue, isInView, delay, value, direction, startValue])
 
-  useEffect(
+	useEffect(
-    () =>
+		() =>
-      springValue.on("change", (latest) => {
+			springValue.on("change", (latest) => {
-        if (ref.current) {
+				if (ref.current) {
-          ref.current.textContent = Number(latest.toFixed(decimalPlaces)).toString();
+					ref.current.textContent = Number(latest.toFixed(decimalPlaces)).toString()
-        }
+				}
-      }),
+			}),
-    [springValue, decimalPlaces],
+		[springValue, decimalPlaces],
-  );
+	)
 
-  return (
+	return (
-    <span
+		<span ref={ref} className={cn("inline-block tabular-nums tracking-wider", className)} {...props}>
-      ref={ref}
+			{startValue}
-      className={cn(
+		</span>
-        "inline-block tabular-nums tracking-wider",
+	)
-        className,
-      )}
-      {...props}
-    >
-      {startValue}
-    </span>
-  );
 }

web/src/components/theme-switcher.tsx

@@ -18,11 +18,7 @@ export function ThemeSwitcher() {
 				<Tooltip>
 					<TooltipTrigger asChild>
 						<DropdownMenuTrigger asChild>
-							<Button
+							<Button className=" transition-colors duration-200 group hover:ring-2 rounded-lg cursor-pointer" variant="ghost" size="icon">
-								className=" transition-colors duration-200 group hover:ring-2 rounded-lg cursor-pointer"
-								variant="ghost"
-								size="icon"
-							>
 								<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 group-hover:" />
 								<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100 group-hover:" />
 								<span className="sr-only">Toggle theme</span>

web/src/constants.ts

@@ -7,4 +7,4 @@ export const REPO_NAME = "homarr-labs/dashboard-icons"
 export const getDescription = (totalIcons: number) =>
 	`A collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`
 
-export const websiteTitle = "Free Dashboard Icons - Download High-Quality UI & App Icons"
+export const websiteTitle = "Free Dashboard Icons - Download High-Quality UI & App Icons"