Alejandro Rosales
a487a8c293
- Implemented AdjustAIButton for AI-driven plan adjustments with a confetti effect on success. - Created EditPlanButton to allow editing of plan details with form validation and optimistic updates. - Added AsignaturaPreviewCard to display course previews with relevant statistics and details. - Introduced Field component for consistent form field labeling. - Developed GradientMesh for dynamic background effects based on color input. - Added Pulse component for skeleton loading states. - Created SmallStat and StatCard components for displaying statistical information in a card format. - Implemented utility functions in planHelpers for color manipulation and formatting. - Established planQueries for fetching plan and course data from the database. - Updated the plan detail route to utilize new components and queries for improved user experience.
34 lines
1.5 KiB
TypeScript
34 lines
1.5 KiB
TypeScript
import * as Icons from "lucide-react"
|
|
import { hexToRgbA } from "./planHelpers"
|
|
|
|
export function StatCard({ label, value = "—", Icon = Icons.Info, accent, className = "", title }: {
|
|
label: string
|
|
value?: React.ReactNode
|
|
Icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>
|
|
accent?: string | null
|
|
className?: string
|
|
title?: string
|
|
}) {
|
|
const border = hexToRgbA(accent, .28)
|
|
const chipBg = hexToRgbA(accent, .08)
|
|
const glow = hexToRgbA(accent, .14)
|
|
|
|
return (
|
|
<div
|
|
className={`group relative overflow-hidden rounded-2xl border p-4 sm:p-5 bg-white/70 dark:bg-neutral-900/60 backdrop-blur shadow-sm hover:shadow-md transition-all ${className}`}
|
|
style={{ borderColor: border }}
|
|
title={title ?? (typeof value === "string" ? value : undefined)}
|
|
aria-label={`${label}: ${typeof value === "string" ? value : ""}`}
|
|
>
|
|
<div className="flex items-center justify-between gap-3">
|
|
<div className="text-xs text-neutral-500">{label}</div>
|
|
<span className="inline-flex items-center justify-center rounded-xl px-2.5 py-2 border" style={{ borderColor: border, background: chipBg }}>
|
|
<Icon className="h-4 w-4 opacity-80" />
|
|
</span>
|
|
</div>
|
|
<div className="mt-1 text-2xl font-semibold tabular-nums tracking-tight truncate">{value}</div>
|
|
<div className="pointer-events-none absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity" style={{ background: `radial-gradient(600px 120px at 20% -10%, ${glow}, transparent 60%)` }} />
|
|
</div>
|
|
)
|
|
}
|