diff --git a/src/components/mika/SkillsDashboardWidget.tsx b/src/components/mika/SkillsDashboardWidget.tsx new file mode 100644 index 0000000..4f643f8 --- /dev/null +++ b/src/components/mika/SkillsDashboardWidget.tsx @@ -0,0 +1,81 @@ +"use client"; + +import { Link } from "@tanstack/react-router"; +import { ArrowRight, Sparkles, Plus } from "lucide-react"; +import { useSkills } from "@/hooks/use-skills"; +import { useUserSkillLimits } from "@/hooks/use-user-skill-limits"; +import { Button } from "@/components/ui/button"; +import { Skeleton } from "@/components/ui/skeleton"; +import { SkillStatusBadge } from "@/components/mika/skills/SkillStatusBadge"; +import { formatDistanceToNow } from "date-fns"; +import { ptBR } from "date-fns/locale"; + +export function SkillsDashboardWidget() { + const { data: skills, isLoading } = useSkills(false); + const { data: limits } = useUserSkillLimits(); + + if (isLoading) { + return ; + } + + const list = skills ?? []; + const activeCount = list.filter((s) => s.status === "active").length; + const recent = list.slice(0, 3); + + return ( +
+
+
+
+ +
+
+

Suas skills

+

+ {activeCount} ativa{activeCount === 1 ? "" : "s"} + {limits?.max_skills ? ` de ${limits.max_skills} disponíveis` : ""} +

+
+
+ +
+ + {list.length === 0 ? ( +
+

+ Você ainda não criou skills personalizadas para o Mika. +

+ +
+ ) : ( + + )} +
+ ); +} diff --git a/src/routes/painel.index.tsx b/src/routes/painel.index.tsx index e339ea9..46d243b 100644 --- a/src/routes/painel.index.tsx +++ b/src/routes/painel.index.tsx @@ -7,6 +7,7 @@ import { useProfile } from "@/hooks/use-profile"; import { Button } from "@/components/ui/button"; import { Skeleton } from "@/components/ui/skeleton"; import { SubscriptionBanner } from "@/components/mika/SubscriptionBanner"; +import { SkillsDashboardWidget } from "@/components/mika/SkillsDashboardWidget"; import { cn } from "@/lib/utils"; export const Route = createFileRoute("/painel/")({ @@ -46,6 +47,8 @@ function DashboardPage() { {subscription && (subscription.status === "incomplete" || subscription.status === "active") && ( )} + + {subscription && subscription.status === "active" && } ); }