Block 8 complete: streaks, notifications, referrals, premium identity, gamification

2026-06-15 10:32:10 +02:00
parent 6423430275
commit 5e73d1d7ad
24 changed files with 1565 additions and 38 deletions
@@ -0,0 +1,50 @@
+"use client";
+
+import { Crown, Sparkles } from "lucide-react";
+
+interface PremiumBadgeProps {
+  tier: "premium" | "pro" | "free";
+  size?: "sm" | "md" | "lg";
+}
+
+export default function PremiumBadge({ tier, size = "sm" }: PremiumBadgeProps) {
+  const sizeMap = {
+    sm: { px: "px-1.5 py-0.5", text: "text-[9px]", icon: 8, gap: "gap-0.5" },
+    md: { px: "px-2 py-0.5", text: "text-[10px]", icon: 10, gap: "gap-1" },
+    lg: { px: "px-2.5 py-1", text: "text-xs", icon: 12, gap: "gap-1" },
+  };
+
+  const s = sizeMap[size];
+
+  if (tier === "premium") {
+    return (
+      <span
+        className={`inline-flex items-center ${s.gap} ${s.px} rounded-full bg-gradient-to-r from-[#D4AF37]/20 to-yellow-900/20 border border-[#D4AF37]/50 ${s.text} font-semibold text-[#D4AF37] shadow-[0_0_6px_rgba(212,175,55,0.3)]`}
+      >
+        <Crown size={s.icon} className="text-[#D4AF37]" />
+        Premium
+      </span>
+    );
+  }
+
+  if (tier === "pro") {
+    return (
+      <span
+        className={`inline-flex items-center ${s.gap} ${s.px} rounded-full bg-gradient-to-r from-purple-900/30 to-violet-900/20 border border-purple-500/50 ${s.text} font-semibold text-purple-300 shadow-[0_0_8px_rgba(168,85,247,0.35)]`}
+      >
+        <Crown size={s.icon} className="text-purple-400" />
+        Pro
+      </span>
+    );
+  }
+
+  // Free tier
+  return (
+    <span
+      className={`inline-flex items-center ${s.gap} ${s.px} rounded-full bg-gray-800/40 border border-gray-700/50 ${s.text} font-medium text-gray-500`}
+    >
+      <Sparkles size={s.icon} className="text-gray-600" />
+      Free
+    </span>
+  );
+}