From b33886f3eedf78c13fcb293896ef4a1000b62540 Mon Sep 17 00:00:00 2001
From: Caihaohan <caihaohan0712@foxmail.com>
Date: Tue, 27 Jan 2026 20:17:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20ProgressIndicator?=
 =?UTF-8?q?=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ProgressIndicator.tsx          | 44 +++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 src/app/[locale]/keyword-cloud/components/ProgressIndicator.tsx

diff --git a/src/app/[locale]/keyword-cloud/components/ProgressIndicator.tsx b/src/app/[locale]/keyword-cloud/components/ProgressIndicator.tsx
new file mode 100644
index 0000000..99cd1c7
--- /dev/null
+++ b/src/app/[locale]/keyword-cloud/components/ProgressIndicator.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface ProgressIndicatorProps {
+  currentQuarter: string;
+  totalQuarters: number;
+  quarters: string[];
+}
+
+export function ProgressIndicator({ currentQuarter, totalQuarters, quarters }: ProgressIndicatorProps) {
+  const currentIndex = quarters.indexOf(currentQuarter);
+
+  return (
+    <div className="flex gap-2 mb-12 max-w-md mx-auto">
+      {quarters.map((quarter, index) => {
+        const isCompleted = index <= currentIndex;
+        const isCurrent = index === currentIndex;
+        const isLast = index === quarters.length - 1;
+
+        return (
+          <div
+            key={quarter}
+            className={cn(
+              'progress-step',
+              'h-3',
+              'flex-1',
+              'border-2',
+              'border-black',
+              'transition-colors',
+              'duration-300',
+              isCurrent && 'bg-primary',
+              isCompleted && !isCurrent && 'bg-secondary',
+              !isCompleted && 'bg-gray-200 dark:bg-gray-700',
+              isLast && 'border-dashed'
+            )}
+            aria-label={`Quarter ${quarter}`}
+          />
+        );
+      })}
+    </div>
+  );
+}