[V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" isMerged="true" import '@/styles/globals.css' import { Inter } from 'next/font/google' import { ThemeProvider } from '@/components/theme-provider' import { AuthProvider } from '@/contexts/AuthContext' const inter = Inter({ subsets: ['latin'] }) export const metadata = { title: 'MindToolKit', description: 'Enhance your critical thinking and decision-making skills', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/tools/decision-matrix/page.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from 'react' import { Layout } from '@/components/layout' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { Slider } from '@/components/ui/slider' import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "@/components/ui/accordion" type Option = { id: string name: string scores: { [key: string]: number } } type Criterion = { id: string name: string weight: number } export default function DecisionMatrix() { const [options, setOptions] = useState([]) const [criteria, setCriteria] = useState([]) const [newOptionName, setNewOptionName] = useState('') const [newCriterionName, setNewCriterionName] = useState('') const [newCriterionWeight, setNewCriterionWeight] = useState(1) useEffect(() => { const savedOptions = localStorage.getItem('decisionMatrixOptions') const savedCriteria = localStorage.getItem('decisionMatrixCriteria') if (savedOptions) setOptions(JSON.parse(savedOptions)) if (savedCriteria) setCriteria(JSON.parse(savedCriteria)) }, []) useEffect(() => { localStorage.setItem('decisionMatrixOptions', JSON.stringify(options)) localStorage.setItem('decisionMatrixCriteria', JSON.stringify(criteria)) }, [options, criteria]) const addOption = () => { if (newOptionName) { const newOption: Option = { id: Date.now().toString(), name: newOptionName, scores: {} } setOptions([...options, newOption]) setNewOptionName('') } } const addCriterion = () => { if (newCriterionName) { const newCriterion: Criterion = { id: Date.now().toString(), name: newCriterionName, weight: newCriterionWeight } setCriteria([...criteria, newCriterion]) setNewCriterionName('') setNewCriterionWeight(1) } } const updateScore = (optionId: string, criterionId: string, score: number) => { setOptions(options.map(option => option.id === optionId ? { ...option, scores: { ...option.scores, [criterionId]: score } } : option )) } const calculateTotalScore = (option: Option) => { return criteria.reduce((total, criterion) => { const score = option.scores[criterion.id] || 0 return total + score * criterion.weight }, 0) } const getBestOption = () => { if (options.length === 0 || criteria.length === 0) return null return options.reduce((best, current) => calculateTotalScore(current) > calculateTotalScore(best) ? current : best ) } const bestOption = getBestOption() return (

Decision Matrix

Options

{options.map(option => ( {option.name} {criteria.map(criterion => (

{criterion.name} (Weight: {criterion.weight}) updateScore(option.id, criterion.id, value[0])} max={10} step={1} />

))}

Total Score: {calculateTotalScore(option).toFixed(2)}

))}

{bestOption && (

Best Option

{bestOption.name} (Score: {calculateTotalScore(bestOption).toFixed(2)})

)} ) } [V0_FILE]typescriptreact:file="app/tools/swot-analysis/page.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from 'react' import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd' import { Layout } from '@/components/layout' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" type SWOTItem = { id: string text: string category: 'strengths' | 'weaknesses' | 'opportunities' | 'threats' } const categories = [ { id: 'strengths', title: 'Strengths', color: 'bg-green-100' }, { id: 'weaknesses', title: 'Weaknesses', color: 'bg-red-100' }, { id: 'opportunities', title: 'Opportunities', color: 'bg-blue-100' }, { id: 'threats', title: 'Threats', color: 'bg-yellow-100' }, ] export default function SWOTAnalysis() { const [items, setItems] = useState([]) const [newItemText, setNewItemText] = useState('') const [newItemCategory, setNewItemCategory] = useState('strengths') useEffect(() => { const savedItems = localStorage.getItem('swotAnalysisItems') if (savedItems) setItems(JSON.parse(savedItems)) }, []) useEffect(() => { localStorage.setItem('swotAnalysisItems', JSON.stringify(items)) }, [items]) const addItem = () => { if (newItemText) { const newItem: SWOTItem = { id: Date.now().toString(), text: newItemText, category: newItemCategory, } setItems([...items, newItem]) setNewItemText('') } } const onDragEnd = (result: DropResult) => { if (!result.destination) return const newItems = Array.from(items) const [reorderedItem] = newItems.splice(result.source.index, 1) reorderedItem.category = result.destination.droppableId as SWOTItem['category'] newItems.splice(result.destination.index, 0, reorderedItem) setItems(newItems) } return (

SWOT Analysis

{categories.map(category => ( {(provided, snapshot) => (

{category.title}

{items.filter(item => item.category === category.id).map((item, index) => ( {(provided, snapshot) => (

{item.text}

)} ))} {provided.placeholder}

)} ))}

) } [V0_FILE]typescriptreact:file="app/tools/five-whys/page.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from 'react' import { Layout } from '@/components/layout' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import { motion, AnimatePresence } from 'framer-motion' type Why = { id: string text: string } export default function FiveWhys() { const [whys, setWhys] = useState([]) const [newWhy, setNewWhy] = useState('') useEffect(() => { const savedWhys = localStorage.getItem('fiveWhysItems') if (savedWhys) setWhys(JSON.parse(savedWhys)) }, []) useEffect(() => { localStorage.setItem('fiveWhysItems', JSON.stringify(whys)) }, [whys]) const addWhy = () => { if (newWhy && whys.length < 5) { const newWhyItem: Why = { id: Date.now().toString(), text: newWhy, } setWhys([...whys, newWhyItem]) setNewWhy('') } } const removeWhy = (id: string) => { setWhys(whys.filter(why => why.id !== id)) } return (

Five Whys

Add a new "Why" (max 5)

setNewWhy(e.target.value)} placeholder="Enter your 'why' statement" disabled={whys.length >= 5} />

