refractor web components to kebab case

apps/web/src/app/(home)/_components/npm-package.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { useEffect, useState } from "react";
+
+const NpmPackage = () => {
+	const [version, setVersion] = useState("");
+	const [versionLoading, setVersionLoading] = useState(true);
+
+	useEffect(() => {
+		const getLatestVersion = async () => {
+			setVersionLoading(true);
+			try {
+				const res = await fetch(
+					"https://registry.npmjs.org/create-better-t-stack/latest",
+				);
+				if (!res.ok) throw new Error("Failed to fetch version");
+				const data = await res.json();
+				setVersion(data.version);
+			} catch (error) {
+				console.error("Error fetching NPM version:", error);
+				setVersion("?.?.?");
+			} finally {
+				setVersionLoading(false);
+			}
+		};
+		getLatestVersion();
+	}, []);
+
+	return (
+		<div className="mt-2 flex items-center justify-center">
+			<span
+				className={cn(
+					"mr-2 inline-block h-5 w-3 bg-primary",
+					versionLoading && "animate-pulse",
+				)}
+			/>
+			<span className="font-mono text-muted-foreground text-xl">
+				{versionLoading ? "[v?.?.?]" : `[v${version}]`}
+			</span>
+		</div>
+	);
+};
+
+export default NpmPackage;