feat(translation): integrate useT hook for improved translation handling across components

src/features/quote/components/AuthorInfo.jsx

@@ -1,6 +1,6 @@
 import { MdPerson, MdOpenInNew } from 'react-icons/md';
 import { Tooltip } from 'components/Elements';
-import variables from 'config/variables';
+import { useT } from 'contexts';
 import QuoteButtons from './QuoteButtons';
 
 /**
@@ -17,9 +17,10 @@ export default function AuthorInfo({
   onShare,
   isFavourited,
 }) {
+  const t = useT();
   const showAuthorImg = localStorage.getItem('authorImg') !== 'false';
   const hasLink = authorOccupation !== 'Unknown' && authorlink !== null;
-  const trimmedLicense = authorimglicense?.substring(0, 40) + 
+  const trimmedLicense = authorimglicense?.substring(0, 40) +
                         (authorimglicense?.length > 40 ? '…' : '');
 
   return (
@@ -30,7 +31,7 @@ export default function AuthorInfo({
             {!authorimg && authorimg !== undefined && <MdPerson />}
           </div>
         )}
-        
+
         {author ? (
           <div className="author-content">
             <span className="title">{author}</span>
@@ -49,10 +50,10 @@ export default function AuthorInfo({
             <span className="subtitle pulse">loading</span>
           </div>
         )}
-        
+
         <div className="quote-buttons">
           {hasLink && (
-            <Tooltip title={variables.getMessage('widgets.quote.link_tooltip')}>
+            <Tooltip title={t('widgets.quote.link_tooltip')}>
               <a
                 href={authorlink}
                 className="quoteAuthorLink"

src/features/quote/components/QuoteButtons.jsx

@@ -1,16 +1,18 @@
 import { MdContentCopy, MdStarBorder, MdStar, MdIosShare } from 'react-icons/md';
 import { Tooltip } from 'components/Elements';
+import { useT } from 'contexts';
 import variables from 'config/variables';
 
 /**
  * Quote action buttons component
  */
-export default function QuoteButtons({ 
-  onCopy, 
-  onFavourite, 
-  onShare, 
+export default function QuoteButtons({
+  onCopy,
+  onFavourite,
+  onShare,
   isFavourited,
 }) {
+  const t = useT();
   const showCopy = localStorage.getItem('copyButton') !== 'false';
   const showShare = localStorage.getItem('quoteShareButton') !== 'false';
   const showFavourite = localStorage.getItem('favouriteQuoteEnabled') === 'true';
@@ -18,39 +20,39 @@ export default function QuoteButtons({
   return (
     <>
       {showCopy && (
-        <Tooltip title={variables.getMessage('widgets.quote.copy')}>
+        <Tooltip title={t('widgets.quote.copy')}>
           <button
             onClick={onCopy}
-            aria-label={variables.getMessage('widgets.quote.copy')}
+            aria-label={t('widgets.quote.copy')}
           >
             <MdContentCopy className="copyButton" />
           </button>
         </Tooltip>
       )}
       {showShare && (
-        <Tooltip title={variables.getMessage('widgets.quote.share')}>
+        <Tooltip title={t('widgets.quote.share')}>
           <button
             onClick={onShare}
-            aria-label={variables.getMessage('widgets.quote.share')}
+            aria-label={t('widgets.quote.share')}
           >
             <MdIosShare className="copyButton" />
           </button>
         </Tooltip>
       )}
       {showFavourite && (
-        <Tooltip 
+        <Tooltip
           title={
             isFavourited
-              ? variables.getMessage('widgets.quote.unfavourite')
-              : variables.getMessage('widgets.quote.favourite')
+              ? t('widgets.quote.unfavourite')
+              : t('widgets.quote.favourite')
           }
         >
           <button
             onClick={onFavourite}
             aria-label={
               isFavourited
-                ? variables.getMessage('widgets.quote.unfavourite')
-                : variables.getMessage('widgets.quote.favourite')
+                ? t('widgets.quote.unfavourite')
+                : t('widgets.quote.favourite')
             }
           >
             {isFavourited ? (