aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
828 lines (825 loc) • 30.1 kB
JavaScript
'use client';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { useReducedMotion } from '../../hooks/useReducedMotion.js';
import { motion, AnimatePresence } from 'framer-motion';
import { Trophy, Search, Grid, List, Unlock, Lock, Gift, BookOpen, Heart, Share2, Eye, Clock, Sparkles, Zap, Flame, Calendar, Target, TrendingUp, Crown, Diamond } from 'lucide-react';
import { useState, useMemo, useEffect } from 'react';
import { cn } from '../../lib/utilsComprehensive.js';
const tierColors = {
bronze: {
primary: "var(--glass-border-default)",
secondary: "var(--glass-border-subtle)",
glow: "var(--glass-bg-hover)"
},
silver: {
primary: "var(--glass-border-hover)",
secondary: "var(--glass-border-default)",
glow: "var(--glass-bg-active)"
},
gold: {
primary: "var(--glass-border-strong)",
secondary: "var(--glass-border-default)",
glow: "var(--glass-bg-strong)"
},
platinum: {
primary: "var(--glass-text-secondary)",
secondary: "var(--glass-text-secondary)",
glow: "var(--glass-bg-default)"
},
diamond: {
primary: "var(--glass-text-primary)",
secondary: "var(--glass-text-secondary)",
glow: "var(--glass-bg-default)"
}
};
const categoryIcons = {
reading: BookOpen,
engagement: Heart,
social: Share2,
exploration: Eye,
time: Clock,
special: Sparkles
};
const defaultAchievements = [{
id: "first-article",
title: "First Steps",
description: "Read your first article",
icon: BookOpen,
tier: "bronze",
category: "reading",
progress: 1,
maxProgress: 1,
unlocked: true,
unlockedAt: new Date("2024-01-15"),
rarity: 95,
points: 10,
glowColor: "#FFD700"
}, {
id: "speed-reader",
title: "Speed Reader",
description: "Read 50 articles",
icon: Zap,
tier: "silver",
category: "reading",
progress: 47,
maxProgress: 50,
unlocked: false,
rarity: 60,
points: 50,
glowColor: "#E6E6FA"
}, {
id: "bookworm",
title: "Bookworm",
description: "Read 500 articles",
icon: BookOpen,
tier: "gold",
category: "reading",
progress: 347,
maxProgress: 500,
unlocked: false,
rarity: 15,
points: 200,
glowColor: "#FFFF99"
}, {
id: "streak-master",
title: "Streak Master",
description: "Maintain a 30-day reading streak",
icon: Flame,
tier: "gold",
category: "time",
progress: 15,
maxProgress: 30,
unlocked: false,
rarity: 20,
points: 150,
glowColor: "#FF6347"
}, {
id: "early-bird",
title: "Early Bird",
description: "Read 10 articles before 8 AM",
icon: Calendar,
tier: "bronze",
category: "time",
progress: 3,
maxProgress: 10,
unlocked: false,
rarity: 40,
points: 30,
glowColor: "#87CEEB"
}, {
id: "social-butterfly",
title: "Social Butterfly",
description: "Share 25 articles",
icon: Share2,
tier: "silver",
category: "social",
progress: 12,
maxProgress: 25,
unlocked: false,
rarity: 35,
points: 75,
glowColor: "#FFB6C1"
}, {
id: "curator",
title: "Curator",
description: "Bookmark 100 articles",
icon: Target,
tier: "silver",
category: "engagement",
progress: 67,
maxProgress: 100,
unlocked: false,
rarity: 45,
points: 60,
glowColor: "#98FB98"
}, {
id: "explorer",
title: "Explorer",
description: "Read articles from 10 different categories",
icon: Eye,
tier: "gold",
category: "exploration",
progress: 7,
maxProgress: 10,
unlocked: false,
rarity: 25,
points: 120,
glowColor: "#DDA0DD"
}, {
id: "trendsetter",
title: "Trendsetter",
description: "Be among first 10 to read 5 trending articles",
icon: TrendingUp,
tier: "platinum",
category: "special",
progress: 2,
maxProgress: 5,
unlocked: false,
rarity: 5,
points: 300,
glowColor: "#F0F8FF"
}, {
id: "perfectionist",
title: "Perfectionist",
description: "Complete 50 article quizzes with 100% score",
icon: Crown,
tier: "diamond",
category: "engagement",
progress: 12,
maxProgress: 50,
unlocked: false,
rarity: 2,
points: 500,
glowColor: "#00FFFF"
}, {
id: "night-owl",
title: "Night Owl",
description: "Read 20 articles after midnight",
icon: Calendar,
tier: "bronze",
category: "time",
progress: 8,
maxProgress: 20,
unlocked: false,
rarity: 30,
points: 40,
glowColor: "#191970"
}, {
id: "glass-master",
title: "Glass Master",
description: "Discover the rainbow glass mode",
icon: Diamond,
tier: "diamond",
category: "special",
progress: 0,
maxProgress: 1,
unlocked: false,
secret: true,
rarity: 1,
points: 1000,
glowColor: "#FF1493",
reward: {
type: "theme",
value: "rainbow-exclusive"
}
}];
function GlassTrophyCase({
achievements = defaultAchievements,
userStats = {},
onAchievementUnlock,
showProgress = true,
enableSound = true,
className = ""
}) {
const prefersReducedMotion = useReducedMotion();
const [selectedCategory, setSelectedCategory] = useState("all");
const [selectedTier, setSelectedTier] = useState("all");
const [searchQuery, setSearchQuery] = useState("");
const [viewMode, setViewMode] = useState("grid");
const [sortBy, setSortBy] = useState("recent");
const [showLocked, setShowLocked] = useState(true);
const [selectedAchievement, setSelectedAchievement] = useState(null);
// Filter and sort achievements
const filteredAchievements = useMemo(() => {
return achievements.filter(achievement => {
// Category filter
if (selectedCategory !== "all" && achievement.category !== selectedCategory) {
return false;
}
// Tier filter
if (selectedTier !== "all" && achievement.tier !== selectedTier) {
return false;
}
// Show locked filter
if (!showLocked && !achievement.unlocked) {
return false;
}
// Search filter
if (searchQuery) {
const query = searchQuery.toLowerCase();
return achievement.title.toLowerCase().includes(query) || achievement.description.toLowerCase().includes(query);
}
// Secret achievements
if (achievement.secret && !achievement.unlocked) {
return false;
}
return true;
}).sort((a, b) => {
switch (sortBy) {
case "recent":
if (a.unlockedAt && b.unlockedAt) {
return b.unlockedAt.getTime() - a.unlockedAt.getTime();
}
return a.unlocked === b.unlocked ? 0 : a.unlocked ? -1 : 1;
case "progress":
const aProgress = a.progress / a.maxProgress;
const bProgress = b.progress / b.maxProgress;
return bProgress - aProgress;
case "rarity":
return a.rarity - b.rarity;
case "points":
return b.points - a.points;
default:
return 0;
}
});
}, [achievements, selectedCategory, selectedTier, searchQuery, showLocked, sortBy]);
// Calculate stats
const stats = useMemo(() => {
const unlocked = achievements.filter(a => a.unlocked).length;
const total = achievements.filter(a => !a.secret || a.unlocked).length;
const totalPoints = achievements.filter(a => a.unlocked).reduce((sum, a) => sum + a.points, 0);
const tierCounts = achievements.reduce((counts, achievement) => {
if (achievement.unlocked) {
counts[achievement.tier] = (counts[achievement.tier] || 0) + 1;
}
return counts;
}, {});
return {
unlocked,
total,
totalPoints,
tierCounts,
completionRate: Math.round(unlocked / total * 100)
};
}, [achievements]);
// Categories with counts
const categories = useMemo(() => {
const categoryCounts = achievements.reduce((counts, achievement) => {
counts[achievement.category] = (counts[achievement.category] || 0) + 1;
return counts;
}, {});
return Object.entries(categoryCounts).map(([category, count]) => ({
id: category,
name: category.charAt(0).toUpperCase() + category.slice(1),
count,
icon: categoryIcons[category]
}));
}, [achievements]);
// Play unlock sound
const playUnlockSound = () => {
if (!enableSound) return;
try {
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const oscillator = audioContext.createOscillator();
const gainNode = audioContext.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioContext.destination);
// Victory fanfare
const notes = [523.25, 659.25, 783.99, 1046.5]; // C, E, G, C
notes.forEach((freq, index) => {
const osc = audioContext.createOscillator();
const gain = audioContext.createGain();
osc.connect(gain);
gain.connect(audioContext.destination);
osc.frequency.value = freq;
osc.type = "sine";
gain.gain.setValueAtTime(0.1, audioContext.currentTime + index * 0.1);
gain.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5 + index * 0.1);
osc.start(audioContext.currentTime + index * 0.1);
osc.stop(audioContext.currentTime + 0.5 + index * 0.1);
});
} catch (error) {
console.warn("Unable to play unlock sound:", error);
}
};
// Check for newly unlocked achievements
useEffect(() => {
achievements.forEach(achievement => {
if (!achievement.unlocked && achievement.progress >= achievement.maxProgress) {
const updatedAchievement = {
...achievement,
unlocked: true,
unlockedAt: new Date()
};
playUnlockSound();
onAchievementUnlock?.(updatedAchievement);
}
});
}, [achievements, onAchievementUnlock]);
const AchievementCard = ({
achievement
}) => {
const tierColor = tierColors[achievement.tier];
const progressPercentage = achievement.progress / achievement.maxProgress * 100;
return jsxs(motion.div, {
className: `relative p-6 rounded-xl border-2 cursor-pointer transition-all ${achievement.unlocked ? "border-white/40 bg-white/10 hover:bg-white/15" : "border-white/20 bg-white/5 hover:bg-white/10 opacity-70"}`,
style: {
borderColor: achievement.unlocked ? tierColor.primary : undefined,
boxShadow: achievement.unlocked ? `0 0 20px ${tierColor.glow}40, inset 0 0 20px ${tierColor.primary}10` : undefined
},
whileHover: {
scale: 1.02,
y: -2
},
whileTap: {
scale: 0.98
},
onClick: () => setSelectedAchievement(achievement),
initial: {
opacity: 0,
y: 20
},
animate: {
opacity: 1,
y: 0
},
layout: true,
children: [jsx("div", {
className: 'absolute -glass-top-2 -right-2 glass-px-2 glass-py-1 glass-radius-full glass-text-xs font-bold glass-border',
style: {
backgroundColor: `${tierColor.primary}20`,
borderColor: `${tierColor.primary}40`,
color: tierColor.primary
},
children: achievement.tier.toUpperCase()
}), achievement.unlocked && jsx(motion.div, {
className: 'absolute inset-0 glass-radius-xl',
style: {
background: `radial-gradient(circle at center, ${tierColor.glow}20 0%, transparent 70%)`,
filter: "blur(var(--glass-blur-md))"
},
animate: prefersReducedMotion ? {} : {
scale: [1, 1.1, 1],
opacity: [0.3, 0.6, 0.3]
},
transition: prefersReducedMotion ? {
duration: 0
} : {
duration: 2,
repeat: Infinity
}
}), !achievement.unlocked && jsx("div", {
className: 'absolute top-4 right-4',
children: jsx(Lock, {
className: 'w-5 h-5 text-primary/40'
})
}), jsx("div", {
className: 'glass-flex glass-items-center glass-justify-center mb-4',
children: jsx("div", {
className: `p-4 rounded-full border-2 ${achievement.unlocked ? "border-white/40" : "border-white/20"}`,
style: {
backgroundColor: `${tierColor.primary}20`,
borderColor: achievement.unlocked ? tierColor.primary : undefined
},
children: jsx(achievement.icon, {
className: `w-8 h-8 ${achievement.unlocked ? "text-white" : "text-white/50"}`
})
})
}), jsxs("div", {
className: 'text-center mb-4',
children: [jsx("h2", {
className: `text-lg font-bold mb-2 ${achievement.unlocked ? "text-white" : "text-white/60"}`,
children: achievement.title
}), jsx("p", {
className: `text-sm ${achievement.unlocked ? "text-white/80" : "text-white/50"}`,
children: achievement.description
})]
}), showProgress && !achievement.unlocked && jsxs("div", {
className: 'mb-4',
children: [jsxs("div", {
className: 'glass-flex glass-justify-between glass-items-center mb-2',
children: [jsx("span", {
className: 'glass-text-xs text-primary/60',
children: "Progress"
}), jsxs("span", {
className: 'glass-text-xs text-primary/60',
children: [achievement.progress, "/", achievement.maxProgress]
})]
}), jsx("div", {
className: 'h-2 glass-surface-subtle/10 glass-radius-full overflow-hidden',
children: jsx(motion.div, {
className: "glass-h-full glass-radius-full",
style: {
backgroundColor: tierColor.primary
},
initial: {
width: 0
},
animate: {
width: `${progressPercentage}%`
},
transition: prefersReducedMotion ? {
duration: 0
} : {
duration: 1,
ease: "easeOut"
}
})
})]
}), jsxs("div", {
className: "glass-flex glass-items-center glass-justify-between glass-text-xs",
children: [jsxs("div", {
className: "glass-flex glass-items-center glass-gap-2",
children: [jsx(Trophy, {
className: 'w-4 h-4 text-primary'
}), jsxs("span", {
className: 'text-primary/60',
children: [achievement.points, " pts"]
})]
}), jsxs("div", {
className: "glass-flex glass-items-center glass-gap-1",
children: [jsx(Diamond, {
className: 'w-3 h-3 text-primary/40'
}), jsxs("span", {
className: 'text-primary/40',
children: [achievement.rarity, "% rare"]
})]
})]
}), achievement.unlocked && achievement.unlockedAt && jsx("div", {
className: 'mt-2 text-center',
children: jsxs("span", {
className: 'glass-text-xs text-primary/50',
children: ["Unlocked ", achievement.unlockedAt.toLocaleDateString()]
})
})]
});
};
return jsxs("div", {
className: `w-full max-w-7xl mx-auto ${className}`,
children: [jsxs("div", {
className: 'glass-flex glass-flex-col lg:flex-row lg:items-center lg:justify-between glass-gap-6 mb-8',
children: [jsxs("div", {
children: [jsxs("h1", {
className: 'glass-text-3xl font-bold text-primary mb-2 glass-flex glass-items-center glass-gap-3',
children: [jsx(Trophy, {
className: 'w-8 h-8 text-primary'
}), "Glass Trophy Case"]
}), jsx("p", {
className: 'text-primary/60',
children: "Showcase your reading achievements and unlock special rewards"
})]
}), jsx("div", {
className: "glass-flex glass-flex-wrap glass-gap-4",
children: jsx("div", {
className: "glass-glass-glass-backdrop-blur-lg glass-contrast-guard glass-surface-subtle/10 glass-border glass-border-white/20 glass-radius-xl glass-p-4 glass-contrast-guard",
children: jsxs("div", {
className: "glass-flex glass-items-center glass-gap-4",
children: [jsxs("div", {
className: 'text-center',
children: [jsx("div", {
className: 'glass-text-2xl font-bold text-primary',
children: stats.unlocked
}), jsx("div", {
className: 'glass-text-xs text-primary/60',
children: "Unlocked"
})]
}), jsxs("div", {
className: 'text-center',
children: [jsx("div", {
className: 'glass-text-2xl font-bold text-primary',
children: stats.total
}), jsx("div", {
className: 'glass-text-xs text-primary/60',
children: "Total"
})]
}), jsxs("div", {
className: 'text-center',
children: [jsx("div", {
className: 'glass-text-2xl font-bold text-primary',
children: stats.totalPoints
}), jsx("div", {
className: 'glass-text-xs text-primary/60',
children: "Points"
})]
})]
})
})
})]
}), jsxs("div", {
className: 'glass-flex glass-flex-wrap glass-gap-4 mb-6',
children: [jsxs("div", {
className: 'relative glass-flex-1 min-w-64',
children: [jsx(Search, {
className: 'absolute left-3 glass-top-1/2 transform -translate-y-1/2 w-4 h-4 text-primary/60'
}), jsx("input", {
type: "text",
value: searchQuery,
onChange: e => setSearchQuery(e.target.value),
placeholder: "Search achievements...",
"aria-label": 'Search achievements',
className: cn("glass-foundation-complete glass-w-full glass-pl-10 glass-pr-4 glass-py-3", "glass-text-primary placeholder:glass-text-muted glass-radius-xl", "glass-border-subtle glass-focus glass-transition glass-touch-target glass-contrast-guard")
})]
}), jsxs("select", {
value: selectedCategory,
onChange: e => setSelectedCategory(e.target.value),
"aria-label": 'Filter achievements by category',
className: cn("glass-foundation-complete glass-px-4 glass-py-3 glass-radius-xl", "glass-text-primary glass-border-subtle glass-focus glass-transition glass-touch-target glass-contrast-guard"),
children: [jsx("option", {
value: "all",
children: "All Categories"
}), categories.map(category => jsxs("option", {
value: category.id,
children: [category.name, " (", category.count, ")"]
}, category.id))]
}), jsxs("select", {
value: selectedTier,
onChange: e => setSelectedTier(e.target.value),
"aria-label": 'Filter achievements by tier',
className: cn("glass-foundation-complete glass-px-4 glass-py-3 glass-radius-xl", "glass-text-primary glass-border-subtle glass-focus glass-transition glass-touch-target glass-contrast-guard"),
children: [jsx("option", {
value: "all",
children: "All Tiers"
}), jsx("option", {
value: "bronze",
children: "Bronze"
}), jsx("option", {
value: "silver",
children: "Silver"
}), jsx("option", {
value: "gold",
children: "Gold"
}), jsx("option", {
value: "platinum",
children: "Platinum"
}), jsx("option", {
value: "diamond",
children: "Diamond"
})]
}), jsxs("select", {
value: sortBy,
onChange: e => setSortBy(e.target.value),
"aria-label": 'Sort achievements',
className: cn("glass-foundation-complete glass-px-4 glass-py-3 glass-radius-xl", "glass-text-primary glass-border-subtle glass-focus glass-transition"),
children: [jsx("option", {
value: "recent",
children: "Recent"
}), jsx("option", {
value: "progress",
children: "Progress"
}), jsx("option", {
value: "rarity",
children: "Rarity"
}), jsx("option", {
value: "points",
children: "Points"
})]
}), jsxs("div", {
className: "glass-flex glass-surface-subtle/10 glass-radius-xl glass-p-1",
children: [jsxs(motion.button, {
type: 'button',
onClick: () => setViewMode("grid"),
className: `p-2 rounded-lg transition-all ${viewMode === "grid" ? "bg-white/20 text-white" : "text-white/60"}`,
"aria-pressed": viewMode === "grid",
"aria-label": 'Display achievements in grid view',
whileHover: {
scale: 1.05
},
whileTap: {
scale: 0.95
},
children: [jsx(Grid, {
className: 'w-4 h-4',
"aria-hidden": 'true'
}), jsx("span", {
className: 'sr-only',
children: "Grid view"
})]
}), jsxs(motion.button, {
type: 'button',
onClick: () => setViewMode("list"),
className: `p-2 rounded-lg transition-all ${viewMode === "list" ? "bg-white/20 text-white" : "text-white/60"}`,
"aria-pressed": viewMode === "list",
"aria-label": 'Display achievements in list view',
whileHover: {
scale: 1.05
},
whileTap: {
scale: 0.95
},
children: [jsx(List, {
className: 'w-4 h-4',
"aria-hidden": 'true'
}), jsx("span", {
className: 'sr-only',
children: "List view"
})]
})]
}), jsx(motion.button, {
type: 'button',
onClick: () => setShowLocked(!showLocked),
className: `px-4 py-3 border border-white/20 rounded-xl transition-all ${showLocked ? "bg-white/10 text-white" : "bg-white/5 text-white/60"}`,
"aria-pressed": showLocked,
"aria-label": showLocked ? "Hide locked achievements" : "Show locked achievements",
whileHover: {
scale: 1.02
},
whileTap: {
scale: 0.98
},
children: showLocked ? jsxs(Fragment, {
children: [jsx(Unlock, {
className: 'w-4 h-4',
"aria-hidden": 'true'
}), jsx("span", {
className: 'sr-only',
children: "Hide locked achievements"
})]
}) : jsxs(Fragment, {
children: [jsx(Lock, {
className: 'w-4 h-4',
"aria-hidden": 'true'
}), jsx("span", {
className: 'sr-only',
children: "Show locked achievements"
})]
})
})]
}), jsx(motion.div, {
className: viewMode === "grid" ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" : "space-y-4",
layout: true,
children: jsx(AnimatePresence, {
children: filteredAchievements.map(achievement => jsx(AchievementCard, {
achievement: achievement
}, achievement.id))
})
}), jsx(AnimatePresence, {
children: selectedAchievement && jsxs(Fragment, {
children: [jsx(motion.div, {
className: 'fixed inset-0 glass-surface-dark/50 glass-glass-glass-backdrop-blur-sm glass-contrast-guard z-50 glass-contrast-guard',
initial: {
opacity: 0
},
animate: prefersReducedMotion ? {} : {
opacity: 1
},
exit: {
opacity: 0
},
onClick: () => setSelectedAchievement(null)
}), jsx(motion.div, {
className: 'fixed inset-0 glass-flex glass-items-center glass-justify-center z-50 glass-p-4',
initial: {
opacity: 0,
scale: 0.9
},
animate: prefersReducedMotion ? {} : {
opacity: 1,
scale: 1
},
exit: {
opacity: 0,
scale: 0.9
},
children: jsx("div", {
className: 'max-w-lg glass-w-full glass-glass-glass-backdrop-blur-lg glass-contrast-guard glass-surface-subtle/10 glass-border glass-border-white/20 glass-radius-xl glass-p-8 glass-contrast-guard',
children: jsxs("div", {
className: 'text-center',
children: [jsx("div", {
className: 'glass-flex glass-items-center glass-justify-center mb-4',
children: jsx("div", {
className: "glass-p-6 glass-radius-full glass-border-2",
style: {
backgroundColor: `${tierColors[selectedAchievement.tier].primary}20`,
borderColor: tierColors[selectedAchievement.tier].primary
},
children: jsx(selectedAchievement.icon, {
className: 'w-12 h-12 glass-touch-target glass-contrast-guard'
})
})
}), jsx("h2", {
className: 'glass-text-2xl font-bold text-primary mb-2',
children: selectedAchievement.title
}), jsxs("div", {
className: 'glass-flex glass-items-center glass-justify-center glass-gap-2 mb-4',
children: [jsx("div", {
className: 'glass-px-3 glass-py-1 glass-radius-full glass-text-sm font-bold glass-border',
style: {
backgroundColor: `${tierColors[selectedAchievement.tier].primary}20`,
borderColor: `${tierColors[selectedAchievement.tier].primary}40`,
color: tierColors[selectedAchievement.tier].primary
},
children: selectedAchievement.tier.toUpperCase()
}), jsxs("div", {
className: 'glass-px-3 glass-py-1 glass-surface-subtle/10 glass-border glass-border-white/20 glass-radius-full glass-text-sm text-primary/80',
children: [selectedAchievement.rarity, "% rare"]
})]
}), jsx("p", {
className: 'text-primary/70 mb-6',
children: selectedAchievement.description
}), !selectedAchievement.unlocked && jsxs("div", {
className: 'mb-6',
children: [jsxs("div", {
className: 'glass-flex glass-justify-between glass-items-center mb-2',
children: [jsx("span", {
className: 'glass-text-sm text-primary/60',
children: "Progress"
}), jsxs("span", {
className: 'glass-text-sm text-primary/60',
children: [selectedAchievement.progress, "/", selectedAchievement.maxProgress]
})]
}), jsx("div", {
className: 'h-3 glass-surface-subtle/10 glass-radius-full overflow-hidden',
children: jsx("div", {
className: 'glass-h-full glass-radius-full transition-all duration-1000',
style: {
backgroundColor: tierColors[selectedAchievement.tier].primary,
width: `${selectedAchievement.progress / selectedAchievement.maxProgress * 100}%`
}
})
})]
}), jsxs("div", {
className: 'glass-flex glass-items-center glass-justify-center glass-gap-6 mb-6',
children: [jsxs("div", {
className: 'text-center',
children: [jsx("div", {
className: 'glass-text-xl font-bold text-primary',
children: selectedAchievement.points
}), jsx("div", {
className: 'glass-text-sm text-primary/60',
children: "Points"
})]
}), jsxs("div", {
className: 'text-center',
children: [jsx("div", {
className: 'glass-text-xl font-bold text-primary',
children: selectedAchievement.category
}), jsx("div", {
className: 'glass-text-sm text-primary/60',
children: "Category"
})]
})]
}), selectedAchievement.reward && jsxs("div", {
className: 'glass-p-4 glass-gradient-primary glass-gradient-primary glass-gradient-primary glass-border glass-border-purple-500/30 glass-radius-xl mb-6',
children: [jsxs("div", {
className: 'glass-flex glass-items-center glass-justify-center glass-gap-2 mb-2',
children: [jsx(Gift, {
className: 'w-5 h-5 text-primary'
}), jsx("span", {
className: 'text-primary font-medium',
children: "Reward"
})]
}), jsxs("div", {
className: "glass-text-secondary glass-text-sm",
children: ["Unlocks: ", selectedAchievement.reward.value]
})]
}), selectedAchievement.unlocked && selectedAchievement.unlockedAt && jsxs("div", {
className: 'text-primary glass-text-sm',
children: ["\u2713 Unlocked on", " ", selectedAchievement.unlockedAt.toLocaleDateString()]
})]
})
})
})]
})
}), filteredAchievements.length === 0 && jsxs(motion.div, {
className: 'text-center glass-py-16',
initial: {
opacity: 0
},
animate: prefersReducedMotion ? {} : {
opacity: 1
},
children: [jsx(Trophy, {
className: 'w-16 h-16 text-primary/30 glass-mx-auto mb-4'
}), jsx("h2", {
className: 'glass-text-xl font-semibold text-primary/60 mb-2',
children: "No achievements found"
}), jsxs("p", {
className: 'text-primary/40',
children: ["Try adjusting your filters or", " ", !showLocked ? "show locked achievements" : "start reading to unlock some!"]
})]
})]
});
}
export { GlassTrophyCase, GlassTrophyCase as default };
//# sourceMappingURL=GlassTrophyCase.js.map