Implement localizations

components/JobAccessoryPopover/index.tsx

@@ -13,6 +13,7 @@ import {
 import JobAccessoryItem from '~components/JobAccessoryItem'
 
 import './index.scss'
+import classNames from 'classnames'
 
 interface Props {
   buttonref: React.RefObject<HTMLButtonElement>
@@ -46,6 +47,11 @@ const JobAccessoryPopover = ({
   // Component state
   const [open, setOpen] = useState(false)
 
+  const classes = classNames({
+    JobAccessory: true,
+    ReadOnly: !editable,
+  })
+
   // Hooks
   useEffect(() => {
     setOpen(modalOpen)
@@ -73,7 +79,20 @@ const JobAccessoryPopover = ({
   function closePopover() {
     onOpenChange(false)
   }
+
+  function capitalizeFirstLetter(string: string) {
+    return string.charAt(0).toUpperCase() + string.slice(1)
+  }
+
   const radioGroup = (
+    <>
+      <h3>
+        {capitalizeFirstLetter(
+          job.accessory_type === 1
+            ? `${t('accessories.paladin')}s`
+            : t('accessories.manadiver')
+        )}
+      </h3>
       <RadioGroup.Root
         className="Accessories"
         onValueChange={handleAccessorySelected}
@@ -90,20 +109,32 @@ const JobAccessoryPopover = ({
           />
         ))}
       </RadioGroup.Root>
+    </>
   )
 
   const readOnly = currentAccessory ? (
-    <div className="JobAccessory">
+    <div className="EquippedAccessory">
+      <h3>
+        {t('equipped')}{' '}
+        {job.accessory_type === 1
+          ? `${t('accessories.paladin')}s`
+          : t('accessories.manadiver')}
+      </h3>
+      <div className="Accessory">
         <img
           alt={currentAccessory.name[locale]}
           src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/accessory-grid/${currentAccessory.granblue_id}.jpg`}
         />
         <h4>{currentAccessory.name[locale]}</h4>
       </div>
+    </div>
   ) : (
     <h3>
-      No shield selected
+      {t('no_accessory', {
-      {/* {t('no_accessory', { job: job.name.en.replace(' ', '-').toLowerCase() })} */}
+        accessory: t(
+          `accessories.${job.accessory_type === 1 ? 'paladin' : 'manadiver'}`
+        ),
+      })}
     </h3>
   )
 
@@ -111,7 +142,7 @@ const JobAccessoryPopover = ({
     <Popover open={open}>
       <PopoverTrigger asChild>{children}</PopoverTrigger>
       <PopoverContent
-        className="JobAccessory"
+        className={classes}
         onEscapeKeyDown={closePopover}
         onPointerDownOutside={handlePointerDownOutside}
       >