Changeset 50f2fb4 for src/components/exams.tsx

Timestamp:

01/30/26 01:40:27 (8 months ago)

Author:

Stefan-Saveski <stefansaveski19@…>

Branches:

master

Children:

ba52069

Parents:

298f9b3

Message:

Added dual language feature.

File:

• src/components/exams.tsx (modified) (11 diffs)

src/components/exams.tsx

@@ -1 +1 @@
 "use client"
 import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSort, faSortUp, faSortDown } from '@fortawesome/free-solid-svg-icons';
@@ -33 +34 @@
 
 const Exams = () => {
+  const { t } = useTranslation();
   const [sortField, setSortField] = useState<'grade' | 'date' | null>(null);
   const [sortOrder, setSortOrder] = useState<'asc' | 'desc' | null>(null);
@@ -185 +187 @@
     return (
       <div className="bg-white rounded-lg shadow-sm p-6">
-        Loading...
+        {t('loading', 'Loading...')}
       </div>
     );
@@ -194 +196 @@
       <div className="bg-white rounded-lg shadow-sm p-6">
         <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
-          {errorMessage}
+          {t('failed_to_load_exams', errorMessage)}
         </div>
       </div>
@@ -208 +210 @@
           <div className="text-center">
             <div className="text-3xl font-bold text-gray-900">{stats.average}</div>
-            <div className="text-sm text-gray-500 mt-1">Просек</div>
+            <div className="text-sm text-gray-500 mt-1">{t('average', 'Просек')}</div>
           </div>
 
@@ -217 +219 @@
               <span className="text-lg text-gray-400">/{stats.credits.total}</span>
             </div>
-            <div className="text-sm text-gray-500 mt-1">Кредити</div>
+            <div className="text-sm text-gray-500 mt-1">{t('credits', 'Кредити')}</div>
           </div>
 
@@ -223 +225 @@
           <div className="text-center">
             <div className="text-3xl font-bold text-gray-900">{stats.passed}</div>
-            <div className="text-sm text-gray-500 mt-1">Положени</div>
+            <div className="text-sm text-gray-500 mt-1">{t('passed', 'Положени')}</div>
           </div>
 
@@ -229 +231 @@
           <div className="text-center">
             <div className="text-3xl font-bold text-gray-900">{stats.remaining}</div>
-            <div className="text-sm text-gray-500 mt-1">Останато</div>
+            <div className="text-sm text-gray-500 mt-1">{t('remaining', 'Останато')}</div>
           </div>
         </div>
-        
+
         {/* Progress Bar spanning entire statistics section */}
         <div className="w-full bg-gray-200 rounded-full h-2">
-          <div 
+          <div
             className="bg-blue-500 h-2 rounded-full transition-all duration-300"
             style={{ width: `${creditsPercentage}%` }}
@@ -244 +246 @@
       {/* Exams Table */}
       <div>
-        <h3 className="text-xl font-semibold text-gray-900 mb-4">Испити</h3>
-        
+        <h3 className="text-xl font-semibold text-gray-900 mb-4">{t('exams', 'Испити')}</h3>
+
         <div className="overflow-x-auto">
           <table className="min-w-full">
@@ -251 +253 @@
               <tr className="border-b border-gray-200">
                 <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">#</th>
-                <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Предмет</th>
-                <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Семестар</th>
-                <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">Кредити</th>
+                <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">{t('subject', 'Предмет')}</th>
+                <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">{t('semester', 'Семестар')}</th>
+                <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">{t('credits', 'Кредити')}</th>
                 <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">
-                  <button 
+                  <button
                     onClick={handleSortByDate}
                     className="flex items-center gap-2 px-2 py-1 rounded-md hover:bg-gray-100 hover:text-gray-900 transition-all duration-200 transform hover:scale-105"
                   >
-                    Датум
-                    <FontAwesomeIcon 
-                      icon={getSortIcon('date')} 
+                    {t('date', 'Датум')}
+                    <FontAwesomeIcon
+                      icon={getSortIcon('date')}
                       className={`text-xs transition-colors duration-200 ${
                         sortField === 'date' ? 'text-blue-600' : 'text-gray-400 group-hover:text-gray-600'
@@ -269 +271 @@
                 </th>
                 <th className="text-left py-3 px-4 text-sm font-medium text-gray-500">
-                  <button 
+                  <button
                     onClick={handleSortByGrade}
                     className="flex items-center gap-2 px-2 py-1 rounded-md hover:bg-gray-100 hover:text-gray-900 transition-all duration-200 transform hover:scale-105"
                   >
-                    Оценка
-                    <FontAwesomeIcon 
-                      icon={getSortIcon('grade')} 
+                    {t('grade', 'Оценка')}
+                    <FontAwesomeIcon
+                      icon={getSortIcon('grade')}
                       className={`text-xs transition-colors duration-200 ${
                         sortField === 'grade' ? 'text-blue-600' : 'text-gray-400 group-hover:text-gray-600'