From 46bd1dbe301638c0ada566f6dfad9a7098ae9b98 Mon Sep 17 00:00:00 2001
From: Caihaohan <caihaohan0712@foxmail.com>
Date: Tue, 27 Jan 2026 20:17:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20QuarterNavigator?=
 =?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/QuarterNavigator.tsx           | 70 +++++++++++++++++++
 1 file changed, 70 insertions(+)
 create mode 100644 src/app/[locale]/keyword-cloud/components/QuarterNavigator.tsx

diff --git a/src/app/[locale]/keyword-cloud/components/QuarterNavigator.tsx b/src/app/[locale]/keyword-cloud/components/QuarterNavigator.tsx
new file mode 100644
index 0000000..b189d38
--- /dev/null
+++ b/src/app/[locale]/keyword-cloud/components/QuarterNavigator.tsx
@@ -0,0 +1,70 @@
+'use client';
+
+import React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface QuarterNavigatorProps {
+  current: string;
+  quarters: string[];
+  onNavigate: (quarter: string) => void;
+}
+
+export function QuarterNavigator({ current, quarters, onNavigate }: QuarterNavigatorProps) {
+  const currentIndex = quarters.indexOf(current);
+  const canGoPrev = currentIndex > 0;
+  const canGoNext = currentIndex < quarters.length - 1;
+
+  return (
+    <div className="flex flex-col md:flex-row items-center justify-between gap-8 mb-12">
+      {/* 上一个季度按钮 */}
+      <button
+        disabled={!canGoPrev}
+        className={cn(
+          'nav-button',
+          'order-2 md:order-1',
+          'flex items-center justify-center',
+          'w-12 h-12 md:w-16 md:h-16',
+          'bg-white dark:bg-gray-800',
+          'border-4 border-black',
+          'shadow-hard',
+          'hover:translate-y-0.5 hover:shadow-none',
+          'transition-all',
+          !canGoPrev && 'opacity-50 cursor-not-allowed'
+        )}
+        onClick={() => canGoPrev && onNavigate(quarters[currentIndex - 1])}
+        aria-label="Previous quarter"
+      >
+        <ChevronLeft className="w-8 h-8 md:w-10 md:h-10" />
+      </button>
+
+      {/* 当前季度显示 */}
+      <div className="text-center order-1 md:order-2 flex-1">
+        <div className="inline-block bg-primary border-4 border-black px-10 py-4 shadow-hard font-display font-bold text-4xl md:text-5xl mb-4 rotate-1">
+          {current}
+        </div>
+      </div>
+
+      {/* 下一个季度按钮 */}
+      <button
+        disabled={!canGoNext}
+        className={cn(
+          'nav-button',
+          'order-3',
+          'flex items-center justify-center',
+          'w-12 h-12 md:w-16 md:h-16',
+          'bg-white dark:bg-gray-800',
+          'border-4 border-black',
+          'shadow-hard',
+          'hover:translate-y-0.5 hover:shadow-none',
+          'transition-all',
+          !canGoNext && 'opacity-50 cursor-not-allowed'
+        )}
+        onClick={() => canGoNext && onNavigate(quarters[currentIndex + 1])}
+        aria-label="Next quarter"
+      >
+        <ChevronRight className="w-8 h-8 md:w-10 md:h-10" />
+      </button>
+    </div>
+  );
+}