fixed biom warning

Author: jdv

crowdsec-docs/src/components/premium-upgrade/feature-card.tsx

@@ -49,7 +49,12 @@ export const FeatureCard = ({
 	const colors = categoryColors[category];
 
 	// Generate ID from title if not explicitly provided
-	const generatedId = id || title.toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '');
+	const generatedId =
+		id ||
+		title
+			.toLowerCase()
+			.replace(/\s+/g, "-")
+			.replace(/[^\w-]/g, "");
 
 	const cardContent = (
 		<div
@@ -89,11 +94,7 @@ export const FeatureCard = ({
 					<span className="font-semibold text-primary">{comparison.after}</span>
 				</div>
 			)}
-			{link && (
-				<div className="mt-3 text-sm font-medium text-primary hover:underline">
-					Learn more →
-				</div>
-			)}
+			{link && <div className="mt-3 text-sm font-medium text-primary hover:underline">Learn more →</div>}
 		</div>
 	);
 
@@ -122,10 +123,18 @@ export interface HighlightCardProps {
 
 export const HighlightCard = ({ id, title, description, stats, link, category = "protection" }: HighlightCardProps): React.JSX.Element => {
 	// Generate ID from title if not explicitly provided
-	const generatedId = id || title.toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '');
+	const generatedId =
+		id ||
+		title
+			.toLowerCase()
+			.replace(/\s+/g, "-")
+			.replace(/[^\w-]/g, "");
 
 	const content = (
-		<div id={generatedId} className="border border-solid border-primary/30 rounded-lg p-6 bg-gradient-to-r from-primary/5 to-transparent hover:shadow-md transition-all">
+		<div
+			id={generatedId}
+			className="border border-solid border-primary/30 rounded-lg p-6 bg-gradient-to-r from-primary/5 to-transparent hover:shadow-md transition-all"
+		>
 			<h4 className="font-semibold text-lg mb-2 text-gray-900 dark:text-gray-900">{title}</h4>
 			<p className="text-sm text-gray-600 dark:text-gray-700 mb-4 leading-relaxed">{description}</p>
 			{stats && stats.length > 0 && (
@@ -138,11 +147,7 @@ export const HighlightCard = ({ id, title, description, stats, link, category =
 					))}
 				</div>
 			)}
-			{link && (
-				<div className="mt-4 text-sm font-medium text-primary hover:underline">
-					Learn more →
-				</div>
-			)}
+			{link && <div className="mt-4 text-sm font-medium text-primary hover:underline">Learn more →</div>}
 		</div>
 	);
 

crowdsec-docs/src/components/premium-upgrade/index.ts

@@ -1,11 +1,8 @@
-export { FeatureCard, HighlightCard } from "./feature-card";
 export type { FeatureCardProps, HighlightCardProps } from "./feature-card";
-
-export { PersonaSelector } from "./persona-selector";
+export { FeatureCard, HighlightCard } from "./feature-card";
 export type { PersonaOption as PersonaSelectorOption, PersonaSelectorProps } from "./persona-selector";
-
-export { PersonaTabsHeader } from "./persona-tabs";
+export { PersonaSelector } from "./persona-selector";
 export type { PersonaOption as PersonaTabsOption, PersonaTabsHeaderProps } from "./persona-tabs";
-
-export { TabsWithPersona } from "./tabs-with-persona";
+export { PersonaTabsHeader } from "./persona-tabs";
 export type { PersonaOption, TabsWithPersonaProps } from "./tabs-with-persona";
+export { TabsWithPersona } from "./tabs-with-persona";

crowdsec-docs/src/components/premium-upgrade/tabs-with-persona.tsx

@@ -1,7 +1,7 @@
-import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
-import React, { useState } from "react";
+import Tabs from "@theme/Tabs";
 import type { ReactElement } from "react";
+import React, { useState } from "react";
 
 export interface PersonaOption {
 	value: string;

crowdsec-docs/src/css/premium-upgrade.css

@@ -57,7 +57,7 @@
 }
 
 .feature-card-highlight::before {
-	content: '';
+	content: "";
 	position: absolute;
 	top: 0;
 	left: 0;