{whys.map((why, index) => (

Why {index + 1}: {why.text}

))} ) } [V0_FILE]typescriptreact:file="contexts/AuthContext.tsx" isMerged="true" "use client" import React, { createContext, useState, useContext, useEffect } from 'react' type User = { id: string name: string email: string } type AuthContextType = { user: User | null login: (email: string, password: string) => Promise logout: () => void register: (name: string, email: string, password: string) => Promise } const AuthContext = createContext(undefined) export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { const [user, setUser] = useState(null) useEffect(() => { // Check for saved user in localStorage const savedUser = localStorage.getItem('user') if (savedUser) { setUser(JSON.parse(savedUser)) } }, []) const login = async (email: string, password: string) => { // In a real app, you would validate credentials with a backend // For this example, we'll just simulate a successful login const user: User = { id: '1', name: 'John Doe', email } setUser(user) localStorage.setItem('user', JSON.stringify(user)) } const logout = () => { setUser(null) localStorage.removeItem('user') } const register = async (name: string, email: string, password: string) => { // In a real app, you would send this data to a backend // For this example, we'll just simulate a successful registration const user: User = { id: Date.now().toString(), name, email } setUser(user) localStorage.setItem('user', JSON.stringify(user)) } return ( {children} ) } export const useAuth = () => { const context = useContext(AuthContext) if (context === undefined) { throw new Error('useAuth must be used within an AuthProvider') } return context } [V0_FILE]typescriptreact:file="app/login/page.tsx" isMerged="true" "use client" import { useState } from 'react' import { useRouter } from 'next/navigation' import { useAuth } from '@/contexts/AuthContext' import { Header } from '@/components/header' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import Link from 'next/link' export default function Login() { const [email, setEmail] = useState('') const [password, setPassword] = useState('') const { login } = useAuth() const router = useRouter() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() try { await login(email, password) router.push('/dashboard') } catch (error) { console.error('Login failed:', error) } } return (

Login

Don't have an account? Register

) } [V0_FILE]typescriptreact:file="app/register/page.tsx" isMerged="true" "use client" import { useState } from 'react' import { useRouter } from 'next/navigation' import { useAuth } from '@/contexts/AuthContext' import { Header } from '@/components/header' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Label } from '@/components/ui/label' import Link from 'next/link' export default function Register() { const [name, setName] = useState('') const [email, setEmail] = useState('') const [password, setPassword] = useState('') const { register } = useAuth() const router = useRouter() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() try { await register(name, email, password) router.push('/dashboard') } catch (error) { console.error('Registration failed:', error) } } return (

Register

Already have an account? Login

) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from 'react' import { useRouter } from 'next/navigation' import { useAuth } from '@/contexts/AuthContext' import { Layout } from '@/components/layout' import { Button } from '@/components/ui/button' import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card' import Link from 'next/link' import { ArrowRight } from 'lucide-react' import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd' export default function Dashboard() { const { user } = useAuth() const router = useRouter() const [widgets, setWidgets] = useState([ { id: 'quick-tools', title: 'Quick Tools', content: QuickToolsWidget }, { id: 'recent-activity', title: 'Recent Activity', content: RecentActivityWidget }, { id: 'collections', title: 'Your Collections', content: CollectionsWidget }, { id: 'community', title: 'Community Highlights', content: CommunityWidget }, ]) useEffect(() => { if (!user) { router.push('/login') } // Load widget order from localStorage const savedWidgets = localStorage.getItem('dashboardWidgets') if (savedWidgets) { setWidgets(JSON.parse(savedWidgets)) } }, [user, router]) useEffect(() => { // Save widget order to localStorage localStorage.setItem('dashboardWidgets', JSON.stringify(widgets)) }, [widgets]) const onDragEnd = (result) => { if (!result.destination) return const items = Array.from(widgets) const [reorderedItem] = items.splice(result.source.index, 1) items.splice(result.destination.index, 0, reorderedItem) setWidgets(items) } if (!user) { return null } return (

Welcome, {user.name}!

Customize your dashboard by dragging and dropping the widgets below.

{(provided) => (

{widgets.map((widget, index) => ( {(provided) => (

{widget.title}

)} ))} {provided.placeholder}

)} ) } const QuickToolsWidget = () => { const tools = [ { name: 'Decision Matrix', href: '/tools/decision-matrix' }, { name: 'Eisenhower Matrix', href: '/tools/eisenhower-matrix' }, { name: 'SWOT Analysis', href: '/tools/swot-analysis' }, { name: 'Five Whys', href: '/tools/five-whys' }, { name: 'Mind Mapping', href: '/tools/mind-mapping' }, ] return (

{tool.name}

) } const RecentActivityWidget = () => { return (

No recent activity to display.

) } const CollectionsWidget = () => { return ( ) } const CommunityWidget = () => { return ( ) } [V0_FILE]typescriptreact:file="app/models/page.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from 'react' import { Layout } from '@/components/layout' import { Input } from '@/components/ui/input' import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card' import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, } from "@/components/ui/dialog" const mentalModels = [ { id: 1, name: 'Occam\'s Razor', description: 'The simplest explanation is usually the correct one.', category: 'Problem Solving', }, { id: 2, name: 'Confirmation Bias', description: 'The tendency to search for, interpret, favor, and recall information in a way that confirms one\'s preexisting beliefs or hypotheses.', category: 'Cognitive Bias', }, { id: 3, name: 'Pareto Principle', description: 'For many events, roughly 80% of the effects come from 20% of the causes.', category: 'Productivity', }, { id: 4, name: 'First Principles Thinking', description: 'Breaking down complex problems into their most basic, foundational elements.', category: 'Problem Solving', }, { id: 5, name: 'Availability Heuristic', description: 'The tendency to overestimate the likelihood of events with greater "availability" in memory.', category: 'Cognitive Bias', }, { id: 6, name: 'Circle of Competence', description: 'Identifying and operating within one\'s area of expertise.', category: 'Decision Making', }, { id: 7, name: 'Inversion', description: 'Approaching a problem backwards by focusing on avoiding what you don\'t want.', category: 'Problem Solving', }, { id: 8, name: 'Second-Order Thinking', description: 'Considering the long-term consequences of decisions beyond immediate outcomes.', category: 'Decision Making', }, { id: 9, name: 'Hanlon\'s Razor', description: 'Never attribute to malice that which is adequately explained by stupidity.', category: 'Human Behavior', }, { id: 10, name: 'Opportunity Cost', description: 'The loss of potential gain from other alternatives when one alternative is chosen.', category: 'Economics', }, { id: 11, name: 'Anchoring', description: 'The tendency to rely too heavily on the first piece of information offered when making decisions.', category: 'Cognitive Bias', }, { id: 12, name: 'Sunk Cost Fallacy', description: 'The tendency to continue investing in something because of past investments, despite new evidence suggesting it\'s no longer the best course of action.', category: 'Decision Making', }, { id: 13, name: 'Feedback Loops', description: 'A system where the output affects the input, creating a cycle of cause and effect.', category: 'Systems Thinking', }, { id: 14, name: 'Margin of Safety', description: 'The practice of building in a safety factor to account for uncertainty and risk.', category: 'Risk Management', }, { id: 15, name: 'Compound Interest', description: 'The addition of interest to the principal sum of a loan or deposit, resulting in interest on interest.', category: 'Finance', }, { id: 16, name: 'Survivorship Bias', description: 'The logical error of concentrating on people or things that "survived" a process and inadvertently overlooking those that did not.', category: 'Cognitive Bias', }, { id: 17, name: 'Entropy', description: 'The tendency of systems to move from order to disorder over time without the input of energy.', category: 'Physics', }, { id: 18, name: 'Game Theory', description: 'The study of strategic decision-making in competitive situations.', category: 'Strategy', }, { id: 19, name: 'Antifragility', description: 'The property of systems that benefit from shock, volatility, and disorder.', category: 'Systems Thinking', }, { id: 20, name: 'Regression to the Mean', description: 'The phenomenon that extreme events are likely to be followed by more moderate ones.', category: 'Statistics', }, { id: 21, name: 'Dunning-Kruger Effect', description: 'A cognitive bias in which people with limited knowledge or competence in a given intellectual or social domain greatly overestimate their own knowledge or competence in that domain.', category: 'Cognitive Bias', }, { id: 22, name: 'Black Swan Theory', description: 'The theory that rare and unpredictable events beyond the realm of normal expectations have severe consequences.', category: 'Risk Management', }, { id: 23, name: 'Leverage', description: 'The use of borrowed capital to increase the potential return of an investment.', category: 'Finance', }, { id: 24, name: 'Network Effects', description: 'The phenomenon where the value of a product or service increases as more people use it.', category: 'Economics', }, { id: 25, name: 'Falsifiability', description: 'The capacity for a claim, hypothesis, or theory to be proven false.', category: 'Scientific Method', }, ] export default function MentalModelLibrary() { const [searchTerm, setSearchTerm] = useState('') const [selectedModel, setSelectedModel] = useState(null) const handleModelClick = (model: typeof mentalModels[0]) => { setSelectedModel(model) } const filteredModels = mentalModels.filter(model => model.name.toLowerCase().includes(searchTerm.toLowerCase()) || model.description.toLowerCase().includes(searchTerm.toLowerCase()) || model.category.toLowerCase().includes(searchTerm.toLowerCase()) ) return (

Mental Model Library

setSearchTerm(e.target.value)} className="mb-6" />

