feat: add internationalization support

src/pages/tools/time/check-leap-years/index.tsx

@@ -6,6 +6,7 @@ import ToolTextResult from '@components/result/ToolTextResult';
 import { GetGroupsType } from '@components/options/ToolOptions';
 import { CardExampleType } from '@components/examples/ToolExamples';
 import { checkLeapYear } from './service';
+import { useTranslation } from 'react-i18next';
 
 const initialValues = {};
 
@@ -56,6 +57,7 @@ export default function ConvertDaysToHours({
   title,
   longDescription
 }: ToolComponentProps) {
+  const { t } = useTranslation();
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
 
@@ -75,7 +77,10 @@ export default function ConvertDaysToHours({
       getGroups={getGroups}
       setInput={setInput}
       compute={compute}
-      toolInfo={{ title: `What is a ${title}?`, description: longDescription }}
+      toolInfo={{
+        title: t('time.checkLeapYears.toolInfo.title', { title }),
+        description: longDescription
+      }}
       exampleCards={exampleCards}
     />
   );

src/pages/tools/time/check-leap-years/meta.ts

@@ -2,13 +2,17 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('time', {
-  path: 'check-leap-years',
   name: 'Check Leap Years',
-  icon: 'arcticons:calendar-simple-29',
+  path: 'check-leap-years',
+  icon: 'material-symbols:calendar-month',
   description:
-    ' You can check if a given calendar year is a leap year. You can enter one or many different years into the input field with one date per line and get the answer to the test question of whether the given year is a leap year.',
-  shortDescription: 'Convert days to hours easily.',
-  keywords: ['check', 'leap', 'years'],
-  longDescription: `This is a quick online utility for testing if the given year is a leap year. Just as a reminder, a leap year has 366 days, which is one more day than a common year. This extra day is added to the month of February and it falls on February 29th. There's a simple mathematical formula for calculating if the given year is a leap year. Leap years are those years that are divisible by 4 but not divisible by 100, as well as years that are divisible by 100 and 400 simultaneously. Our algorithm checks each input year using this formula and outputs the year's status. For example, if you enter the value "2025" as input, the program will display "2025 is not a leap year.", and for the value "2028", the status will be "2028 is a leap year.". You can also enter multiple years as the input in a column and get a matching column of statuses as the output.`,
-  component: lazy(() => import('./index'))
+    'Check if a year is a leap year. Enter a year to determine if it has 366 days instead of 365.',
+  shortDescription: 'Check if a year is a leap year',
+  keywords: ['leap', 'year', 'calendar', 'date'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'time.checkLeapYears.name',
+    description: 'time.checkLeapYears.description',
+    shortDescription: 'time.checkLeapYears.shortDescription'
+  }
 });

src/pages/tools/time/convert-days-to-hours/index.tsx

@@ -8,6 +8,7 @@ import { GetGroupsType } from '@components/options/ToolOptions';
 import { CardExampleType } from '@components/examples/ToolExamples';
 import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
 import { convertDaysToHours } from './service';
+import { useTranslation } from 'react-i18next';
 
 const initialValues = {
   hoursFlag: false
@@ -62,6 +63,7 @@ export default function ConvertDaysToHours({
   title,
   longDescription
 }: ToolComponentProps) {
+  const { t } = useTranslation();
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
 
@@ -74,14 +76,14 @@ export default function ConvertDaysToHours({
     updateField
   }) => [
     {
-      title: 'Hours Name',
+      title: t('time.convertDaysToHours.hoursName'),
       component: (
         <Box>
           <CheckboxWithDesc
             onChange={(val) => updateField('hoursFlag', val)}
             checked={values.hoursFlag}
-            title={'Add Hours Name'}
-            description={'Append the string hours to output values'}
+            title={t('time.convertDaysToHours.addHoursName')}
+            description={t('time.convertDaysToHours.addHoursNameDescription')}
           />
         </Box>
       )
@@ -98,7 +100,10 @@ export default function ConvertDaysToHours({
       getGroups={getGroups}
       setInput={setInput}
       compute={compute}
-      toolInfo={{ title: `What is a ${title}?`, description: longDescription }}
+      toolInfo={{
+        title: t('time.convertDaysToHours.toolInfo.title'),
+        description: t('time.convertDaysToHours.toolInfo.description')
+      }}
       exampleCards={exampleCards}
     />
   );

src/pages/tools/time/convert-days-to-hours/meta.ts

@@ -2,14 +2,17 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('time', {
-  path: 'convert-days-to-hours',
   name: 'Convert Days to Hours',
-  icon: 'ri:24-hours-line',
+  path: 'convert-days-to-hours',
+  icon: 'material-symbols:schedule',
   description:
-    'With this browser-based application, you can calculate how many hours there are in the given number of days. The application takes the input values (days), multiplies them by 24 and that converts them into hours. It supports both integer and decimal day values and it can convert multiple values at the same time.',
-  shortDescription: 'Convert days to hours easily.',
-  keywords: ['convert', 'days', 'hours'],
-  longDescription:
-    'This is a quick online utility for converting days to hours. One day is 24 hours and to convert days to hours, we simply do the multiplication operation: hours = days × 24. For example, 2 days is 2 × 24 = 48 hours and 5 days is 5 × 24 = 120 hours. You can convert not only full days to hours but also fractional day values. For example, 1.5 days is 1.5 × 24 = 36 hours and 4.6 days is 4.6 × 24 = 110.4 hours. You can enter multiple days in the input field (one value per line). In this case, they will all be computed in parallel and at once. The program also supports the postfix "days" or "d" for the input values and you can add the postfix "hours" to the output values. Timeabulous!',
-  component: lazy(() => import('./index'))
+    'Convert days to hours. Enter the number of days to get the equivalent number of hours.',
+  shortDescription: 'Convert days to hours',
+  keywords: ['days', 'hours', 'convert', 'time'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'time.convertDaysToHours.name',
+    description: 'time.convertDaysToHours.description',
+    shortDescription: 'time.convertDaysToHours.shortDescription'
+  }
 });

src/pages/tools/time/convert-hours-to-days/meta.ts

@@ -2,14 +2,17 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('time', {
-  path: 'convert-hours-to-days',
   name: 'Convert Hours to Days',
-  icon: 'mdi:hours-24',
+  path: 'convert-hours-to-days',
+  icon: 'material-symbols:schedule',
   description:
-    'With this browser-based application, you can calculate how many days there are in the given number of hours. Given one or more hour values in the input, it converts them into days via the simple math formula: days = hours/24. It works with arbitrary large hour values and you can also customize the decimal day precision.',
-  shortDescription: 'Convert hours to days easily.',
-  keywords: ['convert', 'hours', 'days'],
-  longDescription:
-    "This is a quick online utility for converting hours to days. To figure out the number of days in the specified hours, the program divides them by 24. For example, if the input hours value is 48, then by doing 48/24, it finds that there are 2 days, or if the hours value is 120, then it's 120/24 = 5 days. If the hours value is not divisible by 24, then the number of days is displayed as a decimal number. For example, 36 hours is 36/24 = 1.5 days and 100 hours is approximately 4.167 days. You can specify the precision of the decimal fraction calculation in the options. You can also enable the option that adds the postfix 'days' to all the output values. Timeabulous!",
-  component: lazy(() => import('./index'))
+    'Convert hours to days. Enter the number of hours to get the equivalent number of days.',
+  shortDescription: 'Convert hours to days',
+  keywords: ['hours', 'days', 'convert', 'time'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'time.convertHoursToDays.name',
+    description: 'time.convertHoursToDays.description',
+    shortDescription: 'time.convertHoursToDays.shortDescription'
+  }
 });

src/pages/tools/time/convert-seconds-to-time/index.tsx

@@ -8,6 +8,7 @@ import { GetGroupsType } from '@components/options/ToolOptions';
 import { CardExampleType } from '@components/examples/ToolExamples';
 import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
 import { convertSecondsToTime } from './service';
+import { useTranslation } from 'react-i18next';
 
 const initialValues = {
   paddingFlag: false
@@ -68,6 +69,7 @@ export default function SecondsToTime({
   title,
   longDescription
 }: ToolComponentProps) {
+  const { t } = useTranslation();
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
 
@@ -80,14 +82,14 @@ export default function SecondsToTime({
     updateField
   }) => [
     {
-      title: 'Time Padding',
+      title: t('time.convertSecondsToTime.timePadding'),
       component: (
         <Box>
           <CheckboxWithDesc
             onChange={(val) => updateField('paddingFlag', val)}
             checked={values.paddingFlag}
-            title={'Add Padding'}
-            description={'Add zero padding to hours, minutes, and seconds.'}
+            title={t('time.convertSecondsToTime.addPadding')}
+            description={t('time.convertSecondsToTime.addPaddingDescription')}
           />
         </Box>
       )
@@ -104,7 +106,10 @@ export default function SecondsToTime({
       getGroups={getGroups}
       setInput={setInput}
       compute={compute}
-      toolInfo={{ title: `What is a ${title}?`, description: longDescription }}
+      toolInfo={{
+        title: t('time.convertSecondsToTime.toolInfo.title', { title }),
+        description: longDescription
+      }}
       exampleCards={exampleCards}
     />
   );

src/pages/tools/time/convert-seconds-to-time/meta.ts

@@ -2,14 +2,17 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('time', {
-  path: 'convert-seconds-to-time',
   name: 'Convert Seconds to Time',
-  icon: 'fluent-mdl2:time-picker',
+  path: 'convert-seconds-to-time',
+  icon: 'material-symbols:schedule',
   description:
-    'With this browser-based application, you can convert seconds to clock time. Given the seconds input value, it converts them into full hours (H), minutes (M), and seconds (S) and prints them in human-readable clock format (H:M:S or HH:MM:SS) in the output field.',
-  shortDescription: 'Quicky convert seconds to clock time in H:M:S format.',
-  keywords: ['convert', 'seconds', 'time', 'clock'],
-  longDescription:
-    'This is a quick online utility for converting seconds to H:M:S or HH:MM:SS digital clock time format. It calculates the number of full hours, full minutes, and remaining seconds from the input seconds and outputs regular clock time. For example, 100 seconds is 1 minute and 40 seconds so we get the clock time 00:01:40. To convert seconds to human-readable time we use the Euclidean division algorithm, also known as a division with remainder. If "n" is the input seconds value, then the hours "h" are calculated from the formula n = 3600×h + r, where r is the remainder of dividing n by 3600. Minutes "m" are calculated from the formula r = 60×m + s, and seconds "s" is the remainder of dividing r by 60. For example, if the input n = 4000, then 4000 = 3600×1 + 400. From here we find that the full hours value is 1. Next, the remaining 400 seconds are equal to 60×6 + 40. From here, there are 6 full minutes and 40 more remaining seconds. Thus, we find that 4000 seconds in human time 1 hour, 6 minutes, and 40 seconds. By default, the program outputs the clock time in a padded HH:MM:SS format (i.e. 01:06:40) but you can also disable the padding option and get just H:M:S (i.e. 1:6:40). Timeabulous!',
-  component: lazy(() => import('./index'))
+    'Convert seconds to a readable time format (hours:minutes:seconds). Enter the number of seconds to get the formatted time.',
+  shortDescription: 'Convert seconds to time format',
+  keywords: ['seconds', 'time', 'convert', 'format'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'time.convertSecondsToTime.name',
+    description: 'time.convertSecondsToTime.description',
+    shortDescription: 'time.convertSecondsToTime.shortDescription'
+  }
 });

src/pages/tools/time/convert-time-to-seconds/index.tsx

@@ -5,6 +5,7 @@ import ToolTextInput from '@components/input/ToolTextInput';
 import ToolTextResult from '@components/result/ToolTextResult';
 import { CardExampleType } from '@components/examples/ToolExamples';
 import { convertTimetoSeconds } from './service';
+import { useTranslation } from 'react-i18next';
 
 const initialValues = {};
 type InitialValuesType = typeof initialValues;
@@ -75,6 +76,7 @@ export default function TimeToSeconds({
   title,
   longDescription
 }: ToolComponentProps) {
+  const { t } = useTranslation();
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
 
@@ -92,7 +94,10 @@ export default function TimeToSeconds({
       getGroups={null}
       setInput={setInput}
       compute={compute}
-      toolInfo={{ title: `What is a ${title}?`, description: longDescription }}
+      toolInfo={{
+        title: t('time.convertTimeToSeconds.toolInfo.title', { title }),
+        description: longDescription
+      }}
       exampleCards={exampleCards}
     />
   );

src/pages/tools/time/convert-time-to-seconds/meta.ts

@@ -2,14 +2,17 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('time', {
-  path: 'convert-time-to-seconds',
   name: 'Convert Time to Seconds',
-  icon: 'ic:round-timer-10-select',
+  path: 'convert-time-to-seconds',
+  icon: 'material-symbols:schedule',
   description:
-    'With this browser-based application, you can convert clock time provided in hours, minutes, and seconds into just seconds. Given a time in HH:MM:SS format, it calculates HH*3600 + MM*60 + SS and prints this value in the output box. It supports AM/PM time formats as well as clock times beyond 24 hours.',
-  shortDescription: 'Quickly convert clock time in H:M:S format to seconds.',
-  keywords: ['convert', 'seconds', 'time', 'clock'],
-  longDescription:
-    'This is a quick online utility for calculating how many seconds there are in the given time. When you input a full clock time in the input box (in format H:M:S), it gets split into hours, minutes, and seconds, and using the math formula hours×60×60 plus minutes×60 plus seconds, it finds the seconds. If seconds are missing (format is H:M), then the formula becomes hours×60×60 plus minutes×60. If minutes are also missing, then the formula becomes hours×60×60. As an extra feature, hours, minutes, and seconds are not limited to just 24 hours, 60 minutes, and 60 seconds. You can use any hours value, any minutes value, and any seconds value. For example, the input time "72:00:00" will find the number of seconds in three days (72 hours is 3×24 hours) and the input time "0:1000:0" will find seconds in 1000 minutes. Timeabulous!',
-  component: lazy(() => import('./index'))
+    'Convert time format (hours:minutes:seconds) to total seconds. Enter time in HH:MM:SS format to get the total seconds.',
+  shortDescription: 'Convert time format to seconds',
+  keywords: ['time', 'seconds', 'convert', 'format'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'time.convertTimeToSeconds.name',
+    description: 'time.convertTimeToSeconds.description',
+    shortDescription: 'time.convertTimeToSeconds.shortDescription'
+  }
 });

src/pages/tools/time/crontab-guru/meta.ts

@@ -2,23 +2,17 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('time', {
-  name: 'Crontab explainer',
+  name: 'Crontab Guru',
   path: 'crontab-guru',
-  icon: 'mdi:calendar-clock',
+  icon: 'material-symbols:schedule',
   description:
-    'Parse, validate, and explain crontab expressions in plain English.',
-  shortDescription: 'Crontab expression parser and explainer',
-  keywords: [
-    'crontab',
-    'cron',
-    'schedule',
-    'guru',
-    'time',
-    'expression',
-    'parser',
-    'explain'
-  ],
-  longDescription:
-    'Enter a crontab expression (like "35 16 * * 0-5") to get a human-readable explanation and validation. Useful for understanding and debugging cron schedules. Inspired by crontab.guru.',
-  component: lazy(() => import('./index'))
+    'Generate and understand cron expressions. Create cron schedules for automated tasks and system jobs.',
+  shortDescription: 'Generate and understand cron expressions',
+  keywords: ['cron', 'schedule', 'automation', 'expression'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'time.crontabGuru.name',
+    description: 'time.crontabGuru.description',
+    shortDescription: 'time.crontabGuru.shortDescription'
+  }
 });

src/pages/tools/time/i18n/en.json

@@ -0,0 +1,74 @@
+{
+  "checkLeapYears": {
+    "title": "Check Leap Years",
+    "description": "Check if a year is a leap year and get leap year information.",
+    "inputTitle": "Input year",
+    "resultTitle": "Leap year result",
+    "toolInfo": {
+      "title": "What is a Leap Year?",
+      "description": "A leap year is a year containing one additional day (February 29) to keep the calendar year synchronized with the astronomical year. Leap years occur every 4 years, except for years that are divisible by 100 but not by 400."
+    }
+  },
+  "convertDaysToHours": {
+    "title": "Convert Days to Hours",
+    "description": "Convert days to hours with customizable options.",
+    "hoursName": "Hours Name",
+    "addHoursName": "Add Hours Name",
+    "addHoursNameDescription": "Append the string hours to output values",
+    "toolInfo": {
+      "title": "Convert Days to Hours",
+      "description": "This tool allows you to convert days to hours. You can input days as numbers or with units, and the tool will convert them to hours. You can also choose to append the 'hours' suffix to the output values."
+    }
+  },
+  "convertHoursToDays": {
+    "title": "Convert Hours to Days",
+    "description": "Convert hours to days with customizable options.",
+    "daysName": "Days Name",
+    "addDaysName": "Add Days Name",
+    "addDaysNameDescription": "Append the string days to output values",
+    "toolInfo": {
+      "title": "Convert Hours to Days",
+      "description": "This tool allows you to convert hours to days. You can input hours as numbers or with units, and the tool will convert them to days. You can also choose to append the 'days' suffix to the output values."
+    }
+  },
+  "convertSecondsToTime": {
+    "title": "Convert Seconds to Time",
+    "description": "Convert seconds to formatted time (HH:MM:SS).",
+    "inputTitle": "Input seconds",
+    "resultTitle": "Time format",
+    "toolInfo": {
+      "title": "Convert Seconds to Time",
+      "description": "This tool allows you to convert seconds to a formatted time string in HH:MM:SS format. It's useful for displaying durations and time intervals."
+    }
+  },
+  "convertTimeToSeconds": {
+    "title": "Convert Time to Seconds",
+    "description": "Convert formatted time (HH:MM:SS) to seconds.",
+    "inputTitle": "Input time",
+    "resultTitle": "Seconds",
+    "toolInfo": {
+      "title": "Convert Time to Seconds",
+      "description": "This tool allows you to convert formatted time strings (HH:MM:SS) to seconds. It's useful for calculating durations and time intervals."
+    }
+  },
+  "timeBetweenDates": {
+    "title": "Time Between Dates",
+    "description": "Calculate the time difference between two dates.",
+    "inputTitle": "Input dates",
+    "resultTitle": "Time difference",
+    "toolInfo": {
+      "title": "Time Between Dates",
+      "description": "This tool allows you to calculate the time difference between two dates. You can specify the format and get the result in various units."
+    }
+  },
+  "truncateClockTime": {
+    "title": "Truncate Clock Time",
+    "description": "Remove seconds from time format (HH:MM:SS to HH:MM).",
+    "inputTitle": "Input time",
+    "resultTitle": "Truncated time",
+    "toolInfo": {
+      "title": "Truncate Clock Time",
+      "description": "This tool allows you to remove seconds from time format, converting HH:MM:SS to HH:MM. It's useful for simplifying time displays."
+    }
+  }
+}

src/pages/tools/time/time-between-dates/index.tsx

@@ -11,6 +11,7 @@ import {
 } from './service';
 import * as Yup from 'yup';
 import { CardExampleType } from '@components/examples/ToolExamples';
+import { useTranslation } from 'react-i18next';
 
 type TimeUnit =
   | 'milliseconds'
@@ -120,11 +121,12 @@ const exampleCards: CardExampleType<InitialValuesType>[] = [
 ];
 
 export default function TimeBetweenDates() {
+  const { t } = useTranslation();
   const [result, setResult] = useState<string>('');
 
   return (
     <ToolContent
-      title="Time Between Dates"
+      title={t('time.timeBetweenDates.title')}
       inputComponent={null}
       resultComponent={
         result ? (
@@ -153,29 +155,28 @@ export default function TimeBetweenDates() {
       validationSchema={validationSchema}
       exampleCards={exampleCards}
       toolInfo={{
-        title: 'Time Between Dates Calculator',
-        description:
-          'Calculate the exact time difference between two dates and times, with support for different timezones. This tool provides a detailed breakdown of the time difference in various units (years, months, days, hours, minutes, and seconds).'
+        title: t('time.timeBetweenDates.toolInfo.title'),
+        description: t('time.timeBetweenDates.toolInfo.description')
       }}
       getGroups={({ values, updateField }) => [
         {
-          title: 'Start Date & Time',
+          title: t('time.timeBetweenDates.startDateTime'),
           component: (
             <Box>
               <TextFieldWithDesc
-                description="Start Date"
+                description={t('time.timeBetweenDates.startDate')}
                 value={values.startDate}
                 onOwnChange={(val) => updateField('startDate', val)}
                 type="date"
               />
               <TextFieldWithDesc
-                description="Start Time"
+                description={t('time.timeBetweenDates.startTime')}
                 value={values.startTime}
                 onOwnChange={(val) => updateField('startTime', val)}
                 type="time"
               />
               <SelectWithDesc
-                description="Start Timezone"
+                description={t('time.timeBetweenDates.startTimezone')}
                 selected={values.startTimezone}
                 onChange={(val: string) => updateField('startTimezone', val)}
                 options={timezoneOptions}
@@ -184,23 +185,23 @@ export default function TimeBetweenDates() {
           )
         },
         {
-          title: 'End Date & Time',
+          title: t('time.timeBetweenDates.endDateTime'),
           component: (
             <Box>
               <TextFieldWithDesc
-                description="End Date"
+                description={t('time.timeBetweenDates.endDate')}
                 value={values.endDate}
                 onOwnChange={(val) => updateField('endDate', val)}
                 type="date"
               />
               <TextFieldWithDesc
-                description="End Time"
+                description={t('time.timeBetweenDates.endTime')}
                 value={values.endTime}
                 onOwnChange={(val) => updateField('endTime', val)}
                 type="time"
               />
               <SelectWithDesc
-                description="End Timezone"
+                description={t('time.timeBetweenDates.endTimezone')}
                 selected={values.endTimezone}
                 onChange={(val: string) => updateField('endTimezone', val)}
                 options={timezoneOptions}

src/pages/tools/time/time-between-dates/meta.ts

@@ -4,19 +4,15 @@ import { lazy } from 'react';
 export const tool = defineTool('time', {
   name: 'Time Between Dates',
   path: 'time-between-dates',
-  icon: 'tabler:clock-minus',
+  icon: 'material-symbols:schedule',
   description:
-    'Calculate the exact time difference between two dates and times, with support for different timezones. This tool provides a detailed breakdown of the time difference in various units (years, months, days, hours, minutes, and seconds).',
-  shortDescription:
-    'Calculate the precise time duration between two dates with timezone support.',
-  keywords: [
-    'time',
-    'dates',
-    'difference',
-    'duration',
-    'calculator',
-    'timezones',
-    'interval'
-  ],
-  component: lazy(() => import('./index'))
+    'Calculate the time difference between two dates. Get the exact duration in days, hours, minutes, and seconds.',
+  shortDescription: 'Calculate time between two dates',
+  keywords: ['dates', 'time', 'difference', 'duration', 'calculate'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'time.timeBetweenDates.name',
+    description: 'time.timeBetweenDates.description',
+    shortDescription: 'time.timeBetweenDates.shortDescription'
+  }
 });

src/pages/tools/time/truncate-clock-time/index.tsx

@@ -9,6 +9,7 @@ import { CardExampleType } from '@components/examples/ToolExamples';
 import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
 import SimpleRadio from '@components/options/SimpleRadio';
 import { truncateClockTime } from './service';
+import { useTranslation } from 'react-i18next';
 
 const initialValues = {
   onlySecond: true,
@@ -67,6 +68,7 @@ export default function TruncateClockTime({
   title,
   longDescription
 }: ToolComponentProps) {
+  const { t } = useTranslation();
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
 
@@ -86,48 +88,50 @@ export default function TruncateClockTime({
     updateField
   }) => [
     {
-      title: 'Truncation Side',
+      title: t('time.truncateClockTime.truncationSide'),
       component: (
         <Box>
           <SimpleRadio
             onClick={() => updateField('onlySecond', true)}
             checked={values.onlySecond}
-            title={'Truncate Only Seconds'}
-            description={'Drop the seconds component from each clock time.'}
+            title={t('time.truncateClockTime.truncateOnlySeconds')}
+            description={t(
+              'time.truncateClockTime.truncateOnlySecondsDescription'
+            )}
           />
           <SimpleRadio
             onClick={() => updateField('onlySecond', false)}
             checked={!values.onlySecond}
-            title={'Truncate Minutes and Seconds'}
-            description={
-              'Drop both – the minutes and seconds components from each clock time.'
-            }
+            title={t('time.truncateClockTime.truncateMinutesAndSeconds')}
+            description={t(
+              'time.truncateClockTime.truncateMinutesAndSecondsDescription'
+            )}
           />
         </Box>
       )
     },
     {
-      title: 'Print Dropped Components',
+      title: t('time.truncateClockTime.printDroppedComponents'),
       component: (
         <Box>
           <CheckboxWithDesc
             onChange={(val) => updateField('zeroPrint', val)}
             checked={values.zeroPrint}
-            title={'Zero-print Truncated Parts'}
-            description={'Display the dropped parts as zero values "00".'}
+            title={t('time.truncateClockTime.zeroPrintTruncatedParts')}
+            description={t('time.truncateClockTime.zeroPrintDescription')}
           />
         </Box>
       )
     },
     {
-      title: 'Time Padding',
+      title: t('time.truncateClockTime.timePadding'),
       component: (
         <Box>
           <CheckboxWithDesc
             onChange={(val) => updateField('zeroPadding', val)}
             checked={values.zeroPadding}
-            title={'Use Zero Padding'}
-            description={'Make all time components always be two digits wide.'}
+            title={t('time.truncateClockTime.useZeroPadding')}
+            description={t('time.truncateClockTime.zeroPaddingDescription')}
           />
         </Box>
       )
@@ -144,7 +148,10 @@ export default function TruncateClockTime({
       getGroups={getGroups}
       setInput={setInput}
       compute={compute}
-      toolInfo={{ title: `What is a ${title}?`, description: longDescription }}
+      toolInfo={{
+        title: t('time.truncateClockTime.toolInfo.title', { title }),
+        description: longDescription
+      }}
       exampleCards={exampleCards}
     />
   );

src/pages/tools/time/truncate-clock-time/meta.ts

@@ -2,14 +2,17 @@ import { defineTool } from '@tools/defineTool';
 import { lazy } from 'react';
 
 export const tool = defineTool('time', {
-  path: 'truncate-clock-time',
   name: 'Truncate Clock Time',
-  icon: 'mdi:clock-remove-outline',
+  path: 'truncate-clock-time',
+  icon: 'material-symbols:schedule',
   description:
-    'With this browser-based application, you can truncate a clock time and drop the minutes and/or seconds components from it. If you drop the seconds, you will be left with hours and minutes. For example, "13:23:45" will be truncated to "13:23". If you drop both minutes and seconds, you will be left with just hours. For example, "13:23:45" will be truncated to just "13". Additionally, in the options, you can add or remove the hours and minutes padding and also print the dropped time component as a zero if needed.',
-  shortDescription: 'Quickly convert clock time in H:M:S format to seconds.',
-  keywords: ['truncate', 'time', 'clock'],
-  longDescription:
-    'This is a quick online utility for truncating the given clock times or timer values. It allows you to get rid of the least significant time components such as seconds and minutes. For example, if you have an exact time of "09:45:37" and you are ok working with a less precise time that has just hours and minutes, then you can discard the seconds and get "09:45". Similarly, if you only need the hours in the output, then you can truncate the minutes as well and get "09". In general, if you have a clock time "hh:mm:ss", then removing the seconds will leave "hh:mm" and removing both minutes and seconds will leave just "hh". The program can truncate as many clock times as you need – just enter them one per line in the input and the truncation result will be printed in the output where you can easily copy it from. By default, the truncated parts of the time are not displayed, but if necessary, you can print them as zeros. For example, if you drop minutes and seconds from "09:45:37" and you enable zero component printing, then the output will be "09:00:00". Finally, you can control the digit width of the clock display. For example, the time "09:00:00" has full zero-padding (the width is two digits for each time component) but if the padding is removed, then it will be shown as "9:0:0" (the width now is one digit). Timeabulous!',
-  component: lazy(() => import('./index'))
+    'Truncate clock time to remove seconds or minutes. Round time to the nearest hour, minute, or custom interval.',
+  shortDescription: 'Truncate clock time to specified precision',
+  keywords: ['time', 'truncate', 'clock', 'round', 'precision'],
+  component: lazy(() => import('./index')),
+  i18n: {
+    name: 'time.truncateClockTime.name',
+    description: 'time.truncateClockTime.description',
+    shortDescription: 'time.truncateClockTime.shortDescription'
+  }
 });