forked from izu/student-web-if-development-kit
Andrie
271 lines
12 KiB
TypeScript
271 lines
12 KiB
TypeScript
import { useState, useMemo } from 'react';
|
|
import { Filter, ChevronDown, Search, X } from 'lucide-react';
|
|
import { type Achievement } from '../data';
|
|
import { useData } from '../context/DataContext';
|
|
import AchievementCard from './AchievementCard';
|
|
import AchievementModal from './AchievementModal';
|
|
import { useLang } from '../context/LanguageContext';
|
|
|
|
const INITIAL_COUNT = 3;
|
|
const LOAD_MORE_COUNT = 3;
|
|
|
|
export default function AchievementGrid() {
|
|
const { t } = useLang();
|
|
const { achievements, loading, error, refetch } = useData();
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [filterLevel, setFilterLevel] = useState('');
|
|
const [filterCategory, setFilterCategory] = useState('');
|
|
const [filterYear, setFilterYear] = useState('');
|
|
const [visibleCount, setVisibleCount] = useState(INITIAL_COUNT);
|
|
const [selectedAchievement, setSelectedAchievement] = useState<Achievement | null>(null);
|
|
|
|
// Derive unique categories and years from data
|
|
const categories = useMemo(
|
|
() => [...new Set(achievements.map((a) => a.category))].sort(),
|
|
[achievements]
|
|
);
|
|
const years = useMemo(
|
|
() => [...new Set(achievements.map((a) => a.year))].sort((a: number, b: number) => b - a),
|
|
[achievements]
|
|
);
|
|
|
|
// Filter + search logic
|
|
const filtered = useMemo(() => {
|
|
const q = searchQuery.toLowerCase().trim();
|
|
return achievements.filter((a) => {
|
|
const matchSearch =
|
|
!q ||
|
|
a.title.toLowerCase().includes(q) ||
|
|
a.team.toLowerCase().includes(q) ||
|
|
a.category.toLowerCase().includes(q) ||
|
|
a.competition.toLowerCase().includes(q);
|
|
const matchLevel = !filterLevel || a.level === filterLevel;
|
|
const matchCategory = !filterCategory || a.category === filterCategory;
|
|
const matchYear = !filterYear || String(a.year) === filterYear;
|
|
return matchSearch && matchLevel && matchCategory && matchYear;
|
|
});
|
|
}, [searchQuery, filterLevel, filterCategory, filterYear, achievements]);
|
|
|
|
const visible = filtered.slice(0, visibleCount);
|
|
const hasMore = visibleCount < filtered.length;
|
|
const isFiltered = searchQuery || filterLevel || filterCategory || filterYear;
|
|
|
|
const resetFilters = () => {
|
|
setSearchQuery('');
|
|
setFilterLevel('');
|
|
setFilterCategory('');
|
|
setFilterYear('');
|
|
setVisibleCount(INITIAL_COUNT);
|
|
};
|
|
|
|
const handleFilterChange = (setter: (v: string) => void) => (v: string) => {
|
|
setter(v);
|
|
setVisibleCount(INITIAL_COUNT);
|
|
};
|
|
|
|
const handleLoadMore = () => setVisibleCount((prev) => prev + LOAD_MORE_COUNT);
|
|
|
|
const handleShowLess = () => {
|
|
setVisibleCount(INITIAL_COUNT);
|
|
document.getElementById('achievement-grid-section')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
};
|
|
|
|
return (
|
|
<>
|
|
{/* Achievement Modal */}
|
|
<AchievementModal achievement={selectedAchievement} onClose={() => setSelectedAchievement(null)} />
|
|
|
|
<section id="achievement-grid-section" className="py-8 bg-white">
|
|
{/* Section header */}
|
|
<div className="max-w-7xl mx-auto px-4 lg:px-8 mb-8">
|
|
<h2 className="text-3xl md:text-4xl font-black font-display text-primary-navy mb-2">
|
|
{t.achievement.sectionTitle}
|
|
</h2>
|
|
<p className="text-slate-500 text-base max-w-2xl">
|
|
{t.achievement.sectionDesc}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="max-w-7xl mx-auto px-4 lg:px-8">
|
|
{/* Filter + Search Section */}
|
|
<div className="bg-white/80 backdrop-blur-md p-4 rounded-lg shadow-sm border-t-4 border-primary-gold mb-8 space-y-3">
|
|
{/* Row 1: Label + Reset */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="text-base font-bold font-display text-primary-navy flex items-center gap-2">
|
|
<Filter className="text-primary-navy" size={18} />
|
|
{t.achievement.filterTitle}
|
|
</div>
|
|
{isFiltered && (
|
|
<button
|
|
onClick={resetFilters}
|
|
className="flex items-center gap-1 text-xs font-bold text-slate-500 hover:text-primary-navy transition-colors"
|
|
>
|
|
<X size={13} />
|
|
{t.achievement.resetFilter}
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Row 2: Search bar */}
|
|
<div className="relative">
|
|
<Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" />
|
|
<input
|
|
id="search-achievement"
|
|
type="text"
|
|
value={searchQuery}
|
|
onChange={(e) => { setSearchQuery(e.target.value); setVisibleCount(INITIAL_COUNT); }}
|
|
placeholder={t.achievement.searchPlaceholder}
|
|
className="w-full bg-slate-50 text-slate-700 text-sm rounded py-2 pl-9 pr-4 border border-slate-200 focus:outline-none focus:ring-2 focus:ring-primary-gold"
|
|
/>
|
|
{searchQuery && (
|
|
<button
|
|
onClick={() => { setSearchQuery(''); setVisibleCount(INITIAL_COUNT); }}
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
|
|
aria-label="Hapus pencarian"
|
|
>
|
|
<X size={14} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Row 3: Dropdowns */}
|
|
<div className="flex flex-wrap gap-3">
|
|
{/* Level Filter */}
|
|
<div className="relative flex-1 min-w-[130px]">
|
|
<select
|
|
id="filter-level"
|
|
value={filterLevel}
|
|
onChange={(e) => handleFilterChange(setFilterLevel)(e.target.value)}
|
|
className="w-full bg-slate-50 text-slate-700 font-bold text-sm rounded py-2 pl-4 pr-9 shadow-sm focus:ring-2 focus:ring-primary-gold appearance-none cursor-pointer border border-slate-200"
|
|
>
|
|
<option value="">{t.achievement.allLevel}</option>
|
|
<option value="Internasional">Internasional</option>
|
|
<option value="Nasional">Nasional</option>
|
|
<option value="Regional">Regional</option>
|
|
</select>
|
|
<ChevronDown size={14} className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" />
|
|
</div>
|
|
|
|
{/* Category Filter */}
|
|
<div className="relative flex-1 min-w-[130px]">
|
|
<select
|
|
id="filter-category"
|
|
value={filterCategory}
|
|
onChange={(e) => handleFilterChange(setFilterCategory)(e.target.value)}
|
|
className="w-full bg-slate-50 text-slate-700 font-bold text-sm rounded py-2 pl-4 pr-9 shadow-sm focus:ring-2 focus:ring-primary-gold appearance-none cursor-pointer border border-slate-200"
|
|
>
|
|
<option value="">{t.achievement.allField}</option>
|
|
{categories.map((cat) => (
|
|
<option key={cat} value={cat}>{cat}</option>
|
|
))}
|
|
</select>
|
|
<ChevronDown size={14} className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" />
|
|
</div>
|
|
|
|
{/* Year Filter */}
|
|
<div className="relative flex-1 min-w-[100px]">
|
|
<select
|
|
id="filter-year"
|
|
value={filterYear}
|
|
onChange={(e) => handleFilterChange(setFilterYear)(e.target.value)}
|
|
className="w-full bg-slate-50 text-slate-700 font-bold text-sm rounded py-2 pl-4 pr-9 shadow-sm focus:ring-2 focus:ring-primary-gold appearance-none cursor-pointer border border-slate-200"
|
|
>
|
|
<option value="">{t.achievement.allYear}</option>
|
|
{years.map((yr) => (
|
|
<option key={yr} value={String(yr)}>{yr}</option>
|
|
))}
|
|
</select>
|
|
<ChevronDown size={14} className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Results count */}
|
|
{isFiltered && (
|
|
<p className="text-sm text-slate-500 font-medium mb-6">
|
|
{t.achievement.showing}{' '}
|
|
<span className="font-bold text-primary-navy">{filtered.length}</span>{' '}
|
|
{t.achievement.matching}
|
|
</p>
|
|
)}
|
|
|
|
{/* Grid */}
|
|
{loading ? (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
|
|
{[1, 2, 3].map((n) => (
|
|
<div key={n} className="bg-white rounded-lg border border-slate-200 overflow-hidden shadow-sm animate-pulse">
|
|
<div className="h-52 bg-slate-200 w-full" />
|
|
<div className="p-6 space-y-4">
|
|
<div className="h-4 bg-slate-200 rounded w-1/4" />
|
|
<div className="h-6 bg-slate-200 rounded w-3/4" />
|
|
<div className="h-4 bg-slate-200 rounded w-5/6" />
|
|
<div className="h-4 bg-slate-200 rounded w-2/3" />
|
|
<div className="h-10 bg-slate-200 rounded w-1/3 mt-4" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : error ? (
|
|
<div className="text-center py-20 text-red-500">
|
|
<p className="text-lg font-semibold">Gagal memuat data</p>
|
|
<p className="text-sm mt-1">{error}</p>
|
|
<button
|
|
onClick={refetch}
|
|
className="mt-4 px-4 py-2 bg-primary-navy text-white font-bold rounded hover:bg-opacity-95 transition-all text-sm"
|
|
>
|
|
Coba Lagi
|
|
</button>
|
|
</div>
|
|
) : visible.length === 0 ? (
|
|
<div className="text-center py-20 text-slate-400">
|
|
<p className="text-lg font-semibold">{t.achievement.noData}</p>
|
|
<p className="text-sm mt-1">{t.achievement.noDataSub}</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
|
|
{visible.map((achievement) => (
|
|
<div key={achievement.id} className="animate-fade-in">
|
|
<AchievementCard
|
|
achievement={achievement}
|
|
onReadMore={(a) => setSelectedAchievement(a)}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Load More / Show Less */}
|
|
<div className="mt-20 flex flex-wrap items-center justify-center gap-6">
|
|
{hasMore && (
|
|
<button
|
|
id="load-more-achievement"
|
|
onClick={handleLoadMore}
|
|
className="text-primary-navy font-black text-lg underline underline-offset-[12px] decoration-primary-gold decoration-4 hover:text-primary-gold transition-colors flex items-center gap-2"
|
|
>
|
|
{t.achievement.loadMore}
|
|
<ChevronDown size={20} />
|
|
</button>
|
|
)}
|
|
|
|
{!hasMore && visible.length > 0 && filtered.length > INITIAL_COUNT && (
|
|
<p className="text-slate-400 text-sm font-medium">
|
|
{t.achievement.showing} {filtered.length} {t.achievement.allShown}
|
|
</p>
|
|
)}
|
|
|
|
{visibleCount > INITIAL_COUNT && visible.length > 0 && (
|
|
<button
|
|
onClick={handleShowLess}
|
|
className="text-slate-400 font-bold text-sm underline underline-offset-4 decoration-slate-300 decoration-2 hover:text-slate-600 transition-colors flex items-center gap-1.5"
|
|
>
|
|
<ChevronDown size={16} className="rotate-180" />
|
|
{t.achievement.showLess}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|