Scribd
Upload
10 views

bullet-journal-app.tsx

Uploaded by

Nadia Van Lancker
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
10 views

bullet-journal-app.tsx

Uploaded by

Nadia Van Lancker
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

import React, { useState } from 'react';

import { Calendar, Milestone, Book, Smile, DollarSign, Utensils, ListTodo, Award }


from 'lucide-react';

// Mood Tracker Component


const MoodTracker = () => {
const [selectedMood, setSelectedMood] = useState(null);
const moods = [
{ emoji: '😊', label: 'Happy' },
{ emoji: '😢', label: 'Sad' },
{ emoji: '😴', label: 'Tired' },
{ emoji: '😠', label: 'Angry' },
{ emoji: '🤔', label: 'Contemplative' }
];

return (
<div className="p-4 bg-white rounded-lg shadow-md">
<h2 className="text-xl font-bold mb-4 flex items-center">
<Smile className="mr-2 text-purple-500" /> Mood Tracker
</h2>
<div className="flex justify-between">
{moods.map((mood) => (
<button
key={mood.label}
onClick={() => setSelectedMood(mood)}
className={`text-4xl p-2 rounded-full transition-all ${
selectedMood?.label === mood.label
? 'bg-purple-100 scale-110'
: 'hover:bg-purple-50'
}`}
>
{mood.emoji}
</button>
))}
</div>
{selectedMood && (
<p className="mt-4 text-center">
Today you feel: {selectedMood.label}
</p>
)}
</div>
);
};

// Meal Planner Component


const MealPlanner = () => {
const [meals, setMeals] = useState([
{ day: 'Monday', breakfast: '', lunch: '', dinner: '' },
{ day: 'Tuesday', breakfast: '', lunch: '', dinner: '' },
// More days...
]);

const updateMeal = (day, mealType, value) => {


const updatedMeals = meals.map(meal =>
meal.day === day ? { ...meal, [mealType]: value } : meal
);
setMeals(updatedMeals);
};
return (
<div className="p-4 bg-white rounded-lg shadow-md">
<h2 className="text-xl font-bold mb-4 flex items-center">
<Utensils className="mr-2 text-green-500" /> Meal Planner
</h2>
{meals.map((meal) => (
<div key={meal.day} className="mb-4">
<h3 className="font-semibold">{meal.day}</h3>
<div className="grid grid-cols-3 gap-2">
<input
placeholder="Breakfast"
value={meal.breakfast}
onChange={(e) => updateMeal(meal.day, 'breakfast', e.target.value)}
className="border p-1 rounded"
/>
<input
placeholder="Lunch"
value={meal.lunch}
onChange={(e) => updateMeal(meal.day, 'lunch', e.target.value)}
className="border p-1 rounded"
/>
<input
placeholder="Dinner"
value={meal.dinner}
onChange={(e) => updateMeal(meal.day, 'dinner', e.target.value)}
className="border p-1 rounded"
/>
</div>
</div>
))}
</div>
);
};

// Diary Component
const Diary = () => {
const [entry, setEntry] = useState('');
const [entries, setEntries] = useState([]);

const addEntry = () => {


if (entry.trim()) {
setEntries([
{ date: new Date().toLocaleDateString(), text: entry },
...entries
]);
setEntry('');
}
};

return (
<div className="p-4 bg-white rounded-lg shadow-md">
<h2 className="text-xl font-bold mb-4 flex items-center">
<Book className="mr-2 text-blue-500" /> Diary
</h2>
<textarea
value={entry}
onChange={(e) => setEntry(e.target.value)}
placeholder="Write your thoughts..."
className="w-full h-32 border p-2 rounded mb-4"
/>
<button
onClick={addEntry}
className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
>
Save Entry
</button>
<div className="mt-4 max-h-48 overflow-y-auto">
{entries.map((entry, index) => (
<div key={index} className="border-b py-2">
<p className="text-sm text-gray-500">{entry.date}</p>
<p>{entry.text}</p>
</div>
))}
</div>
</div>
);
};