{filteredModels.map(model => ( handleModelClick(model)} > {model.name} {model.category}

{model.description}

))}

) } [V0_FILE]typescriptreact:file="app/collections/page.tsx" isQuickEdit="true" isMerged="true" "use client" import { useAuth } from '@/contexts/AuthContext' import { Header } from '@/components/header' import { Button } from '@/components/ui/button' import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card' import { useState } from 'react' import { Input } from '@/components/ui/input' import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog' export default function UserCollections() { const { user } = useAuth() // Placeholder data for user collections const [collections, setCollections] = useState([ { id: 1, name: 'Favorite Models', itemCount: 5 }, { id: 2, name: 'Project Brainstorming', itemCount: 3 }, { id: 3, name: 'Learning Resources', itemCount: 7 }, ]) const [newCollectionName, setNewCollectionName] = useState('') const [selectedCollection, setSelectedCollection] = useState(null) const handleCreateCollection = () => { if (newCollectionName) { // In a real app, you would send this to a backend const newCollection = { id: collections.length + 1, name: newCollectionName, itemCount: 0 } setCollections([...collections, newCollection]) setNewCollectionName('') } } const handleViewCollection = (collection: typeof collections[0]) => { setSelectedCollection(collection) } return (

Your Collections

{user ? (

{collections.map(collection => ( {collection.name} {collection.itemCount} items ))} Create New Collection setNewCollectionName(e.target.value)} placeholder="Collection name" className="mb-2" />

) : (

Please log in to view your collections.

)}

) } [V0_FILE]typescriptreact:file="app/community/page.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from 'react' import { Header } from '@/components/header' import { Button } from '@/components/ui/button' import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card' import { Input } from '@/components/ui/input' import { Textarea } from '@/components/ui/textarea' export default function Community() { const [newPost, setNewPost] = useState('') const [posts, setPosts] = useState([ { id: 1, author: 'Alice', content: 'Just used the Decision Matrix for a big project decision. Game changer!', likes: 15, comments: 3 }, { id: 2, author: 'Bob', content: 'Anyone have tips for using the SWOT analysis effectively?', likes: 8, comments: 7 }, { id: 3, author: 'Charlie', content: 'Mind mapping helped me brainstorm my new startup idea. Highly recommend!', likes: 22, comments: 5 }, ]) const [commentText, setCommentText] = useState('') const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Here you would typically send the new post to a backend console.log('New post:', newPost) setNewPost('') } const handleLike = (postId: number) => { setPosts(posts.map(post => post.id === postId ? { ...post, likes: post.likes + 1 } : post )) } const handleComment = (postId: number) => { if (commentText) { setPosts(posts.map(post => post.id === postId ? { ...post, comments: post.comments + 1 } : post )) setCommentText('') // In a real app, you would send this comment to a backend } } return (

Community

setNewPost(e.target.value)}
            placeholder="Share your thoughts..."
            className="mb-2"
          />
          <Button type="submit">Post</Button>
        </form>
        <div className="space-y-4">
          {posts.map(post => (
            <Card key={post.id}>
              <CardHeader>
                <CardTitle>{post.author}</CardTitle>
              </CardHeader>
              <CardContent>
                <p>{post.content}</p>
              </CardContent>
              <CardFooter className="flex flex-col items-start">
                <div className="flex justify-between w-full mb-2">
                  <Button variant="outline" onClick={() => handleLike(post.id)}>Like ({post.likes})</Button>
                  <Button variant="outline" onClick={() => setCommentText('')}>Comment ({post.comments})</Button>
                </div>
                <div className="w-full">
                  <Input
                    value={commentText}
                    onChange={(e) => setCommentText(e.target.value)}
                    placeholder="Write a comment..."
                    className="mb-2"
                  />
                  <Button onClick={() => handleComment(post.id)}>Post Comment</Button>
                </div>
              </CardFooter>
            </Card>
          ))}
        </div>
      </main>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/resources/page.tsx" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from 'react'
import { Header } from '@/components/header'
import { Button } from '@/components/ui/button'
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'
import { Progress } from '@/components/ui/progress'

export default function EducationalResources() {
  const [progress, setProgress] = useState(0)
  const [completedResources, setCompletedResources] = useState<number[]>([])

// Placeholder data for educational resources
  const resources = [
    { id: 1, title: 'Introduction to Mental Models', type: 'Video', duration: '15 min' },
    { id: 2, title: 'Decision Making Techniques', type: 'Article', duration: '10 min read' },
    { id: 3, title: 'Advanced Problem Solving', type: 'Interactive Tutorial', duration: '30 min' },
  ]

const startResource = (resourceId: number) => {
    setProgress(0)
    const interval = setInterval(() => {
      setProgress(prev => {
        if (prev >= 100) {
          clearInterval(interval)
          setCompletedResources(prev => [...prev, resourceId])
          return 100
        }
        return prev + 10
      })
    }, 1000)
  }

return (
    <div className="min-h-screen flex flex-col">
      <Header />
      <main className="flex-grow container mx-auto py-8">
        <h1 className="text-3xl font-bold mb-6">Educational Resources</h1>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {resources.map(resource => (
            <Card key={resource.id}>
              <CardHeader>
                <CardTitle>{resource.title}</CardTitle>
                <CardDescription>{resource.type} - {resource.duration}</CardDescription>
              </CardHeader>
              <CardContent>
                {completedResources.includes(resource.id) ? (
                  <Button disabled>Completed</Button>
                ) : (
                  <Button onClick={() => startResource(resource.id)}>Start Learning</Button>
                )}
                {progress > 0 && resource.id === resources[completedResources.length]?.id && (
                  <Progress value={progress} className="mt-4" />
                )}
              </CardContent>
            </Card>
          ))}
        </div>
      </main>
    </div>
  )
}

[V0_FILE]typescriptreact:file="components/layout.tsx" isMerged="true"
import { Header } from './header'
import { Footer } from './footer'

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen flex flex-col">
      <Header />
      <main className="flex-grow container mx-auto py-8 px-4">
        {children}
      </main>
      <Footer />
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/tools/mind-mapping/components/custom-edge.tsx" isMerged="true"
import { memo } from 'react'
import { EdgeProps, getBezierPath } from 'reactflow'
import { CustomEdgeData } from '../types'

