diff --git a/src/features/comparison/components/home-page-client.tsx b/src/features/comparison/components/home-page-client.tsx
index ae04cad..b6e079e 100644
--- a/src/features/comparison/components/home-page-client.tsx
+++ b/src/features/comparison/components/home-page-client.tsx
@@ -11,6 +11,8 @@ import { AppFooter } from "@/components/layout/app-footer";
import { useTranslation } from "@/components/providers/language-provider";
import { cn } from "@/utils/cn";
import { useComparisonController } from "../hooks";
+import { type ComparisonPreset } from "../config/comparison-presets";
+import { PresetPills } from "./preset-pills";
export function HomePageClient() {
const { t } = useTranslation();
@@ -34,6 +36,13 @@ export function HomePageClient() {
usernameErrors,
} = useComparisonController();
+ const handlePresetClick = (preset: ComparisonPreset) => {
+ handleUsername1Change(preset.username1);
+ handleUsername2Change(preset.username2);
+
+ handleCompare(preset.username1, preset.username2, { selectedLanguages });
+ };
+
const skeleton = useMemo(() => , []);
return (
@@ -57,6 +66,14 @@ export function HomePageClient() {
username1Error={usernameErrors.username1}
username2Error={usernameErrors.username2}
/>
+ {!displayData && (
+
+ )}
{displayData ? (
diff --git a/src/features/comparison/components/preset-pills.tsx b/src/features/comparison/components/preset-pills.tsx
new file mode 100644
index 0000000..c51857e
--- /dev/null
+++ b/src/features/comparison/components/preset-pills.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import { useId } from "react";
+import { useTranslation } from "@/components/providers/language-provider";
+import { cn } from "@/utils/cn";
+import { COMPARISON_PRESETS } from "../config/comparison-presets";
+
+type Preset = (typeof COMPARISON_PRESETS)[number];
+
+interface PresetPillsProps {
+ onSelect: (preset: Preset) => void;
+ loading: boolean;
+ username1: string;
+ username2: string;
+}
+
+export function PresetPills({ onSelect, loading, username1, username2 }: PresetPillsProps) {
+ const { t } = useTranslation();
+ const headingId = useId();
+
+ return (
+
+
+ {t("presets.title")}
+
+
+
+ {COMPARISON_PRESETS.map((preset) => {
+ const isActive =
+ loading && username1 === preset.username1 && username2 === preset.username2;
+
+ return (
+ -
+ {/* Native
+ );
+ })}
+
+
+ );
+}
diff --git a/src/features/comparison/config/comparison-presets.ts b/src/features/comparison/config/comparison-presets.ts
new file mode 100644
index 0000000..2c28734
--- /dev/null
+++ b/src/features/comparison/config/comparison-presets.ts
@@ -0,0 +1,19 @@
+export const COMPARISON_PRESETS = [
+ {
+ username1: "yyx990803",
+ username2: "antfu",
+ labelKey: "presets.evanVsAnthony",
+ },
+ {
+ username1: "rauchg",
+ username2: "leerob",
+ labelKey: "presets.guillermoVsLee",
+ },
+ {
+ username1: "kentcdodds",
+ username2: "t3dotgg",
+ labelKey: "presets.kentVsTheo",
+ },
+] as const;
+
+export type ComparisonPreset = (typeof COMPARISON_PRESETS)[number];
diff --git a/src/locales/ar.json b/src/locales/ar.json
index 60defac..f63b72d 100644
--- a/src/locales/ar.json
+++ b/src/locales/ar.json
@@ -281,6 +281,10 @@
"profile.signalShare": "{pct}% من الإشارة النهائية",
"profile.title": "تأثير وإحصائيات المطور",
"profile.topWork": "أبرز الأعمال والمساهمات",
+ "presets.title": "لا تعرف من تقارن؟ جرّب أحد هذه الأمثلة:",
+ "presets.evanVsAnthony": "إيفان يو ضد أنتوني فو",
+ "presets.guillermoVsLee": "غييرمو راوتش ضد لي روبنسون",
+ "presets.kentVsTheo": "كينت سي. دودز ضد ثيو براون",
"profile.badgeDescription": "احصل على شارة لملف README الخاص بك على GitHub.",
"profile.badgeStyle": "نمط الشارة",
"profile.markdownLabel": "ماركداون",
diff --git a/src/locales/en.json b/src/locales/en.json
index 25ad91f..20139d8 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -272,6 +272,10 @@
"profile.location": "Location",
"profile.metaDescription": "Explore {name}'s (@{username}) open-source developer impact score, top repositories, merged pull requests, and community contributions on DevImpact.",
"profile.metaTitle": "{name} (@{username}) - GitHub Impact & Developer Stats",
+ "presets.title": "Not sure who to compare? Try one of these:",
+ "presets.evanVsAnthony": "Evan You vs Anthony Fu",
+ "presets.guillermoVsLee": "Guillermo Rauch vs Lee Robinson",
+ "presets.kentVsTheo": "Kent C. Dodds vs Theo Browne",
"profile.methodologyCta": "Learn how this developer score was calculated",
"profile.notFound.description": "We couldn't find GitHub data for @{username}. Please check the username and try again.",
"profile.notFound.title": "Developer Not Found",