Revamp focus page to provide a dedicated, distraction-free workspace
Implements a new layout for FocusPage.tsx with sidebar, header, and pomodoro timer functionality. Replit-Commit-Author: Agent Replit-Commit-Session-Id: c5f0c281-8dd8-4846-b452-4a07bcd21062 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/9777c70b-fc38-4831-8d6b-78dfffe041b0/bb69c78d-355e-48a2-a39e-d4d02b9c057b.jpg
This commit is contained in:
ghaddaditw
+185
-63
@@ -1,75 +1,197 @@
|
||||
import FocusMode from "@/components/focus/FocusMode";
|
||||
import { useState } from "react";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Timer, Brain, Volume2, Shield } from "lucide-react";
|
||||
import { Timer, Brain, Volume2, Shield, Target, Coffee, Zap } from "lucide-react";
|
||||
import Header from "@/components/layout/Header";
|
||||
import Sidebar from "@/components/layout/Sidebar";
|
||||
import FocusMode from "@/components/focus/FocusMode";
|
||||
|
||||
export default function FocusPage() {
|
||||
const { t } = useTranslation();
|
||||
const [isFocusModeOpen, setIsFocusModeOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto py-8 space-y-8">
|
||||
<div className="text-center space-y-4">
|
||||
<h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
|
||||
{t('focus.title', 'Focus Mode')}
|
||||
</h1>
|
||||
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
|
||||
{t('focus.description', 'Minimize distractions and maximize your productivity with our advanced focus tools.')}
|
||||
</p>
|
||||
<div className="flex h-screen bg-gray-50 dark:bg-gray-900">
|
||||
<Sidebar className="w-64 border-r" />
|
||||
<div className="flex-1 flex flex-col">
|
||||
<Header />
|
||||
<div className="flex-1 p-6 overflow-auto">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Focus Zone</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400">Maximize your productivity with focused work sessions</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
|
||||
<Card>
|
||||
<CardHeader className="text-center">
|
||||
<Timer className="w-8 h-8 mx-auto mb-2 text-blue-600" />
|
||||
<CardTitle className="text-lg">Pomodoro Timer</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardDescription className="text-center mb-4">
|
||||
Work in focused 25-minute intervals with built-in breaks
|
||||
</CardDescription>
|
||||
<Button
|
||||
onClick={() => setIsFocusModeOpen(true)}
|
||||
className="w-full"
|
||||
variant="outline"
|
||||
>
|
||||
Start Pomodoro
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="text-center">
|
||||
<Brain className="w-8 h-8 mx-auto mb-2 text-purple-600" />
|
||||
<CardTitle className="text-lg">Deep Work Sessions</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardDescription className="text-center mb-4">
|
||||
Extended 90-minute sessions for complex tasks and deep thinking
|
||||
</CardDescription>
|
||||
<Button
|
||||
onClick={() => setIsFocusModeOpen(true)}
|
||||
className="w-full"
|
||||
variant="outline"
|
||||
>
|
||||
Start Deep Work
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="text-center">
|
||||
<Coffee className="w-8 h-8 mx-auto mb-2 text-orange-600" />
|
||||
<CardTitle className="text-lg">Custom Sessions</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardDescription className="text-center mb-4">
|
||||
Create personalized focus sessions tailored to your workflow
|
||||
</CardDescription>
|
||||
<Button
|
||||
onClick={() => setIsFocusModeOpen(true)}
|
||||
className="w-full"
|
||||
variant="outline"
|
||||
>
|
||||
Customize Session
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Volume2 className="w-5 h-5 text-green-600" />
|
||||
Ambient Sounds
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardDescription className="mb-4">
|
||||
Enhance concentration with nature sounds, white noise, or instrumental music
|
||||
</CardDescription>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm">Rain Sounds</span>
|
||||
<Button size="sm" variant="ghost">Play</Button>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm">Forest Ambience</span>
|
||||
<Button size="sm" variant="ghost">Play</Button>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm">Ocean Waves</span>
|
||||
<Button size="sm" variant="ghost">Play</Button>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm">Brown Noise</span>
|
||||
<Button size="sm" variant="ghost">Play</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Shield className="w-5 h-5 text-red-600" />
|
||||
Distraction Blocking
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardDescription className="mb-4">
|
||||
Minimize interruptions by hiding notifications and non-essential UI elements
|
||||
</CardDescription>
|
||||
<div className="space-y-3">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm">Block Notifications</span>
|
||||
<div className="w-2 h-2 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm">Hide Social Media</span>
|
||||
<div className="w-2 h-2 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-sm">Minimize UI Elements</span>
|
||||
<div className="w-2 h-2 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<Button size="sm" className="w-full mt-3">
|
||||
Configure Blocking
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Zap className="w-5 h-5 text-yellow-600" />
|
||||
Focus Statistics
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-blue-600">12</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Sessions Today</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-green-600">6h 30m</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Total Focus Time</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-purple-600">85%</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Completion Rate</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-orange-600">7</div>
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">Day Streak</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="mt-8 text-center">
|
||||
<Button
|
||||
onClick={() => setIsFocusModeOpen(true)}
|
||||
size="lg"
|
||||
className="gap-2"
|
||||
>
|
||||
<Target className="w-5 h-5" />
|
||||
Enter Focus Mode
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
<Card>
|
||||
<CardHeader className="text-center">
|
||||
<Timer className="w-8 h-8 mx-auto mb-2 text-primary" />
|
||||
<CardTitle className="text-lg">{t('focus.features.timer', 'Pomodoro Timer')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardDescription className="text-center">
|
||||
{t('focus.features.timerDesc', 'Work in focused intervals with built-in breaks')}
|
||||
</CardDescription>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="text-center">
|
||||
<Volume2 className="w-8 h-8 mx-auto mb-2 text-primary" />
|
||||
<CardTitle className="text-lg">{t('focus.features.ambient', 'Ambient Sounds')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardDescription className="text-center">
|
||||
{t('focus.features.ambientDesc', 'Choose from nature sounds to enhance concentration')}
|
||||
</CardDescription>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="text-center">
|
||||
<Shield className="w-8 h-8 mx-auto mb-2 text-primary" />
|
||||
<CardTitle className="text-lg">{t('focus.features.blocking', 'Distraction Blocking')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardDescription className="text-center">
|
||||
{t('focus.features.blockingDesc', 'Block notifications and visual distractions')}
|
||||
</CardDescription>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="text-center">
|
||||
<Brain className="w-8 h-8 mx-auto mb-2 text-primary" />
|
||||
<CardTitle className="text-lg">{t('focus.features.tracking', 'Session Tracking')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardDescription className="text-center">
|
||||
{t('focus.features.trackingDesc', 'Monitor your focus patterns and productivity')}
|
||||
</CardDescription>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<FocusMode isOpen={true} onClose={() => {}} />
|
||||
</div>
|
||||
<FocusMode
|
||||
isOpen={isFocusModeOpen}
|
||||
onClose={() => setIsFocusModeOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user