love-ui 1.2.19 → 1.2.21

package/registry/default/blocks/integrations3/components/integrations.tsx

@@ -1,34 +1,30 @@
+import type { ElementType, SVGProps } from "react";
+import {
+	Cursor as CursorLogo,
+	GoogleGmail as GmailLogo,
+	Neon as NeonLogo,
+	PlanetScale as PlanetscaleLogo,
+	Polar as PolarLogo,
+	Vercel as VercelLogo,
+} from "love-ui/logos";
+
 import { cn } from "@/lib/utils";
 import { Button } from "@/registry/default/ui/button";
 import { FullWidthDivider } from "./full-width-divider";
-import CursorLogo from "./logos/cursor.svg";
-import GmailLogo from "./logos/gmail.svg";
-import PlanetscaleLogo from "./logos/planetscale.svg";
-import PolarLogo from "./logos/polar.svg";
-import SupabaseLogo from "./logos/supabase.svg";
-import VercelLogo from "./logos/vercel.svg";
+
+type LogoComponent = ElementType<SVGProps<SVGSVGElement>>;
 
 type LogoType = {
-	src: { src: string } | string;
+	Component: LogoComponent;
 	alt: string;
 	isInvertable?: boolean;
 };
-
-type TileData = {
-	row: number;
-	col: number;
-	logo?: LogoType;
-};
-
-const getLogoSrc = (source: LogoType["src"]) =>
-	typeof source === "string" ? source : source.src;
+type TileData = { row: number; col: number; logo?: LogoType };
 
 export function Integrations() {
 	return (
 		<div className="relative mx-auto grid max-w-4xl grid-cols-1 gap-12 border-x md:grid-cols-2 md:items-center">
 			<FullWidthDivider className="-top-px" />
-
-			{/* Left Content */}
 			<div className="p-4 md:p-6">
 				<div className="space-y-4">
 					<h2 className="font-medium text-3xl text-foreground tracking-tight sm:text-4xl">
@@ -41,11 +37,8 @@ export function Integrations() {
 					<Button size="sm">Explore LoveUI integrations</Button>
 				</div>
 			</div>
-
-			{/* Right Content - Visual */}
 			<div className="place-items-end">
 				<div className="relative size-80">
-					{/* Grid Background */}
 					<div
 						className={cn(
 							"absolute inset-0 size-full",
@@ -54,13 +47,14 @@ export function Integrations() {
 							"mask-[radial-gradient(ellipse_at_center,black,black,transparent)]"
 						)}
 					/>
-
 					{tiles.map((tile) => (
-						<IntegrationCard key={`${tile.row}_${tile.col}`} {...tile} />
+						<IntegrationCard
+							key={String(tile.row) + "_" + String(tile.col)}
+							{...tile}
+						/>
 					))}
 				</div>
 			</div>
-
 			<FullWidthDivider className="-bottom-px" />
 		</div>
 	);
@@ -71,120 +65,73 @@ function IntegrationCard({ row, col, logo }: TileData) {
 		<div
 			className={cn(
 				"absolute flex size-16 items-center justify-center",
-				logo ? "bg-secondary/40" : "" // Styling for empty tiles
+				logo ? "bg-secondary/40" : ""
 			)}
-			style={{
-				left: col * 64, // 64px cell
-				top: row * 64,
-			}}
+			style={{ left: col * 64, top: row * 64 }}
 		>
 			{logo && (
-				<img
-					alt={logo.alt}
-					className={cn(
-						"pointer-events-none size-8 select-none object-contain p-1",
-						logo.isInvertable && "dark:invert"
-					)}
-					height={40}
-					src={getLogoSrc(logo.src)}
-					width={40}
+				<LogoAsset
+					className="pointer-events-none size-9 select-none object-contain p-1"
+					logo={logo}
 				/>
 			)}
 		</div>
 	);
 }
 
-// Coordinate mapping to approximate the "scattered" look in the image.
-// Grid 6x5.
+function LogoAsset({
+	logo,
+	className,
+}: {
+	logo: LogoType;
+	className: string;
+}) {
+	const Component = logo.Component;
+
+	return (
+		<Component
+			aria-label={logo.alt}
+			className={cn(className, logo.isInvertable && "dark:invert")}
+			role="img"
+		/>
+	);
+}
+
 const tiles: TileData[] = [
-	// Row 0
 	{
 		row: 0,
 		col: 1,
-		logo: {
-			src: VercelLogo,
-			alt: "Vercel Logo",
-			isInvertable: true,
-		},
+		logo: { Component: VercelLogo, alt: "Vercel Logo", isInvertable: true },
 	},
 	{
 		row: 0,
 		col: 3,
-		logo: {
-			src: CursorLogo,
-			alt: "Cursor Logo",
-			isInvertable: true,
-		},
-	},
-
-	// Row 1
-	{ row: 1, col: 0 }, // Empty
-	{
-		row: 1,
-		col: 2,
-		logo: {
-			src: SupabaseLogo,
-			alt: "Supabase Logo",
-		},
+		logo: { Component: CursorLogo, alt: "Cursor Logo", isInvertable: true },
 	},
-	{
-		row: 1,
-		col: 4,
-		logo: {
-			src: GmailLogo,
-			alt: "Gmail Logo",
-		},
-	},
-
-	// Row 2
+	{ row: 1, col: 0 },
+	{ row: 1, col: 2, logo: { Component: NeonLogo, alt: "Neon Logo" } },
+	{ row: 1, col: 4, logo: { Component: GmailLogo, alt: "Gmail Logo" } },
 	{
 		row: 2,
 		col: 1,
 		logo: {
-			src: PlanetscaleLogo,
+			Component: PlanetscaleLogo,
 			alt: "Planetscale Logo",
 			isInvertable: true,
 		},
 	},
-	{ row: 2, col: 3 }, // Empty
-
-	// Row 3
-
-	{ row: 3, col: 0 }, // Empty
-	{
-		row: 3,
-		col: 2,
-		logo: {
-			src: PolarLogo,
-			alt: "Polar Logo",
-		},
-	},
+	{ row: 2, col: 3 },
+	{ row: 3, col: 0 },
+	{ row: 3, col: 2, logo: { Component: PolarLogo, alt: "Polar Logo" } },
 	{
 		row: 3,
 		col: 4,
-		logo: {
-			src: VercelLogo,
-			alt: "Vercel Logo",
-			isInvertable: true,
-		},
-	},
-
-	// Row 4
-	{
-		row: 4,
-		col: 1,
-		logo: {
-			src: SupabaseLogo,
-			alt: "Supabase Logo",
-		},
+		logo: { Component: VercelLogo, alt: "Vercel Logo", isInvertable: true },
 	},
+	{ row: 4, col: 1, logo: { Component: NeonLogo, alt: "Neon Logo" } },
 	{
 		row: 4,
 		col: 3,
-		logo: {
-			src: CursorLogo,
-			alt: "Cursor Logo",
-			isInvertable: true,
-		},
+		logo: { Component: CursorLogo, alt: "Cursor Logo", isInvertable: true },
 	},
 ];

package/registry/default/blocks/integrations4/components/integrations.tsx

@@ -1,33 +1,27 @@
+import type { ElementType, SVGProps } from "react";
+import {
+	Cursor as CursorLogo,
+	GoogleGmail as GmailLogo,
+	Neon as NeonLogo,
+	PlanetScale as PlanetscaleLogo,
+	Polar as PolarLogo,
+	Vercel as VercelLogo,
+} from "love-ui/logos";
+
 import { cn } from "@/lib/utils";
-import AdobeLogo from "./logos/adobe.svg";
-import CanvaLogo from "./logos/canva.svg";
-import CursorLogo from "./logos/cursor.svg";
-import GmailLogo from "./logos/gmail.svg";
-import NotionLogo from "./logos/notion.svg";
-import PlanetscaleLogo from "./logos/planetscale.svg";
-import PolarLogo from "./logos/polar.svg";
-import SupabaseLogo from "./logos/supabase.svg";
-import VercelLogo from "./logos/vercel.svg";
+
+type LogoComponent = ElementType<SVGProps<SVGSVGElement>>;
 
 type LogoType = {
-	src: { src: string } | string;
+	Component: LogoComponent;
 	alt: string;
 	isInvertable?: boolean;
 };
-
-type TileData = {
-	row: number;
-	col: number;
-	logo?: LogoType;
-};
-
-const getLogoSrc = (source: LogoType["src"]) =>
-	typeof source === "string" ? source : source.src;
+type TileData = { row: number; col: number; logo?: LogoType };
 
 export function Integrations() {
 	return (
 		<div className="mx-auto grid max-w-5xl grid-cols-1 gap-12 p-4 md:grid-cols-2 md:items-center">
-			{/* Left Content */}
 			<div className="max-w-xl space-y-5">
 				<h2 className="font-medium text-3xl text-foreground tracking-tight sm:text-4xl md:text-5xl">
 					LoveUI fits your product stack
@@ -37,12 +31,13 @@ export function Integrations() {
 					data, docs, billing, and design collaboration.
 				</p>
 			</div>
-
-			{/* Right Content - Visual */}
 			<div className="place-items-end">
 				<div className="mask-[radial-gradient(ellipse_at_center,black,black,transparent)] relative size-90">
 					{tiles.map((tile) => (
-						<IntegrationCard key={`${tile.row}_${tile.col}`} {...tile} />
+						<IntegrationCard
+							key={String(tile.row) + "_" + String(tile.col)}
+							{...tile}
+						/>
 					))}
 				</div>
 			</div>
@@ -55,123 +50,73 @@ function IntegrationCard({ row, col, logo }: TileData) {
 		<div
 			className={cn(
 				"absolute flex size-18 items-center justify-center rounded-md border",
-				logo
-					? "bg-card shadow-xs dark:bg-card/60"
-					: "bg-secondary/30 dark:bg-background" // Styling for empty tiles
+				logo ? "bg-card shadow-xs dark:bg-card/60" : "bg-secondary/30 dark:bg-background"
 			)}
-			style={{
-				left: col * 72, // 72px cell
-				top: row * 72,
-			}}
+			style={{ left: col * 72, top: row * 72 }}
 		>
 			{logo && (
-				<img
-					alt={logo.alt}
-					className={cn(
-						"pointer-events-none size-8 select-none object-contain p-1",
-						logo.isInvertable && "dark:invert"
-					)}
-					height={40}
-					src={getLogoSrc(logo.src)}
-					width={40}
+				<LogoAsset
+					className="pointer-events-none size-9 select-none object-contain p-1"
+					logo={logo}
 				/>
 			)}
 		</div>
 	);
 }
 
-// Coordinate mapping to approximate the "scattered" look in the image.
-// Grid 5x5.
+function LogoAsset({
+	logo,
+	className,
+}: {
+	logo: LogoType;
+	className: string;
+}) {
+	const Component = logo.Component;
+
+	return (
+		<Component
+			aria-label={logo.alt}
+			className={cn(className, logo.isInvertable && "dark:invert")}
+			role="img"
+		/>
+	);
+}
+
 const tiles: TileData[] = [
-	// Row 0
 	{
 		row: 0,
 		col: 1,
+		logo: { Component: VercelLogo, alt: "Vercel Logo", isInvertable: true },
 	},
 	{
 		row: 0,
 		col: 3,
-		logo: {
-			src: NotionLogo,
-			alt: "Notion Logo",
-		},
-	},
-
-	// Row 1
-	{ row: 1, col: 0 }, // Empty
-	{
-		row: 1,
-		col: 2,
-		logo: {
-			src: CursorLogo,
-			alt: "Cursor Logo",
-			isInvertable: true,
-		},
+		logo: { Component: CursorLogo, alt: "Cursor Logo", isInvertable: true },
 	},
-	{
-		row: 1,
-		col: 4,
-		logo: {
-			src: VercelLogo,
-			alt: "Vercel Logo",
-			isInvertable: true,
-		},
-	},
-
-	// Row 2
+	{ row: 1, col: 0 },
+	{ row: 1, col: 2, logo: { Component: NeonLogo, alt: "Neon Logo" } },
+	{ row: 1, col: 4, logo: { Component: GmailLogo, alt: "Gmail Logo" } },
 	{
 		row: 2,
 		col: 1,
 		logo: {
-			src: PlanetscaleLogo,
+			Component: PlanetscaleLogo,
 			alt: "Planetscale Logo",
 			isInvertable: true,
 		},
 	},
-	{
-		row: 2,
-		col: 3,
-		logo: {
-			src: GmailLogo,
-			alt: "Gmail Logo",
-		},
-	}, // Empty
-
-	// Row 3
-
-	{ row: 3, col: 0 }, // Empty
-	{
-		row: 3,
-		col: 2,
-		logo: {
-			src: SupabaseLogo,
-			alt: "Supabase Logo",
-		},
-	},
+	{ row: 2, col: 3 },
+	{ row: 3, col: 0 },
+	{ row: 3, col: 2, logo: { Component: PolarLogo, alt: "Polar Logo" } },
 	{
 		row: 3,
 		col: 4,
-		logo: {
-			src: CanvaLogo,
-			alt: "Canva Logo",
-		},
-	},
-
-	// Row 4
-	{
-		row: 4,
-		col: 1,
-		logo: {
-			src: AdobeLogo,
-			alt: "Adobe Logo",
-		},
+		logo: { Component: VercelLogo, alt: "Vercel Logo", isInvertable: true },
 	},
+	{ row: 4, col: 1, logo: { Component: NeonLogo, alt: "Neon Logo" } },
 	{
 		row: 4,
 		col: 3,
-		logo: {
-			src: PolarLogo,
-			alt: "Polar Logo",
-		},
+		logo: { Component: CursorLogo, alt: "Cursor Logo", isInvertable: true },
 	},
 ];

package/registry/default/blocks/integrations5/components/integrations.tsx

@@ -1,66 +1,36 @@
+import type { ElementType, SVGProps } from "react";
+import {
+	Cursor as CursorLogo,
+	GoogleGmail as GmailLogo,
+	Neon as NeonLogo,
+	Notion as NotionLogo,
+	PlanetScale as PlanetscaleLogo,
+	Polar as PolarLogo,
+	Vercel as VercelLogo,
+} from "love-ui/logos";
+
 import { cn } from "@/lib/utils";
 import { Button } from "@/registry/default/ui/button";
-import { ArrowUpRightIcon } from "lucide-react";
-import CursorLogo from "./logos/cursor.svg";
-import GmailLogo from "./logos/gmail.svg";
-import NotionLogo from "./logos/notion.svg";
-import PlanetscaleLogo from "./logos/planetscale.svg";
-import PolarLogo from "./logos/polar.svg";
-import SupabaseLogo from "./logos/supabase.svg";
-import VercelLogo from "./logos/vercel.svg";
+import { ArrowUpRight as ArrowUpRightIcon } from "love-ui/icons";
+
+type LogoComponent = ElementType<SVGProps<SVGSVGElement>>;
 
 type Integration = {
-	src?: { src: string } | string;
+	Component?: LogoComponent;
 	name: string;
 	isInvertable?: boolean;
 };
-
-const getLogoSrc = (source: NonNullable<Integration["src"]>) =>
-	typeof source === "string" ? source : source.src;
-
 const data: Integration[] = [
-	{
-		name: "Empty 1",
-	},
-	{
-		name: "Vercel",
-		src: VercelLogo,
-		isInvertable: true,
-	},
-	{
-		name: "Cursor",
-		src: CursorLogo,
-		isInvertable: true,
-	},
-	{
-		src: SupabaseLogo,
-		name: "Supabase",
-	},
-	{
-		name: "PlanetScale",
-		src: PlanetscaleLogo,
-		isInvertable: true,
-	},
-	{
-		name: "Notion",
-		src: NotionLogo,
-	},
-	{
-		name: "Gmail",
-		src: GmailLogo,
-	},
-	{
-		name: "Polar",
-		src: PolarLogo,
-	},
-	{
-		name: "Cursor",
-		src: CursorLogo,
-		isInvertable: true,
-	},
-	{
-		name: "Empty 2",
-	},
+	{ name: "Empty 1" },
+	{ name: "Vercel", Component: VercelLogo, isInvertable: true },
+	{ name: "Cursor", Component: CursorLogo, isInvertable: true },
+	{ name: "Neon", Component: NeonLogo },
+	{ name: "PlanetScale", Component: PlanetscaleLogo, isInvertable: true },
+	{ name: "Notion", Component: NotionLogo },
+	{ name: "Gmail", Component: GmailLogo },
+	{ name: "Polar", Component: PolarLogo },
+	{ name: "Cursor", Component: CursorLogo, isInvertable: true },
+	{ name: "Empty 2" },
 ];
 
 export function Integrations() {
@@ -74,28 +44,21 @@ export function Integrations() {
 					Use familiar tools around your copied components, blocks, and docs.
 				</p>
 			</div>
-
 			<div className="flex flex-col justify-center rounded-full border bg-secondary dark:bg-secondary/10">
 				<div className="mask-l-from-90 mask-r-from-90 flex items-center justify-center -space-x-4 p-1">
 					{data.map((item, index) => (
 						<div
 							className={cn(
 								"relative z-0 transition-transform",
-								item.src ? "hover:z-10 hover:scale-110" : ""
+								item.Component ? "hover:z-10 hover:scale-110" : ""
 							)}
-							key={`${item.name}-${index}`}
+							key={item.name + "-" + String(index)}
 						>
 							<div className="flex size-12 items-center justify-center overflow-hidden rounded-full border bg-card shadow-sm md:size-16">
-								{item.src && (
-									<img
-										alt={item.name}
-										className={cn(
-											"pointer-events-auto size-5 select-none object-contain md:size-6",
-											item.isInvertable && "dark:invert"
-										)}
-										height="auto"
-										src={getLogoSrc(item.src)}
-										width="auto"
+								{item.Component && (
+									<LogoAsset
+										className="pointer-events-auto size-6 select-none object-contain md:size-7"
+										integration={item}
 									/>
 								)}
 							</div>
@@ -110,3 +73,23 @@ export function Integrations() {
 		</div>
 	);
 }
+
+function LogoAsset({
+	integration,
+	className,
+}: {
+	integration: Integration;
+	className: string;
+}) {
+	if (!integration.Component) return null;
+
+	const Component = integration.Component;
+
+	return (
+		<Component
+			aria-label={integration.name}
+			className={cn(className, integration.isInvertable && "dark:invert")}
+			role="img"
+		/>
+	);
+}