77 lines
2.8 KiB
TypeScript
77 lines
2.8 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import Link from "next/link"
|
|
import { History, ChevronRight, X } from "lucide-react"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Button } from "@/components/ui/button"
|
|
|
|
type RecentPlan = {
|
|
id: string
|
|
title: string
|
|
lastVisited: number
|
|
}
|
|
|
|
export function RecentPlans({ lang, dict }: { lang: string, dict: { title: string, noPlans: string, clear: string } }) {
|
|
const [plans, setPlans] = useState<RecentPlan[]>([])
|
|
const [mounted, setMounted] = useState(false)
|
|
|
|
useEffect(() => {
|
|
setMounted(true)
|
|
const stored = localStorage.getItem("csp_recent_plans")
|
|
if (stored) {
|
|
try {
|
|
const parsed = JSON.parse(stored)
|
|
setPlans(parsed.sort((a: RecentPlan, b: RecentPlan) => b.lastVisited - a.lastVisited))
|
|
} catch (e) {
|
|
console.error("Failed to parse recent plans", e)
|
|
}
|
|
}
|
|
}, [])
|
|
|
|
const removePlan = (id: string, e: React.MouseEvent) => {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
const newPlans = plans.filter(p => p.id !== id)
|
|
setPlans(newPlans)
|
|
localStorage.setItem("csp_recent_plans", JSON.stringify(newPlans))
|
|
}
|
|
|
|
if (!mounted || plans.length === 0) return null
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-base font-medium flex items-center gap-2">
|
|
<History className="w-4 h-4" />
|
|
{dict.title}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="grid gap-2">
|
|
{plans.map((plan) => (
|
|
<Link
|
|
key={plan.id}
|
|
href={`/${lang}/dashboard/${plan.id}`}
|
|
className="group flex items-center justify-between p-3 rounded-lg border bg-card hover:bg-accent/50 transition-colors"
|
|
>
|
|
<div className="font-medium truncate mr-4">
|
|
{plan.title}
|
|
</div>
|
|
<div className="flex items-center gap-2 text-muted-foreground">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
|
|
onClick={(e) => removePlan(plan.id, e)}
|
|
>
|
|
<X className="w-3.5 h-3.5" />
|
|
</Button>
|
|
<ChevronRight className="w-4 h-4" />
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|