fix: separate context and provider to make eslint happy

Author: AlexVOiceover

src/components/ui/helpCenter/HelpCenter.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState } from 'react';
-import { X, Info, PlayCircle, BookOpen, History } from 'lucide-react';
+import { X, Info, PlayCircle, BookOpen, History, Link as LinkIcon } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import helpContent from '@/data/helpContent.json';
 
@@ -73,7 +73,7 @@ const HelpCenter: React.FC<HelpCenterProps> = ({
         </div>
 
         {/* Tabs - grid for mobile, flex for desktop */}
-        <div className='grid grid-cols-4 sm:flex border-b'>
+        <div className='grid grid-cols-5 sm:flex border-b'>
           <button
             className={`px-2 sm:px-4 py-2 font-medium text-xs sm:text-sm flex flex-col sm:flex-row items-center justify-center ${
               activeTab === 'welcome'
@@ -107,6 +107,17 @@ const HelpCenter: React.FC<HelpCenterProps> = ({
             <BookOpen className='w-4 h-4 sm:mr-1 mb-1 sm:mb-0' />
             <span>Features</span>
           </button>
+          <button
+            className={`px-2 sm:px-4 py-2 font-medium text-xs sm:text-sm flex flex-col sm:flex-row items-center justify-center ${
+              activeTab === 'resources'
+                ? 'text-brand-blue border-b-2 border-brand-blue'
+                : 'text-gray-500 hover:text-gray-700'
+            }`}
+            onClick={() => handleTabChange('resources')}
+          >
+            <LinkIcon className='w-4 h-4 sm:mr-1 mb-1 sm:mb-0' />
+            <span>Resources</span>
+          </button>
           <button
             className={`px-2 sm:px-4 py-2 font-medium text-xs sm:text-sm flex flex-col sm:flex-row items-center justify-center ${
               activeTab === 'versions'
@@ -219,8 +230,29 @@ const HelpCenter: React.FC<HelpCenterProps> = ({
           {activeTab === 'resources' && (
             <div>
               <h3 className='text-lg font-medium text-gray-800 mb-3'>
-                Resources
+                Helpful Resources
               </h3>
+              
+              <div className='space-y-4'>
+                {helpContent.resources.map((resource, index) => (
+                  <div key={index} className='bg-gray-50 p-4 rounded-lg hover:bg-gray-100 transition-colors'>
+                    <a 
+                      href={resource.link} 
+                      target='_blank' 
+                      rel='noopener noreferrer'
+                      className='block'
+                    >
+                      <h4 className='font-medium text-brand-blue mb-1 flex items-center'>
+                        <LinkIcon className='w-4 h-4 mr-2' />
+                        {resource.title}
+                      </h4>
+                      <p className='text-gray-700 text-sm'>
+                        {resource.description}
+                      </p>
+                    </a>
+                  </div>
+                ))}
+              </div>
             </div>
           )}
 

src/components/ui/helpCenter/HelpContext.ts

@@ -0,0 +1,9 @@
+'use client';
+
+import { createContext } from 'react';
+
+export interface HelpContextType {
+  showHelpCenter: (tab?: string) => void;
+}
+
+export const HelpContext = createContext<HelpContextType | undefined>(undefined);

src/components/ui/helpCenter/HelpProvider.tsx

@@ -1,24 +1,11 @@
 'use client';
 
-import React, { createContext, useContext, useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
+import { HelpContext } from './HelpContext';
 import WelcomePanel from './WelcomePanel';
 import HelpButton from './HelpButton';
 import HelpCenter from './HelpCenter';
 
-interface HelpContextType {
-  showHelpCenter: (tab?: string) => void;
-}
-
-const HelpContext = createContext<HelpContextType | undefined>(undefined);
-
-export const useHelp = () => {
-  const context = useContext(HelpContext);
-  if (!context) {
-    throw new Error('useHelp must be used within a HelpProvider');
-  }
-  return context;
-};
-
 interface HelpProviderProps {
   children: React.ReactNode;
 }

src/components/ui/helpCenter/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useHelp';

src/components/ui/helpCenter/hooks/useHelp.ts

@@ -0,0 +1,12 @@
+'use client';
+
+import { useContext } from 'react';
+import { HelpContext } from '../HelpContext';
+
+export const useHelp = () => {
+  const context = useContext(HelpContext);
+  if (!context) {
+    throw new Error('useHelp must be used within a HelpProvider');
+  }
+  return context;
+};

src/components/ui/helpCenter/index.ts

@@ -1,4 +1,5 @@
-export { default as HelpProvider, useHelp } from './HelpProvider';
+export { default as HelpProvider } from './HelpProvider';
+export { useHelp } from './hooks';
 export { default as HelpButton } from './HelpButton';
 export { default as HelpCenter } from './HelpCenter';
 export { default as WelcomePanel } from './WelcomePanel';

src/data/helpContent.json

@@ -81,7 +81,33 @@
     }
   ],
 
-  "resources": [{}],
+  "resources": [
+    {
+      "title": "Communication Guide",
+      "description": "Comprehensive guide on effective workplace communication strategies.",
+      "link": "https://example.com/communication-guide"
+    },
+    {
+      "title": "Manager Conversation Toolkit",
+      "description": "Tools and templates for having productive conversations with your manager.",
+      "link": "https://example.com/manager-conversation-toolkit"
+    },
+    {
+      "title": "Workplace Accommodations FAQ",
+      "description": "Frequently asked questions about requesting and implementing workplace accommodations.",
+      "link": "https://example.com/workplace-accommodations-faq"
+    },
+    {
+      "title": "Career Development Resources",
+      "description": "Resources to help plan and discuss your career development with your manager.",
+      "link": "https://example.com/career-development"
+    },
+    {
+      "title": "Wellbeing Support",
+      "description": "Information and resources for maintaining wellbeing in the workplace.",
+      "link": "https://example.com/wellbeing-support"
+    }
+  ],
   "versions": [
     {
       "version": "1.0.0",