feat: ui panel work done

public/locales/en/account.json

@@ -7,6 +7,10 @@
     "apiToken": "API token"
   },
   "apiToken": {
-    "helperText": "Your API Token is valid for a year. Check out our <anchor>API Guide</anchor> for more information on using your API Token with the Dataverse APIs."
+    "helperText": "Your API Token is valid for a year. Check out our <anchor>API Guide</anchor> for more information on using your API Token with the Dataverse APIs.",
+    "expirationDate": "Expiration date",
+    "copyToClipboard": "Copy to Clipboard",
+    "recreateToken": "Recreate Token",
+    "revokeToken": "Revoke Token"
   }
 }

src/sections/account/Account.tsx

@@ -2,7 +2,7 @@ import { useTranslation } from 'react-i18next'
 import { useSearchParams } from 'react-router-dom'
 import { Tabs } from '@iqss/dataverse-design-system'
 import { AccountHelper } from './AccountHelper'
-import { ApiTokenSection } from './ApiTokenSection/ApiTokenSection'
+import { ApiTokenSection } from './api-token-section/ApiTokenSection'
 import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
 import { UpwardHierarchyNodeMother } from '../../../tests/component/shared/hierarchy/domain/models/UpwardHierarchyNodeMother'
 import styles from './Account.module.scss'

src/sections/account/api-token-section/ApiTokenSection.module.scss

@@ -0,0 +1,31 @@
+@import 'node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module';
+
+.exp-date {
+  display: flex;
+  gap: 1.5rem;
+  align-items: center;
+  padding-left: 0.5rem;
+  font-weight: bold;
+
+  time {
+    font-weight: normal;
+  }
+
+  @media (min-width: 768px) {
+    gap: 3rem;
+  }
+}
+
+.api-token {
+  padding: 0.5rem 1rem;
+  background-color: #f7f7f9;
+  border: solid 1px $dv-border-color;
+  border-radius: 4px;
+}
+
+.btns-wrapper {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  padding-top: 1rem;
+}

src/sections/account/api-token-section/ApiTokenSection.tsx

@@ -0,0 +1,50 @@
+import { Trans, useTranslation } from 'react-i18next'
+import accountStyles from '../Account.module.scss'
+import styles from './ApiTokenSection.module.scss'
+import { Button } from '@iqss/dataverse-design-system'
+
+export const ApiTokenSection = () => {
+  const { t } = useTranslation('account', { keyPrefix: 'apiToken' })
+
+  const apiToken = '999fff-666rrr-12kfd54-123123'
+  const expirationDate = '2025-09-04'
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(apiToken).catch((error) => {
+      console.error('Failed to copy text:', error)
+    })
+  }
+
+  return (
+    <>
+      <p className={accountStyles['helper-text']}>
+        <Trans
+          t={t}
+          i18nKey="helperText"
+          components={{
+            anchor: (
+              <a
+                href="http://guides.dataverse.org/en/latest/api"
+                target="_blank"
+                rel="noreferrer"
+              />
+            )
+          }}
+        />
+      </p>
+      <p className={styles['exp-date']}>
+        {t('expirationDate')} <time dateTime={expirationDate}>{expirationDate}</time>
+      </p>
+      <div className={styles['api-token']}>
+        <code>{apiToken}</code>
+      </div>
+      <div className={styles['btns-wrapper']} role="group">
+        <Button variant="secondary" onClick={copyToClipboard}>
+          {t('copyToClipboard')}
+        </Button>
+        <Button variant="secondary">{t('recreateToken')}</Button>
+        <Button variant="secondary">{t('revokeToken')}</Button>
+      </div>
+    </>
+  )
+}