const edgeTypes = {
  default: { color: '#888', width: 1 },
  success: { color: '#10B981', width: 2 },
  error: { color: '#EF4444', width: 2 },
}

function CustomEdgeComponent({
  id,
  sourceX,
  sourceY,
  targetX,
  targetY,
  sourcePosition,
  targetPosition,
  data,
  markerEnd,
}: EdgeProps<CustomEdgeData>) {
  const edgeStyle = edgeTypes[data?.type || 'default']
  const [edgePath] = getBezierPath({
    sourceX,
    sourceY,
    sourcePosition,
    targetX,
    targetY,
    targetPosition,
  })

return (
    <>
      <path
        id={id}
        className="react-flow__edge-path"
        d={edgePath}
        strokeWidth={edgeStyle.width}
        stroke={edgeStyle.color}
        markerEnd={markerEnd}
      />
      {data?.label && (
        <text>
          <textPath
            href={`#${id}`}
            style={{ fontSize: 12 }}
            startOffset="50%"
            textAnchor="middle"
            dominantBaseline="middle"
          >
            {data.label}
          </textPath>
        </text>
      )}
    </>
  )
}

export const CustomEdge = memo(CustomEdgeComponent)

[V0_FILE]markdown:file="mental-models.md" type="markdown" isMerged="true"
# Mental Models: A Comprehensive List

## General Thinking Tools

1. **The Map is Not the Territory**
   The map is not the territory reminds us that our mental models of the world are not the same as the world itself. It cautions against confusing our abstractions and representations with the complex, ever-shifting reality they aim to describe.

2. **Circle of Competence**
   Your circle of competence is your personal sphere of expertise, where your knowledge and skills are concentrated. It's the domain where you have a deep understanding, where your judgments are reliable, and your decisions are sound.

3. **First Principles Thinking**
   First principles thinking is the art of breaking down complex problems into their fundamental truths. It's a way of thinking that goes beyond the surface and allows us to see things from a new perspective.

4. **Thought Experiment**
   Thought experiments are the sandbox of the mind, the place where we can play with ideas without constraints. They're a way of exploring the implications of our theories, of testing the boundaries of our understanding.

5. **Second-Order Thinking**
   Second-order thinking is a method of thinking that goes beyond the surface level, beyond the knee-jerk reactions and short-term gains. It asks us to play the long game, to anticipate the ripple effects of our actions.

6. **Probabilistic Thinking**
   Probabilistic thinking is the art of navigating uncertainty. Successfully thinking in shades of probability means roughly identifying what matters, calculating the odds, checking our assumptions, and then deciding.

7. **Inversion**
   Inversion is not the way we are taught to think. We are taught to identify what we want and explore things that will move us closer to our objective. However, avoiding things that ensure we don't get what we want dramatically increases our odds of success.

8. **Occam's Razor**
   When faced with competing explanations or solutions, Occam's razor suggests that the correct explanation is most likely the simplest one, the one that makes the fewest assumptions.

9. **Hanlon's Razor**
   Hanlon's razor is a mental safeguard against the temptation to label behavior as malicious when incompetence is the most common response. It's a reminder that people are not out to get you, and it's best to assume good faith and resist the urge to assign sinister motives without overwhelming evidence.

## Physics, Chemistry, and Biology

10. **Relativity**
    Relativity is the idea that our perceptions and judgments are not absolute but are shaped by our unique vantage points and frames of reference. It's the understanding that our experiences are subjective.

11. **Reciprocity**
    Reciprocity underlies everything from basic human kindness to the most complex systems of trade. At its core, reciprocity is the simple idea of treating others as they treat us—giving what we get.

12. **Thermodynamics**
    Thermodynamics is the science of energy, heat, and work. It's the set of physical laws that govern how energy moves and changes in the universe.

13. **Inertia**
    Inertia is the stubborn resistance of the universe to change. It's why objects at rest tend to stay at rest, and objects in motion tend to stay in motion.

14. **Friction and Viscosity**
    Friction and viscosity are the sand in the gears of the universe, the invisible hands that slow the motion of all things.

15. **Velocity**
    Velocity is the great differentiator, distinguishing the stagnant from the swift. It's not just about raw speed; direction matters just as much (if not more).

16. **Leverage**
    Leverage is the force multiplier of the world, the principle that allows the small to move the large and the few to influence the many.

17. **Activation Energy**
    Activation energy is the spark that ignites the fire of change, the initial burst of effort required to kick-start a reaction or transformation.

18. **Catalysts**
    Catalysts are the unsung heroes of chemical reactions, the silent partners accelerating change. By decreasing the time required to cause change, they also make reactions possible that might not have occurred otherwise.

19. **Alloying**
    Alloying is the art of mixing elements to create something greater than the sum of its parts. While our intuition tells us that pure substances are best, alloying shows this is not always true.

20. **Evolution: Natural Selection and Extinction**
    Natural selection is the hidden hand that selects the fittest from a never-ending pile of genetic variation, while extinction is the hammer that shatters the unfit and clears the way for variations to arise.

21. **Evolution: Adaptation and The Red Queen Effect**
    The Red Queen effect results from the never-ending arms race between predator and prey, parasite and host, and competitor and competitor. As one species evolves a new adaptation, others evolve countermeasures, leading to a constant escalation.

22. **Ecosystems**
    Nothing exists in isolation. Everything is connected. The ecosystem lens reveals that each species plays its part in a delicate balance of competition and cooperation.

23. **Niches**
    A niche is a special place where a particular species or idea can thrive. It's the ecological equivalent of a custom-fitted suit tailored to its occupant's unique needs and abilities.

24. **Self-Preservation**
    Self-preservation is a core instinct that drives all living things to protect and sustain their own existence.

25. **Replication**
    Replication is the molecular magic trick that allows organisms to make copies of themselves to pass their genetic blueprints from one generation to the next.

26. **Cooperation**
    Cooperation is the surprising secret of success in the ruthless world of survival. If there is any one model that explains humanity, then this is it.

27. **Hierarchical Organization**
    Hierarchy is the invisible scaffolding that organizes the living world.

## Systems

28. **Feedback Loops**
    Feedback loops are the engines of growth and change. They're the mechanisms by which the output of a system influences its own input.

29. **Equilibrium**
    Equilibrium is the state of balance, where opposing forces cancel each other out. It's the calm in the storm's center, the stable point around which the chaos swirls.

30. **Bottlenecks**
    Bottlenecks are the choke points, the narrow parts of the hourglass where everything slows down. They're the constraints that limit the flow, the weakest links in the chain that determine the strength of the whole.

31. **Scale**
    Systems change as they scale up or down; neither is intrinsically better or worse. The right scale depends on your goals and the context.

32. **Margin of Safety**
    Margin of safety is a secret weapon. It's the buffer, the extra capacity, the redundancy that you build into a system to handle unexpected stress.

33. **Churn**
    Churn is the silent killer of businesses. It's the slow leak, the constant drip of customers slipping away, of users drifting off to find something new.

