feat: add banner to upkit (#226)

Author: thedaviddias

apps/web/app/_components/kit-banner.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { ArrowRight, Package2 } from "lucide-react";
+import Link from "next/link";
+import { usePlausible } from "next-plausible";
+import { cn } from "@/app/_utils/cn";
+
+type KitBannerProps = {
+	className?: string;
+	componentUrl?: string;
+};
+
+export const KitBanner = ({ className, componentUrl }: KitBannerProps) => {
+	const plausible = usePlausible();
+	const href = componentUrl || "https://kit.uxpatterns.dev";
+
+	return (
+		<div
+			className={cn(
+				"border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 mt-4 p-6 rounded-lg",
+				className,
+			)}
+		>
+			<Link
+				href={href}
+				target="_blank"
+				rel="noopener"
+				className="group flex items-center justify-between hover:no-underline"
+				onClick={() => {
+					plausible("UP Kit Banner Click", {
+						props: {
+							source: "pattern_page",
+						},
+					});
+				}}
+			>
+				<div className="flex items-center gap-3">
+					<div className="flex h-8 w-8 items-center justify-center rounded-md bg-blue-100 dark:bg-blue-900">
+						<Package2 className="h-4 w-4 text-blue-600 dark:text-blue-300" />
+					</div>
+					<div className="flex flex-col items-start">
+						<h3 className="text-lg font-semibold tracking-tight">
+							UP Kit Component
+						</h3>
+						<p className="text-sm text-gray-600 dark:text-gray-300">
+							Get ready-to-use React components for this pattern
+						</p>
+					</div>
+				</div>
+				<ArrowRight className="h-5 w-5 text-gray-400 dark:text-gray-500 transition-transform group-hover:translate-x-1" />
+			</Link>
+		</div>
+	);
+};

apps/web/content/patterns/forms/button.mdx

@@ -14,6 +14,7 @@ import { PatternPreview } from "@app/_components/pattern-preview";
 import { PatternStats } from "@app/_components/pattern-stats";
 import { PatternComparison } from "@app/_components/pattern-comparison";
 import { RelatedPatternsCard } from "@app/_components/related-patterns-card";
+import { KitBanner } from "@app/_components/kit-banner";
 
 # Button
 
@@ -35,6 +36,8 @@ import { RelatedPatternsCard } from "@app/_components/related-patterns-card";
   description="A native HTML button with optional styling enhancements. No JavaScript required unless adding advanced behaviors."
 />
 
+<KitBanner componentUrl="https://kit.uxpatterns.dev/docs/components/button" />
+
 ## Use Cases
 
 ### When to use:

turbo.json

@@ -34,7 +34,8 @@
 				"MDX_API_KEY",
 				"MAILERLITE_API_KEY",
 				"MAILERLITE_GROUP_IDS",
-				"PLAUSIBLE_API_KEY"
+				"PLAUSIBLE_API_KEY",
+				"TURBO_REMOTE_CACHE_SIGNATURE_KEY"
 			]
 		},
 		"dev": {