style: format code for improved readability and consistency across multiple files
This commit is contained in:
+66
-26
@@ -4,7 +4,13 @@ import { useState } from "react";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { useLiveQuery } from "dexie-react-hooks";
|
||||
import { db } from "@/lib/db";
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardDescription,
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
@@ -14,7 +20,7 @@ export default function TasksPage() {
|
||||
const [title, setTitle] = useState("");
|
||||
|
||||
const tasks = useLiveQuery(
|
||||
() => db.tasks.toArray() // Şimdilik hepsini çekiyoruz, sıralama yapılabilir
|
||||
() => db.tasks.toArray(), // Şimdilik hepsini çekiyoruz, sıralama yapılabilir
|
||||
);
|
||||
|
||||
const handleAddTask = async (e: React.FormEvent) => {
|
||||
@@ -48,14 +54,18 @@ export default function TasksPage() {
|
||||
await db.tasks.delete(id);
|
||||
};
|
||||
|
||||
const pendingTasks = tasks?.filter(t => t.status === "todo") || [];
|
||||
const completedTasks = tasks?.filter(t => t.status === "completed") || [];
|
||||
const pendingTasks = tasks?.filter((t) => t.status === "todo") || [];
|
||||
const completedTasks = tasks?.filter((t) => t.status === "completed") || [];
|
||||
|
||||
return (
|
||||
<div className="space-y-6 max-w-4xl mx-auto animate-in fade-in slide-in-from-bottom-4 duration-500">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Görevler & Planlar</h1>
|
||||
<p className="text-muted-foreground">Kişisel hedeflerin ve YZ tarafından önerilen aksiyonlar.</p>
|
||||
<h1 className="text-3xl font-bold tracking-tight">
|
||||
Görevler & Planlar
|
||||
</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Kişisel hedeflerin ve YZ tarafından önerilen aksiyonlar.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
@@ -65,8 +75,8 @@ export default function TasksPage() {
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleAddTask} className="flex gap-2">
|
||||
<Input
|
||||
placeholder="Örn: 15 dakika yürüyüş yap..."
|
||||
<Input
|
||||
placeholder="Örn: 15 dakika yürüyüş yap..."
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
className="flex-1"
|
||||
@@ -80,21 +90,36 @@ export default function TasksPage() {
|
||||
{/* Yapılacaklar */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-xl font-semibold flex items-center gap-2">
|
||||
Yapılacaklar <span className="text-sm px-2 py-0.5 rounded-full bg-primary/20 text-primary">{pendingTasks.length}</span>
|
||||
Yapılacaklar{" "}
|
||||
<span className="text-sm px-2 py-0.5 rounded-full bg-primary/20 text-primary">
|
||||
{pendingTasks.length}
|
||||
</span>
|
||||
</h2>
|
||||
<div className="space-y-2">
|
||||
{pendingTasks.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">Bekleyen görev yok.</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Bekleyen görev yok.
|
||||
</p>
|
||||
) : (
|
||||
pendingTasks.map(task => (
|
||||
<div key={task.id} className="flex items-center gap-3 p-3 rounded-lg border bg-card shadow-sm group transition-all hover:border-primary/50">
|
||||
<Checkbox
|
||||
checked={false}
|
||||
onCheckedChange={() => toggleTaskStatus(task.id, task.status)}
|
||||
pendingTasks.map((task) => (
|
||||
<div
|
||||
key={task.id}
|
||||
className="flex items-center gap-3 p-3 rounded-lg border bg-card shadow-sm group transition-all hover:border-primary/50"
|
||||
>
|
||||
<Checkbox
|
||||
checked={false}
|
||||
onCheckedChange={() =>
|
||||
toggleTaskStatus(task.id, task.status)
|
||||
}
|
||||
className="w-5 h-5"
|
||||
/>
|
||||
<span className="flex-1 text-sm font-medium">{task.title}</span>
|
||||
<button onClick={() => deleteTask(task.id)} className="opacity-0 group-hover:opacity-100 p-1.5 text-muted-foreground hover:text-red-500 transition-all rounded-md hover:bg-red-500/10">
|
||||
<span className="flex-1 text-sm font-medium">
|
||||
{task.title}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => deleteTask(task.id)}
|
||||
className="opacity-0 group-hover:opacity-100 p-1.5 text-muted-foreground hover:text-red-500 transition-all rounded-md hover:bg-red-500/10"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
@@ -106,21 +131,36 @@ export default function TasksPage() {
|
||||
{/* Tamamlananlar */}
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-xl font-semibold opacity-70 flex items-center gap-2">
|
||||
Tamamlananlar <span className="text-sm px-2 py-0.5 rounded-full bg-muted text-muted-foreground">{completedTasks.length}</span>
|
||||
Tamamlananlar{" "}
|
||||
<span className="text-sm px-2 py-0.5 rounded-full bg-muted text-muted-foreground">
|
||||
{completedTasks.length}
|
||||
</span>
|
||||
</h2>
|
||||
<div className="space-y-2">
|
||||
{completedTasks.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">Hiç görev tamamlanmadı.</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Hiç görev tamamlanmadı.
|
||||
</p>
|
||||
) : (
|
||||
completedTasks.map(task => (
|
||||
<div key={task.id} className="flex items-center gap-3 p-3 rounded-lg border bg-muted/40 shadow-sm group">
|
||||
<Checkbox
|
||||
checked={true}
|
||||
onCheckedChange={() => toggleTaskStatus(task.id, task.status)}
|
||||
completedTasks.map((task) => (
|
||||
<div
|
||||
key={task.id}
|
||||
className="flex items-center gap-3 p-3 rounded-lg border bg-muted/40 shadow-sm group"
|
||||
>
|
||||
<Checkbox
|
||||
checked={true}
|
||||
onCheckedChange={() =>
|
||||
toggleTaskStatus(task.id, task.status)
|
||||
}
|
||||
className="w-5 h-5 data-[state=checked]:bg-muted-foreground data-[state=checked]:border-muted-foreground"
|
||||
/>
|
||||
<span className="flex-1 text-sm line-through text-muted-foreground">{task.title}</span>
|
||||
<button onClick={() => deleteTask(task.id)} className="opacity-0 group-hover:opacity-100 p-1.5 text-muted-foreground hover:text-red-500 transition-all rounded-md hover:bg-red-500/10">
|
||||
<span className="flex-1 text-sm line-through text-muted-foreground">
|
||||
{task.title}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => deleteTask(task.id)}
|
||||
className="opacity-0 group-hover:opacity-100 p-1.5 text-muted-foreground hover:text-red-500 transition-all rounded-md hover:bg-red-500/10"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user