import { useState } from ‘react’;
import { Card } from ‘@/components/ui/card’;
import { Button } from ‘@/components/ui/button’;
import { Badge } from ‘@/components/ui/badge’;
import { FilterSidebar } from ‘./FilterSidebar’;
import { ResourceCard } from ‘./ResourceCard’;
import { Filter, BookOpen, MessageSquare, Wrench, Moon, Sun } from ‘lucide-react’;
// Mock data structure – updated with new fields
const mockCourses = [
{
id: 1,
name: “Introduction to Machine Learning”,
link: “https://example.com/ml-course”,
department: “Development”,
level: “Beginner”,
knowledgeRequired: “Basic Python”,
timeToComplete: “6 weeks”,
description: “Learn the fundamentals of machine learning algorithms and how to apply them to real-world problems.”
},
{
id: 2,
name: “Advanced Deep Learning”,
link: “https://example.com/dl-course”,
department: “Development”,
level: “Advanced”,
knowledgeRequired: “Linear Algebra, Python, ML Basics”,
timeToComplete: “12 weeks”,
description: “Master deep learning techniques including neural networks, CNNs, and RNNs for complex AI applications.”
},
{
id: 3,
name: “Natural Language Processing”,
link: “https://example.com/nlp-course”,
department: “Marketing”,
level: “Intermediate”,
knowledgeRequired: “Python, Statistics”,
timeToComplete: “8 weeks”,
description: “Understand how to process and analyze human language data using modern NLP techniques.”
}
];
const mockPrompts = [
{
id: 1,
department: “Marketing”,
useCase: “Social Media Content”,
prompt: “Create engaging social media posts for our AI dashboard launch. Include key features and benefits, keep it under 280 characters.”
},
{
id: 2,
department: “Development”,
useCase: “Code Review”,
prompt: “Review this React component for performance issues and suggest optimizations. Focus on rendering efficiency and prop validation.”
},
{
id: 3,
department: “Sales”,
useCase: “Email Templates”,
prompt: “Draft a follow-up email for leads who attended our AI workshop. Highlight the value proposition and include a clear call-to-action.”
}
];
const mockTools = [
{
id: 1,
name: “ChatGPT”,
category: “Text Generation”,
pricing: “Freemium”,
description: “Advanced AI chatbot for various tasks”
},
{
id: 2,
name: “Midjourney”,
category: “Image Generation”,
pricing: “Paid”,
description: “AI-powered image creation tool”
},
{
id: 3,
name: “Claude”,
category: “Text Generation”,
pricing: “Freemium”,
description: “AI assistant for analysis and writing”
}
];
type TabType = ‘courses’ | ‘prompts’ | ‘tools’;
export function DashboardLayout() {
const [activeTab, setActiveTab] = useState
const [showFilters, setShowFilters] = useState(true);
const [filters, setFilters] = useState
const [isDarkMode, setIsDarkMode] = useState(false);
const toggleTheme = () => {
setIsDarkMode(!isDarkMode);
document.documentElement.classList.toggle(‘dark’);
};
const tabs = [
{ id: ‘courses’ as TabType, label: ‘Courses’, icon: BookOpen, count: mockCourses.length },
{ id: ‘prompts’ as TabType, label: ‘Prompts’, icon: MessageSquare, count: mockPrompts.length },
{ id: ‘tools’ as TabType, label: ‘Tools’, icon: Wrench, count: mockTools.length }
];
const getCurrentData = () => {
switch (activeTab) {
case ‘courses’: return mockCourses;
case ‘prompts’: return mockPrompts;
case ‘tools’: return mockTools;
default: return [];
}
};
const getFilteredData = () => {
const data = getCurrentData();
if (Object.keys(filters).length === 0) return data;
return data.filter(item => {
return Object.entries(filters).every(([key, values]) => {
if (values.length === 0) return true;
// Get the value from the item for this filter key
const itemValue = (item as any)[key];
return values.includes(itemValue);
});
});
};
const getGridClasses = () => {
if (activeTab === ‘prompts’) {
return ‘grid gap-4 grid-cols-1’; // One card per row for prompts
}
return ‘grid gap-4 md:grid-cols-2 lg:grid-cols-3’; // Standard grid for courses and tools
};
return (
AI Resources Dashboard
{showFilters && (
)}
{/* Main Content */}
{/* Tabs */}
const Icon = tab.icon;
return (
);
})}
{/* Content Grid */}
))}
{getFilteredData().length === 0 && (
)}
);
}