feat(frontend): add learning, community, and profile feature components

Cover verified playback, quizzes, skill tree, certificates, events, league, and registration UI.
2026-10-07 19:40:26 +03:30
parent 680db7dce0
commit 5b4936903a
15 changed files with 3286 additions and 0 deletions
@@ -0,0 +1,91 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { HeartHandshake, LogIn, MessageSquareHeart } from "lucide-react";
+import Link from "next/link";
+import { http, toUserError } from "@/lib/api";
+import { useAuth } from "@/lib/auth-store";
+import { Panel } from "@/components/panel";
+import { Button } from "@/components/ui/button";
+
+export type CommunityPayload = {
+  donation: {
+    enabled: boolean;
+    note: string;
+    mode: "chat";
+    contactId?: number;
+    draft: string;
+  };
+};
+
+function openDonationChat(contactId: number | undefined, draft: string) {
+  window.dispatchEvent(
+    new CustomEvent("pargar:chat", {
+      detail: { open: true, with: contactId, draft },
+    }),
+  );
+}
+
+export function CommunityPanel() {
+  const user = useAuth((s) => s.user);
+  const { data, isLoading, isError, error, refetch } = useQuery({
+    queryKey: ["community", user?.id ?? "guest"],
+    queryFn: () => http.get<CommunityPayload>("/api/community"),
+  });
+
+  if (isLoading) {
+    return (
+      <div className="h-72 animate-pulse rounded-2xl border-2 border-border bg-muted/40" />
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className="mx-auto max-w-xl rounded-2xl border-2 border-destructive/30 bg-destructive/5 p-8 text-center">
+        <p className="font-medium text-destructive">{toUserError(error)}</p>
+        <Button className="mt-4" variant="outline" onClick={() => refetch()}>
+          تلاش دوباره
+        </Button>
+      </div>
+    );
+  }
+
+  const donation = data?.donation;
+
+  return (
+    <div className="mx-auto max-w-xl">
+      <Panel
+        title="حمایت مالی"
+        description="بدون کارت عمومی — اگر لاگین باشید، گفتگو با تیم باز می‌شود."
+        icon={<HeartHandshake className="h-5 w-5" />}
+        tint="bg-accent/15 text-accent"
+      >
+        {donation?.enabled ? (
+          <div className="space-y-4 pt-1">
+            <p className="text-sm leading-relaxed text-muted-foreground">{donation.note}</p>
+            <div className="rounded-2xl border border-border bg-muted/20 p-5 text-sm leading-relaxed">
+              جزئیات واریز فقط در پیام خصوصی رد و بدل می‌شود؛ اینجا چیزی عمومی نیست.
+            </div>
+            {user ? (
+              <Button
+                className="w-full gap-2"
+                size="lg"
+                onClick={() => openDonationChat(donation.contactId, donation.draft)}
+              >
+                <MessageSquareHeart className="h-4 w-4" /> پیام دربارهٔ دونیت
+              </Button>
+            ) : (
+              <Button asChild className="w-full gap-2" size="lg">
+                <Link href="/login">
+                  <LogIn className="h-4 w-4" /> ورود برای هماهنگی دونیت
+                </Link>
+              </Button>
+            )}
+          </div>
+        ) : (
+          <p className="py-8 text-center text-sm text-muted-foreground">حمایت فعلاً غیرفعال است.</p>
+        )}
+      </Panel>
+    </div>
+  );
+}