34. **Algorithms**
    Algorithms are recipes. A list of crisp, unambiguous steps that tell you how to get from point A to point B.

35. **Critical Mass**
    Critical mass isn't just a science term; it's a guide for understanding that often things happen slowly and then all at once.

36. **Emergence**
    Nearly everything is an emergent effect—a table, a space shuttle, even  us— combinations of ingredients that come together in a specific way to create something new.

37. **Irreducibility**
    Irreducibility is about essence. It's the idea that some things can't be broken down into smaller parts without losing what makes them tick.

38. **Law of Diminishing Returns**
    Diminishing returns is the idea that the easy wins usually come first. The more you optimize a system, the harder it gets to eke out additional improvements.

## Numeracy

39. **Sampling**
    Sample size is about how much of the world you're looking at. It's the number of data points you're using to draw conclusions.

40. **Randomness**
    Randomness is the chaos that underlies the cosmos. It's the unpredictable, the uncontrollable, the stuff that doesn't follow any discernible pattern.

41. **Regression To The Mean**
    Regression to the mean is the universe's way of saying "not so fast." It's the tendency for extreme outcomes to be followed by more average ones.

42. **Multiply by Zero**
    Multiplying by zero is the mathematical version of the Midas touch in reverse. Everything it touches turns to nothing.

43. **Equivalence**
    Equivalence is the art of making things interchangeable. It's the idea that two things can be swapped out without changing the essence of what they're a part of.

44. **Surface Area**
    Surface area is what determines how much an object interacts with its environment. The more surface area, the more contact.

45. **Global and Local Maxima**
    Global and local maxima as a model can be used differently to help us make the changes we need for success. It encourages us to see achieving our goals not as a steady upward trajectory but as a path full of peaks and valleys.

## Microeconomics

46. **Scarcity**
    Scarcity shapes our choices and drives our actions. When something is scarce, it suddenly becomes valuable.

47. **Supply and Demand**
    Supply and demand are the push and pull determining availability and price. Their dance is never-ending.

48. **Optimization**
    Optimization is about making the most of what you have. It's like cleverly solving a puzzle, finding a trick to skip steps and get to the answer faster.

49. **Trade-offs**
    Life is full of trade-offs. Every choice has a cost. When you say yes to one thing, you say no to others.

50. **Specialization**
    Specialization is a trade-off: pursuing one course means not pursuing another. It's narrowing your focus to broaden your impact.

51. **Interdependence**
    Interdependence is the web that ties us all together. It's the recognition that no person, company, or country is an island.

52. **Efficiency**
    Efficiency is about getting the most done with the least waste. It's not always about finding the perfect answer but the one that works well enough without too much fuss.

53. **Debt**
    Debt is a double-edged sword. It's a powerful tool to help you grow a business, buy a home, or seize an opportunity. But it's also a chain that can bind your future or destroy you.

54. **Monopoly and Competition**
    Monopoly and competition are the yin and yang of the business world. They're the opposing forces that shape the landscape of every market, the tides that lift and sink the fortunes of every firm.

55. **Creative Destruction**
    Creative destruction is the engine of progress in a capitalist economy. It's the process by which new innovations replace old ones, the cycle of birth and death that keeps an economy vibrant.

56. **Gresham's Law**
    Gresham's Law states that bad money drives out good. But it's not just about currency. The principle applies anytime there are two competing versions of something, one perceived as high quality and the other as low quality.

57. **Bubbles**
    Bubbles are a natural by-product of human nature. They happen when collective enthusiasm for an asset runs far ahead of its fundamental value.

## Art

58. **Audience**
    The audience is the invisible participant in every work of art. They are the eyes that see, the ears that hear, the minds that interpret.

59. **Genre**
    Genre is more than just a label; it's a set of conventions, an understanding between the artist and the audience.

60. **Contrast**
    Contrast is the spice of life and art. It's the clash of opposites that energizes a work and jolts our senses.

61. **Framing**
    Framing is the art of context, the craft of shaping perception. It's how we present information, the lens through which we invite others to view the world.

62. **Rhythm**
    Rhythm is the universe's heartbeat, the pulse animating life. From our steady heartbeats to the sun's rise and fall, from crashing waves to swaying trees, rhythm is the pattern underlying existence.

63. **Melody**
    Melody is music's soul, the ethereal thread weaving through sound's tapestry. It's the part of a song that we hum in the shower, the tune that gets stuck in our head and won't let go.

64. **Representation**
    Representation is the mental shorthand we use to navigate the complexities of reality, the symbols and images we use to communicate our thoughts and experiences.

65. **Plot**
    The plot is the story's engine, propelling characters and events through time. It's the sequence of causally connected events that leads from the beginning of a narrative to its resolution.

66. **Character**
    At their core, characters are bundles of traits and motivations, of habits and histories, of strengths and flaws. They are the total of their choices and actions, the product of genetics, choices, and circumstances.

67. **Setting**
    The setting is the stage upon which the drama of the story unfolds, the physical and temporal context that shapes and reflects the actions of characters.

68. **Performance**
    Performance is the art of the ephemeral, the fleeting moment of creative expression existing only in the here and now.

## Military and War

69. **Seeing the Front**
    The importance of firsthand information in decision-making.

70. **Asymmetric Warfare**
    When one side uses different tactics due to resource limitations.

71. **Two-Front War**
    The challenges and strategies of fighting on multiple fronts.

72. **Counterinsurgency**
    Strategies developed to combat asymmetric warfare.

73. **Mutually Assured Destruction**
    The paradox where increased strength can lead to decreased likelihood of conflict.

## Human Nature and Judgment

74. **Trust**
    Fundamentally, the modern world operates on trust. A trusting system is one that tends to work most efficiently; the rewards of trust are extremely high.

75. **Bias from Incentives**
    Humans are highly responsive to incentives, which causes us to distort our thinking when it is in our own interest to do so.

76. **Pavlovian Association**
    Human beings can respond not just to direct incentives but also to associated objects, with emotions coming from past associations rather than direct effects.

77. **Tendency to Feel Envy & Jealousy**
    Humans have a tendency to feel envious of those receiving more than they are, and a desire "get what is theirs" in due course.

78. **Tendency to Distort Due to Liking/Loving or Disliking/Hating**
    Humans have a tendency to distort their thinking in favor of people or things that they like and against people or things they dislike.

79. **Denial**
    Denying reality can be a coping mechanism, a survival mechanism, or a purposeful tactic.

80. **Availability Heuristic**
    We tend to most easily recall what is salient, important, frequent, and recent.

81. **Representativeness Heuristic**
    This includes the failure to account for base rates, tendency to stereotype, and failure to see false conjunctions.

82. **Social Proof (Safety in Numbers)**
    We have a DNA-level instinct to seek safety in numbers and will look for social guidance of our behavior.

83. **Narrative Instinct**
    Human beings have been appropriately called "the storytelling animal" because of our instinct to construct and seek meaning in narrative.

84. **Curiosity Instinct**
    We are the most curious of all species, an instinct which led us out of the savanna and led us to learn a great deal about the world around us.

