Refactor code structure for improved readability and maintainability

Author: peixl

src/components/cases/CasesExplorer.tsx

@@ -8,21 +8,8 @@ import type { Dictionary } from '@/i18n';
 import { caseUrl } from '@/lib/routes';
 import { GlassCard } from '@/components/GlassCard';
 import { cn } from '@/lib/cn';
-import {
-  ArrowRightIcon,
-  FinanceIcon,
-  OpsIcon,
-  SupportIcon,
-  HRIcon,
-  LogisticsIcon,
-  ProcurementIcon,
-  MarketingIcon,
-  LegalIcon,
-  DataIcon,
-  AdminIcon,
-  ProductIcon,
-  WindowsIcon,
-} from '@/components/icons';
+import { ArrowRightIcon, WindowsIcon } from '@/components/icons';
+import { deptIcons } from '@/components/cases/deptIcons';
 import { CopyButton } from '@/components/CopyButton';
 
 type Props = {
@@ -46,20 +33,6 @@ const departmentOptions: Array<Department | 'all'> = [
   'product',
 ];
 
-export const deptIcons: Record<Department, React.ReactNode> = {
-  finance: <FinanceIcon size={24} />,
-  operations: <OpsIcon size={24} />,
-  'customer-service': <SupportIcon size={24} />,
-  hr: <HRIcon size={24} />,
-  logistics: <LogisticsIcon size={24} />,
-  procurement: <ProcurementIcon size={24} />,
-  marketing: <MarketingIcon size={24} />,
-  legal: <LegalIcon size={24} />,
-  data: <DataIcon size={24} />,
-  admin: <AdminIcon size={24} />,
-  product: <ProductIcon size={24} />,
-};
-
 export function CasesExplorer({ cases, locale, dict }: Props) {
   const [filter, setFilter] = useState<Department | 'all'>('all');
   const [query, setQuery] = useState('');

src/components/cases/deptIcons.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import type { Department } from '@/data/cases';
+import {
+  FinanceIcon,
+  OpsIcon,
+  SupportIcon,
+  HRIcon,
+  LogisticsIcon,
+  ProcurementIcon,
+  MarketingIcon,
+  LegalIcon,
+  DataIcon,
+  AdminIcon,
+  ProductIcon,
+} from '@/components/icons';
+
+// Server-safe map: lives in a non-'use client' module so RSC can render the
+// JSX elements directly. Importing this from a client component is fine.
+export const deptIcons: Record<Department, ReactNode> = {
+  finance: <FinanceIcon size={24} />,
+  operations: <OpsIcon size={24} />,
+  'customer-service': <SupportIcon size={24} />,
+  hr: <HRIcon size={24} />,
+  logistics: <LogisticsIcon size={24} />,
+  procurement: <ProcurementIcon size={24} />,
+  marketing: <MarketingIcon size={24} />,
+  legal: <LegalIcon size={24} />,
+  data: <DataIcon size={24} />,
+  admin: <AdminIcon size={24} />,
+  product: <ProductIcon size={24} />,
+};

src/components/home/HomeSections.tsx

@@ -18,7 +18,7 @@ import {
   LightBulbIcon,
 } from '@/components/icons';
 import { caseBundles } from '@/data/cases';
-import { deptIcons } from '@/components/cases/CasesExplorer';
+import { deptIcons } from '@/components/cases/deptIcons';
 
 type Props = { locale: Locale; dict: Dictionary };