chore: Secure routes with auth middleware, update text and fix minor bugs
This commit is contained in:
@@ -1,73 +1,123 @@
|
||||
"use client"
|
||||
import { Card, CardContent } from "@/components/ui/card"
|
||||
import { Flame, Star } from "lucide-react"
|
||||
import { Flame, Star, Clock, TrendingUp } from "lucide-react"
|
||||
import { useState } from "react"
|
||||
import Link from "next/link"
|
||||
|
||||
const SLOTS = [
|
||||
{ label: "6 AM", h: 30, peak: false },
|
||||
{ label: "9 AM", h: 50, peak: false },
|
||||
{ label: "12 PM", h: 65, peak: false },
|
||||
{ label: "3 PM", h: 100, peak: true },
|
||||
{ label: "6 PM", h: 80, peak: false },
|
||||
{ label: "9 PM", h: 60, peak: false },
|
||||
{ label: "12 AM", h: 38, peak: false },
|
||||
{ label: "6 AM", h: 30, score: 52, peak: false },
|
||||
{ label: "9 AM", h: 55, score: 68, peak: false },
|
||||
{ label: "12 PM", h: 65, score: 74, peak: false },
|
||||
{ label: "2 PM", h: 90, score: 91, peak: false },
|
||||
{ label: "3 PM", h: 100, score: 95, peak: true },
|
||||
{ label: "5 PM", h: 82, score: 85, peak: false },
|
||||
{ label: "7 PM", h: 70, score: 78, peak: false },
|
||||
{ label: "9 PM", h: 55, score: 67, peak: false },
|
||||
{ label: "11 PM", h: 32, score: 48, peak: false },
|
||||
]
|
||||
|
||||
export function StudyTimeOptimizationCard() {
|
||||
const [hovered, setHovered] = useState<number | null>(null)
|
||||
const maxH = Math.max(...SLOTS.map(s => s.h))
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center pb-3">
|
||||
<h2 className="text-base font-bold text-primary flex items-center gap-2">
|
||||
📈 Study Time Optimization
|
||||
</h2>
|
||||
</div>
|
||||
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] group hover:border-[#00F0FF]/30 transition-colors">
|
||||
<CardContent className="p-4">
|
||||
{/* Peak window badge */}
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Star size={13} className="fill-yellow-500 text-yellow-500" />
|
||||
<span className="text-xs font-bold text-yellow-500">Peak Productivity:</span>
|
||||
<span className="text-xs font-semibold text-foreground bg-yellow-500/10 border border-yellow-500/20 px-2 py-0.5 rounded-full">
|
||||
2 PM – 5 PM
|
||||
</span>
|
||||
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] min-h-[440px] flex flex-col justify-between group hover:border-[#00F0FF]/30 transition-colors">
|
||||
<CardContent className="p-5 flex-1 flex flex-col gap-4">
|
||||
{/* Header stats */}
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
<div className="flex items-center gap-2">
|
||||
<Star size={15} className="fill-yellow-500 text-yellow-500" />
|
||||
<span className="text-sm font-bold text-yellow-500">Peak Window:</span>
|
||||
<span className="text-sm font-bold bg-yellow-500/10 border border-yellow-500/20 px-2.5 py-0.5 rounded-full">
|
||||
2 PM – 5 PM
|
||||
</span>
|
||||
</div>
|
||||
<div className="ml-auto flex items-center gap-1.5 text-xs font-bold text-green-400 bg-green-400/10 border border-green-400/20 px-2.5 py-1 rounded-full">
|
||||
<TrendingUp size={11} /> 95% efficiency at peak
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bar chart */}
|
||||
<div className="flex items-end gap-1.5 h-20 px-1 mb-6">
|
||||
{SLOTS.map((slot, i) => (
|
||||
<div
|
||||
key={slot.label}
|
||||
className="flex-1 flex flex-col items-center gap-0.5 cursor-pointer"
|
||||
onMouseEnter={() => setHovered(i)}
|
||||
onMouseLeave={() => setHovered(null)}
|
||||
>
|
||||
<div
|
||||
className={`w-full rounded-t-md transition-all duration-300 ${
|
||||
slot.peak
|
||||
? "bg-gradient-to-t from-yellow-600/60 to-yellow-400 shadow-[0_0_10px_rgba(234,179,8,0.4)]"
|
||||
: hovered === i
|
||||
? "bg-gradient-to-t from-[#00F0FF]/50 to-[#00F0FF]"
|
||||
: "bg-gradient-to-t from-[#00F0FF]/20 to-[#00F0FF]/60"
|
||||
}`}
|
||||
style={{ height: `${slot.h}%` }}
|
||||
/>
|
||||
<span className="text-[8px] text-muted-foreground font-medium whitespace-nowrap mt-1">
|
||||
{slot.label}
|
||||
</span>
|
||||
{/* Bar chart with Y-axis */}
|
||||
<div className="flex gap-2 flex-1">
|
||||
{/* Y-axis labels */}
|
||||
<div className="flex flex-col justify-between pb-6 text-right pr-1.5">
|
||||
{[100, 75, 50, 25].map(v => (
|
||||
<span key={v} className="text-[10px] text-muted-foreground font-semibold leading-none">{v}%</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Bars */}
|
||||
<div className="flex-1 flex flex-col gap-1">
|
||||
{/* Grid lines */}
|
||||
<div className="relative flex-1 min-h-[120px]">
|
||||
{[0, 25, 50, 75].map(pct => (
|
||||
<div
|
||||
key={pct}
|
||||
className="absolute w-full border-t border-border/20"
|
||||
style={{ bottom: `${pct}%` }}
|
||||
/>
|
||||
))}
|
||||
<div className="flex items-end gap-1 h-full absolute inset-0">
|
||||
{SLOTS.map((slot, i) => (
|
||||
<div
|
||||
key={slot.label}
|
||||
className="flex-1 flex flex-col items-center justify-end h-full cursor-pointer relative group/bar"
|
||||
onMouseEnter={() => setHovered(i)}
|
||||
onMouseLeave={() => setHovered(null)}
|
||||
>
|
||||
{/* Tooltip */}
|
||||
{hovered === i && (
|
||||
<div className="absolute bottom-full mb-1.5 left-1/2 -translate-x-1/2 bg-background border border-border rounded-lg px-2.5 py-1.5 text-xs font-bold whitespace-nowrap shadow-lg z-10 pointer-events-none">
|
||||
<div className="text-foreground">{slot.label}</div>
|
||||
<div className={slot.peak ? "text-yellow-400" : "text-[#00F0FF]"}>Score: {slot.score}%</div>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className={`w-full rounded-t-md transition-all duration-300 ${
|
||||
slot.peak
|
||||
? "bg-gradient-to-t from-yellow-600/80 to-yellow-400 shadow-[0_0_14px_rgba(234,179,8,0.5)]"
|
||||
: hovered === i
|
||||
? "bg-gradient-to-t from-[#00F0FF]/70 to-[#00F0FF]"
|
||||
: "bg-gradient-to-t from-[#00F0FF]/20 to-[#00F0FF]/50"
|
||||
}`}
|
||||
style={{ height: `${(slot.h / maxH) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* X-axis labels */}
|
||||
<div className="flex gap-1 pt-1">
|
||||
{SLOTS.map((slot) => (
|
||||
<div key={slot.label} className="flex-1 text-center">
|
||||
<span className="text-[10px] text-muted-foreground font-bold whitespace-nowrap">{slot.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Efficiency breakdown */}
|
||||
<div className="grid grid-cols-3 gap-2 text-center">
|
||||
{[
|
||||
{ label: "Morning", time: "6–9 AM", eff: 60, color: "text-muted-foreground" },
|
||||
{ label: "Peak", time: "2–5 PM", eff: 95, color: "text-yellow-400" },
|
||||
{ label: "Evening", time: "7–9 PM", eff: 73, color: "text-[#00F0FF]" },
|
||||
].map(slot => (
|
||||
<div key={slot.label} className="p-2.5 rounded-xl bg-white/5 border border-border/30">
|
||||
<div className={`text-base font-black ${slot.color}`}>{slot.eff}%</div>
|
||||
<div className="text-[11px] font-bold text-muted-foreground">{slot.label}</div>
|
||||
<div className="text-[10px] text-muted-foreground/60">{slot.time}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-1 px-3 py-2.5 bg-yellow-500/10 border border-yellow-500/20 rounded-md text-xs text-yellow-500 font-medium flex items-center gap-2">
|
||||
<Flame size={16} className="fill-yellow-500 shrink-0" />
|
||||
You perform best 2 PM – 5 PM. Schedule your hardest mock tests in this window.
|
||||
<div className="px-3.5 py-3 bg-yellow-500/10 border border-yellow-500/20 rounded-xl text-xs md:text-sm text-yellow-500 font-bold flex items-center gap-2">
|
||||
<Flame size={18} className="fill-yellow-500 shrink-0" />
|
||||
You perform best 2–5 PM. Schedule your hardest mock tests and DPPs in this window.
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user