85. **Language Instinct**
    We have a DNA-level instinct to learn grammatically constructed language.

86. **First-Conclusion Bias**
    The mind works a bit like a sperm and egg: the first idea gets in and then the mind shuts.

87. **Tendency to Overgeneralize from Small Samples**
    We take a small number of instances and create a general category, even if we have no statistically sound basis for the conclusion.

88. **Relative Satisfaction/Misery Tendencies**
    Our happiness is often related to our state relative to either our past or our peers, not absolute conditions.

89. **Commitment & Consistency Bias**
    Humans are subject to a bias towards keeping their prior commitments and staying consistent with our prior selves when possible.

90. **Hindsight Bias**
    Once we know the outcome, it's nearly impossible to turn back the clock mentally. We tend to reason that we knew it all along.

91. **Sensitivity to Fairness**
    We are careful arbiters of what is fair. Violations of fairness can be considered grounds for reciprocal action, or at least distrust.

92. **Tendency to Overestimate Consistency of Behavior (Fundamental Attribution Error)**
    We tend to over-ascribe the behavior of others to their innate traits rather than to situational factors, leading us to overestimate how consistent that behavior will be in the future.

93. **Influence of Stress (Including Breaking Points)**
    Stress causes both mental and physiological responses and tends to amplify other biases.

94. **Survivorship Bias**
    We over-attribute success to things done by the successful agent rather than to randomness or luck, and we often learn false lessons by exclusively studying victors without seeing all of the accompanying losers.

95. **Tendency to Want to Do Something**
    Most humans have the tendency to need to act, even when their actions are not needed. We also tend to offer solutions even when we do not have knowledge to solve the problem.

96. **Falsification / Confirmation Bias**
    We tend to look for confirmations of long-held wisdom rather than violations. What we believe is what we choose to see.

These mental models provide a framework for understanding human behavior, decision-making processes, and complex systems across various domains. By mastering these models, we can improve our critical thinking and problem-solving skills, leading to better decisions in both personal and professional contexts.

[V0_FILE]typescriptreact:file="app/tools/eisenhower-matrix/types.ts" isMerged="true"
export type Task = {
  id: string
  text: string
  quadrant: 'urgent-important' | 'not-urgent-important' | 'urgent-not-important' | 'not-urgent-not-important'
  content: string
  checklist: { id: string; text: string; completed: boolean }[]
  attachments: { id: string; type: 'image' | 'audio'; url: string }[]
  drawing: string
  links: string[]
  labels: string[]
  color: string
}

[V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" isQuickEdit="true" isMerged="true"
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
	],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        "toggle-bg": "hsl(var(--toggle-bg))",
        "toggle-border": "hsl(var(--toggle-border))",
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
        "gradient-x": {
          "0%, 100%": {
            "background-size": "200% 200%",
            "background-position": "left center",
          },
          "50%": {
            "background-size": "200% 200%",
            "background-position": "right center",
          },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
        "gradient-x": "gradient-x 15s ease infinite",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}

[V0_FILE]typescriptreact:file="styles/globals.css" isEdit="true" isQuickEdit="true" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
  :root {
    --background: 210 40% 98%;
    --foreground: 222 47% 11%;
  
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;

--popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;

--primary: 222 47% 11%;
    --primary-foreground: 210 40% 98%;

--secondary: 210 40% 96.1%;
    --secondary-foreground: 222 47% 11%;

--muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

--accent: 210 40% 96.1%;
    --accent-foreground: 222 47% 11%;

--destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

--border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222 47% 11%;

--radius: 0.5rem;

--toggle-bg: 210 40% 98%;
    --toggle-border: 214.3 31.8% 91.4%;
  }
 
  .dark {
    --background: 222 47% 11%;
    --foreground: 210 40% 98%;

--card: 222 47% 11%;
    --card-foreground: 210 40% 98%;

--popover: 222 47% 11%;
    --popover-foreground: 210 40% 98%;

--primary: 210 40% 98%;
    --primary-foreground: 222 47% 11%;

--secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

--muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

--accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

--destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

--border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;

--toggle-bg: 222 47% 11%;
    --toggle-border: 217.2 32.6% 17.5%;
  }
}
 
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

.gradient-bg {
  @apply bg-gradient-to-br from-blue-100 to-purple-200;
}

.gradient-text {
  @apply text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600;
}

.gradient-border {
  @apply border-4 border-transparent bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-border;
}

.animate-in {
  animation: animateIn 0.3s ease-in-out;
}

@keyframes animateIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-hover-effect {
  transition: all 0.3s ease-in-out;
}

.card-hover-effect:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card-hover-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, #3b82f6, #8b5cf6);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  z-index: -1;
}

.card-hover-effect:hover::before {
  opacity: 0.1;
}

.animate-in {
  animation: animateIn 0.3s ease-in-out;
}

@keyframes animateIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Button } from '@/components/ui/button'
import { useAuth } from '@/contexts/AuthContext'
import { Menu, Moon, Sun } from 'lucide-react'
import { useTheme } from 'next-themes'
import {
  Sheet,
  SheetContent,
  SheetTrigger,
} from "@/components/ui/sheet"

const ThemeToggle = () => {
  const { theme, setTheme } = useTheme()

return (
    <Button
      variant="outline"
      size="icon"
      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
      className="w-10 h-10 rounded-full bg-toggle-bg border-2 border-toggle-border transition-colors duration-200"
    >
      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
      <span className="sr-only">Toggle theme</span>
    </Button>
  )
}