// Money Tracker Component


const MoneyTracker = () => {
const [transactions, setTransactions] = useState([]);
const [amount, setAmount] = useState('');
const [type, setType] = useState('expense');
const [category, setCategory] = useState('');

const addTransaction = () => {


if (amount && category) {
setTransactions([
{
date: new Date().toLocaleDateString(),
amount: parseFloat(amount),
type,
category
},
...transactions
]);
setAmount('');
setCategory('');
}
};

const calculateTotal = () => {


return transactions.reduce((total, transaction) =>
transaction.type === 'income'
? total + transaction.amount
: total - transaction.amount, 0);
};

return (
<div className="p-4 bg-white rounded-lg shadow-md">
<h2 className="text-xl font-bold mb-4 flex items-center">
<DollarSign className="mr-2 text-green-600" /> Money Tracker
</h2>
<div className="grid grid-cols-2 gap-2 mb-4">
<select
value={type}
onChange={(e) => setType(e.target.value)}
className="border p-2 rounded"
>
<option value="expense">Expense</option>
<option value="income">Income</option>
</select>
<input
type="number"
value={amount}
onChange={(e) => setAmount(e.target.value)}
placeholder="Amount"
className="border p-2 rounded"
/>
<input
value={category}
onChange={(e) => setCategory(e.target.value)}
placeholder="Category"
className="border p-2 rounded col-span-2"
/>
<button
onClick={addTransaction}
className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600
col-span-2"
>
Add Transaction
</button>
</div>
<div>
<h3 className="font-bold">Total Balance:
${calculateTotal().toFixed(2)}</h3>
<div className="max-h-48 overflow-y-auto">
{transactions.map((transaction, index) => (
<div
key={index}
className={`border-b py-2 ${
transaction.type === 'income' ? 'text-green-600' : 'text-red-600'
}`}
>
<p>{transaction.date} - {transaction.category}: $
{transaction.amount}</p>
</div>
))}
</div>
</div>
</div>
);
};

// Weekly Overview Component


const WeeklyOverview = () => {
const [tasks, setTasks] = useState([
{ day: 'Monday', tasks: [] },
{ day: 'Tuesday', tasks: [] },
{ day: 'Wednesday', tasks: [] },
{ day: 'Thursday', tasks: [] },
{ day: 'Friday', tasks: [] },
{ day: 'Saturday', tasks: [] },
{ day: 'Sunday', tasks: [] },
]);

const addTask = (day, task) => {


const updatedTasks = tasks.map(dayObj =>
dayObj.day === day
? { ...dayObj, tasks: [...dayObj.tasks, task] }
: dayObj
);
setTasks(updatedTasks);
};

return (
<div className="p-4 bg-white rounded-lg shadow-md">
<h2 className="text-xl font-bold mb-4 flex items-center">
<Calendar className="mr-2 text-orange-500" /> Weekly Overview
</h2>
{tasks.map((dayObj) => (
<div key={dayObj.day} className="mb-4">
<h3 className="font-semibold">{dayObj.day}</h3>
<div className="flex mb-2">
<input
placeholder="Add task"
onKeyPress={(e) => {
if (e.key === 'Enter' && e.target.value.trim()) {
addTask(dayObj.day, e.target.value.trim());
e.target.value = '';
}
}}
className="border p-1 rounded flex-grow mr-2"
/>
</div>
{dayObj.tasks.map((task, index) => (
<div key={index} className="flex items-center">
<input
type="checkbox"
className="mr-2"
/>
<span>{task}</span>
</div>
))}
</div>
))}
</div>
);
};

// Main Bullet Journal App


const BulletJournalApp = () => {
return (
<div className="min-h-screen bg-gray-100 p-6">
<h1 className="text-3xl font-bold mb-6 text-center">My Bullet Journal</h1>
<div className="grid grid-cols-2 gap-6">
<MoodTracker />
<MealPlanner />
<Diary />
<MoneyTracker />
<WeeklyOverview />
</div>
</div>
);
};
export default BulletJournalApp;

You might also like