export function Header() {
  const { user, logout } = useAuth()
  const pathname = usePathname()
  const { theme, setTheme } = useTheme()

const isActive = (path: string) => pathname === path

const NavItems = () => (
    <>
      <li>
        <Link href="/dashboard" className={`hover:text-blue-700 ${isActive('/dashboard') ? 'font-bold text-blue-700' : 'text-gray-700'}`}>
          Dashboard
        </Link>
      </li>
      <li>
        <Link href="/models" className={`hover:text-blue-700 ${isActive('/models') ? 'font-bold text-blue-700' : 'text-gray-700'}`}>
          Models
        </Link>
      </li>
      <li>
        <Link href="/tools" className={`hover:text-blue-700 ${isActive('/tools') ? 'font-bold text-blue-700' : 'text-gray-700'}`}>
          Tools
        </Link>
      </li>
      <li>
        <Link href="/collections" className={`hover:text-blue-700 ${isActive('/collections') ? 'font-bold text-blue-700' : 'text-gray-700'}`}>
          Collections
        </Link>
      </li>
      <li>
        <Link href="/community" className={`hover:text-blue-700 ${isActive('/community') ? 'font-bold text-blue-700' : 'text-gray-700'}`}>
          Community
        </Link>
      </li>
      <li>
        <Link href="/resources" className={`hover:text-blue-700 ${isActive('/resources') ? 'font-bold text-blue-700' : 'text-gray-700'}`}>
          Resources
        </Link>
      </li>
    </>
  )

return (
    <header className="bg-white shadow-md">
      <div className="container mx-auto flex justify-between items-center px-4 py-4">
        <Link href="/" className="text-2xl font-bold gradient-text">
          MindToolKit
        </Link>
        <nav className="hidden md:block">
          <ul className="flex space-x-4 items-center">
            <NavItems />
            {user ? (
              <li>
                <Button variant="outline" onClick={logout} className="text-blue-600 border-blue-600 hover:bg-blue-600 hover:text-white">Logout</Button>
              </li>
            ) : (
              <>
                <li>
                  <Link href="/login">
                    <Button variant="outline" className="text-blue-600 border-blue-600 hover:bg-blue-600 hover:text-white">Login</Button>
                  </Link>
                </li>
                <li>
                  <Link href="/register">
                    <Button variant="outline" className="text-blue-600 border-blue-600 hover:bg-blue-600 hover:text-white">Register</Button>
                  </Link>
                </li>
              </>
            )}
            <li>
              <ThemeToggle />
            </li>
          </ul>
        </nav>
        <Sheet>
          <SheetTrigger asChild>
            <Button variant="outline" size="icon" className="md:hidden text-blue-600 border-blue-600 hover:bg-blue-600 hover:text-white">
              <Menu className="h-6 w-6" />
              <span className="sr-only">Toggle menu</span>
            </Button>
          </SheetTrigger>
          <SheetContent side="right">
            <nav className="flex flex-col space-y-4 mt-8">
              <NavItems />
              {user ? (
                <Button variant="outline" onClick={logout} className="text-blue-600 border-blue-600 hover:bg-blue-600 hover:text-white w-full">Logout</Button>
              ) : (
                <>
                  <Link href="/login">
                    <Button variant="outline" className="text-blue-600 border-blue-600 hover:bg-blue-600 hover:text-white w-full">Login</Button>
                  </Link>
                  <Link href="/register">
                    <Button variant="outline" className="text-blue-600 border-blue-600 hover:bg-blue-600 hover:text-white w-full">Register</Button>
                  </Link>
                </>
              )}
              <ThemeToggle />
            </nav>
          </SheetContent>
        </Sheet>
      </div>
    </header>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Layout } from '@/components/layout'
import { Button } from '@/components/ui/button'
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'
import Link from 'next/link'

export default function Home() {
  return (
    <Layout>
      <section className="text-center mb-12 py-20 px-4">
        <div className="max-w-4xl mx-auto">
          <h1 className="text-5xl font-bold mb-6 animate-in">
            Welcome to <span className="gradient-text animate-gradient-x">MindToolKit</span>
          </h1>
          <p className="text-xl mb-8 text-gray-700 dark:text-gray-300 animate-in" style={{animationDelay: '0.1s'}}>
            Enhance your critical thinking and decision-making skills with our interactive tools and comprehensive resources.
          </p>
          <div className="flex justify-center space-x-4 animate-in" style={{animationDelay: '0.2s'}}>
            <Button asChild className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full transition-all duration-200 hover:shadow-lg">
              <Link href="/register">Get Started</Link>
            </Button>
            <Button asChild variant="outline" className="text-blue-600 border-blue-600 hover:bg-blue-600 hover:text-white px-8 py-3 rounded-full transition-all duration-200">
              <Link href="/login">Login</Link>
            </Button>
          </div>
        </div>
      </section>
      
      <section className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        {[
          { title: "Mental Models", description: "Explore a curated collection of mental models", link: "/models" },
          { title: "Interactive Tools", description: "Apply mental models with our interactive tools", link: "/tools" },
          { title: "Community", description: "Join discussions and share insights", link: "/community" },
          { title: "Collections", description: "Create and manage your personal collections", link: "/collections" },
          { title: "Educational Resources", description: "Access tutorials and learning materials", link: "/resources" },
          { title: "Dashboard", description: "Access your personalized dashboard", link: "/dashboard" },
        ].map((item, index) => (
          <Card key={item.title} className="bg-white dark:bg-gray-800 shadow-md relative overflow-hidden card-hover-effect">
            <CardHeader>
              <CardTitle className="text-gray-900 dark:text-gray-100">{item.title}</CardTitle>
              <CardDescription className="text-gray-600 dark:text-gray-400">{item.description}</CardDescription>
            </CardHeader>
            <CardContent>
              <Button variant="outline" asChild className="w-full text-blue-600 border-blue-600 hover:bg-blue-600 hover:text-white transition-all duration-200">
                <Link href={item.link}>Explore {item.title}</Link>
              </Button>
            </CardContent>
          </Card>
        ))}
      </section>
    </Layout>
  )
}

[V0_FILE]typescriptreact:file="components/footer.tsx" isQuickEdit="true" isMerged="true"
export function Footer() {
  return (
    <footer className="bg-white shadow-md py-4 mt-12">
      <div className="container mx-auto text-center text-gray-600">
        <p>© {new Date().getFullYear()} MindToolKit. All rights reserved.</p>
      </div>
    </footer>
  )
}

[V0_FILE]typescriptreact:file="app/tools/eisenhower-matrix/page.tsx" isMerged="true"
"use client"

import { useState, useEffect } from 'react'
import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd'
import { Layout } from '@/components/layout'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { TaskItem } from './components/task-item'
import { Task } from './types'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const quadrants = [
  { id: 'urgent-important', title: 'Urgent & Important', color: 'bg-red-100 dark:bg-red-900' },
  { id: 'not-urgent-important', title: 'Not Urgent & Important', color: 'bg-blue-100 dark:bg-blue-900' },
  { id: 'urgent-not-important', title: 'Urgent & Not Important', color: 'bg-yellow-100 dark:bg-yellow-900' },
  { id: 'not-urgent-not-important', title: 'Not Urgent & Not Important', color: 'bg-green-100 dark:bg-green-900' },
]

export default function EisenhowerMatrix() {
  const [tasks, setTasks] = useState<Task[]>([])
  const [newTask, setNewTask] = useState<Task>({
    id: '',
    text: '',
    quadrant: 'urgent-important',
    content: '',
    checklist: [],
    attachments: [],
    drawing: '',
    links: [],
    labels: [],
    color: '',
  })
  const [isDialogOpen, setIsDialogOpen] = useState(false)

useEffect(() => {
    const savedTasks = localStorage.getItem('eisenhowerMatrixTasks')
    if (savedTasks) setTasks(JSON.parse(savedTasks))
  }, [])

useEffect(() => {
    localStorage.setItem('eisenhowerMatrixTasks', JSON.stringify(tasks))
  }, [tasks])

const addTask = () => {
    if (newTask.text) {
      const taskToAdd: Task = {
        ...newTask,
        id: Date.now().toString(),
      }
      setTasks([...tasks, taskToAdd])
      setNewTask({
        id: '',
        text: '',
        quadrant: 'urgent-important',
        content: '',
        checklist: [],
        attachments: [],
        drawing: '',
        links: [],
        labels: [],
        color: '',
      })
      setIsDialogOpen(false)
    }
  }

const updateTask = (updatedTask: Task) => {
    setTasks(tasks.map(task => task.id === updatedTask.id ? updatedTask : task))
  }

const deleteTask = (taskId: string) => {
    setTasks(tasks.filter(task => task.id !== taskId))
  }

const onDragEnd = (result: DropResult) => {
    if (!result.destination) return

const { source, destination } = result
    const updatedTasks = Array.from(tasks)
    const [reorderedTask] = updatedTasks.splice(tasks.findIndex(task => task.id === result.draggableId), 1)
    
    reorderedTask.quadrant = destination.droppableId as Task['quadrant']
    updatedTasks.splice(destination.index, 0, reorderedTask)

setTasks(updatedTasks)
  }

return (
    <Layout>
      <h1 className="text-3xl font-bold mb-6 gradient-text">Eisenhower Matrix</h1>

<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogTrigger asChild>
          <Button className="mb-6">Add Task</Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>Add New Task</DialogTitle>
            <DialogDescription>Enter the task details and select its quadrant.</DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <Input 
              value={newTask.text} 
              onChange={(e) => setNewTask({ ...newTask, text: e.target.value })}
              placeholder="Task title"
            />
            <Textarea 
              value={newTask.content} 
              onChange={(e) => setNewTask({ ...newTask, content: e.target.value })}
              placeholder="Task content"
            />
            <Select value={newTask.quadrant} onValueChange={(value: Task['quadrant']) => setNewTask({ ...newTask, quadrant: value })}>
              <SelectTrigger>
                <SelectValue placeholder="Select quadrant" />
              </SelectTrigger>
              <SelectContent>
                {quadrants.map(quadrant => (
                  <SelectItem key={quadrant.id} value={quadrant.id}>{quadrant.title}</SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <DialogFooter>
            <Button onClick={addTask}>Add Task</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

<DragDropContext onDragEnd={onDragEnd}>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {quadrants.map(quadrant => (
            <Droppable key={quadrant.id} droppableId={quadrant.id}>
              {(provided, snapshot) => (
                <div
                  ref={provided.innerRef}
                  {...provided.droppableProps}
                  className={`p-4 rounded-lg ${quadrant.color} ${snapshot.isDraggingOver ? 'ring-2 ring-primary' : ''} min-h-[200px]`}
                >
                  <h3 className="font-bold mb-4 text-lg">{quadrant.title}</h3>
                  {tasks
                    .filter(task => task.quadrant === quadrant.id)
                    .map((task, index) => (
                      <TaskItem
                        key={task.id}
                        task={task}
                        index={index}
                        onUpdate={updateTask}
                        onDelete={deleteTask}
                      />
                    ))}
                  {provided.placeholder}
                </div>
              )}
            </Droppable>
          ))}
        </div>
      </DragDropContext>
    </Layout>
  )
}

[V0_FILE]typescriptreact:file="app/tools/eisenhower-matrix/components/task-item.tsx" isMerged="true"
import { useState } from 'react'
import { Draggable } from 'react-beautiful-dnd'
import { Task } from '../types'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Textarea } from '@/components/ui/textarea'
import { Checkbox } from '@/components/ui/checkbox'
import { Label } from '@/components/ui/label'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'

type TaskItemProps = {
  task: Task
  index: number
  onUpdate: (updatedTask: Task) => void
  onDelete: (taskId: string) => void
}

export function TaskItem({ task, index, onUpdate, onDelete }: TaskItemProps) {
  const [isEditing, setIsEditing] = useState(false)
  const [editedTask, setEditedTask] = useState(task)

const handleUpdate = () => {
    onUpdate(editedTask)
    setIsEditing(false)
  }

return (
    <Draggable draggableId={task.id} index={index}>
      {(provided) => (
        <div
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow mb-4 cursor-move"
        >
          <h3 className="font-bold mb-2 text-base">{task.text}</h3>
          <p className="text-sm mb-2 text-gray-600 dark:text-gray-400">{task.content}</p>
          
          {task.checklist.length > 0 && (
            <div className="mb-2">
              <h4 className="font-semibold text-sm">Checklist:</h4>
              {task.checklist.map(item => (
                <div key={item.id} className="flex items-center">
                  <Checkbox id={item.id} checked={item.completed} />
                  <Label htmlFor={item.id} className="ml-2 text-sm">{item.text}</Label>
                </div>
              ))}
            </div>
          )}

<div className="flex justify-end space-x-2 mt-2">
            <Dialog>
              <DialogTrigger asChild>
                <Button variant="outline" size="sm">Edit</Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>Edit Task</DialogTitle>
                </DialogHeader>
                <div className="grid gap-4 py-4">
                  <Input
                    value={editedTask.text}
                    onChange={(e) => setEditedTask({ ...editedTask, text: e.target.value })}
                    placeholder="Task title"
                  />
                  <Textarea
                    value={editedTask.content}
                    onChange={(e) => setEditedTask({ ...editedTask, content: e.target.value })}
                    placeholder="Task content"
                  />
                </div>
                <Button onClick={handleUpdate}>Save Changes</Button>
              </DialogContent>
            </Dialog>
            <Button variant="destructive" size="sm" onClick={() => onDelete(task.id)}>Delete</Button>
          </div>
        </div>
      )}
    </Draggable>
  )
}

[V0_FILE]typescriptreact:file="app/tools/mind-mapping/page.tsx" isDeleted="true" isEdit="true"
...deleted...

[V0_FILE]typescriptreact:file="app/tools/mind-mapping/components/custom-node.tsx" isDeleted="true" isEdit="true"
...deleted...

[V0_FILE]typescriptreact:file="app/tools/mind-mapping/components/smart-edge.tsx" isDeleted="true" isEdit="true"
...deleted...

[V0_FILE]typescriptreact:file="app/tools/mind-mapping/types.ts" isDeleted="true" isEdit="true"
...deleted...

[V0_FILE]typescriptreact:file="app/tools/page.tsx" isEdit="true" isQuickEdit="true"
import { Layout } from '@/components/layout'
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'
import Link from 'next/link'

const tools = [
  { id: 'decision-matrix', name: 'Decision Matrix', description: 'Evaluate and compare options based on multiple criteria.' },
  { id: 'eisenhower-matrix', name: 'Eisenhower Matrix', description: 'Prioritize tasks based on urgency and importance.' },
  { id: 'swot-analysis', name: 'SWOT Analysis', description: 'Identify Strengths, Weaknesses, Opportunities, and Threats.' },
  { id: 'five-whys', name: 'Five Whys', description: 'Determine the root cause of a problem by asking "Why?" five times.' },
  // { id: 'mind-mapping', name: 'Mind Mapping', description: 'Visually organize information and explore connections between ideas.' },
]

export default function Tools() {
  return (
    <Layout>
      <h1 className="text-3xl font-bold mb-6 gradient-text">Tools</h1>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {tools.map(tool => (
          <Card key={tool.id}>
            <CardHeader>
              <CardTitle className="gradient-text">{tool.name}</CardTitle>
              <CardDescription>{tool.description}</CardDescription>
            </CardHeader>
            <CardContent>
              <Link href={`/tools/${tool.id}`} className="text-blue-600 hover:text-blue-800 hover:underline">
                Use this tool
              </Link>
            </CardContent>
          </Card>
        ))}
      </div>
    </Layout>
  )
}
</article></body></html>

About

About