From 2defb6e67421bb3efd4d37f4362bb3f03e124b22 Mon Sep 17 00:00:00 2001
From: Claudio W <cwunder@gnome.org>
Date: Wed, 25 Oct 2023 15:58:07 +0200
Subject: [PATCH] meta: some component cleanups and design fixes (#6046)

* chore: simplified button

* refactor: language drop: use external props, onchange and style fixes

* chore: use formatmessage

* meta: normalised component imports

* fix: language dropdown duplicated entries

* meta: update to collab guide
---
 COLLABORATOR_GUIDE.md                         |  2 +-
 .../AvatarGroup/Avatar/index.stories.tsx      |  3 +-
 .../Common/AvatarGroup/index.stories.tsx      |  3 +-
 components/Common/AvatarGroup/index.tsx       |  4 +-
 components/Common/Badge/index.stories.tsx     |  2 +-
 components/Common/Banner/index.stories.tsx    |  2 +-
 .../Common/Blockquote/index.stories.tsx       |  2 +-
 .../Common/Breadcrumbs/index.stories.tsx      |  2 +-
 components/Common/Breadcrumbs/index.tsx       | 10 ++---
 components/Common/Button/index.stories.tsx    |  2 +-
 components/Common/Button/index.tsx            | 17 ++++----
 components/Common/CrossLink/index.stories.tsx |  2 +-
 .../Common/LanguageDropDown/index.module.css  | 28 ++++++------
 .../Common/LanguageDropDown/index.stories.tsx | 13 +++++-
 components/Common/LanguageDropDown/index.tsx  | 43 +++++++++++--------
 components/Common/MetaBar/index.stories.tsx   |  3 +-
 .../Common/Notification/index.stories.tsx     |  2 +-
 .../Pagination/PaginationListItem/index.tsx   |  4 +-
 .../Common/Pagination/index.stories.tsx       |  2 +-
 components/Common/Pagination/index.tsx        | 10 ++---
 .../Common/Pagination/useGetPageElements.tsx  | 29 ++++++-------
 components/Common/Preview/index.stories.tsx   |  2 +-
 components/Common/Select/index.stories.tsx    |  2 +-
 components/Common/Tabs/index.stories.tsx      |  2 +-
 components/Common/Time/index.tsx              |  3 +-
 25 files changed, 104 insertions(+), 90 deletions(-)

diff --git a/COLLABORATOR_GUIDE.md b/COLLABORATOR_GUIDE.md
index e87607377f88c..2fd1c8451d787 100644
--- a/COLLABORATOR_GUIDE.md
+++ b/COLLABORATOR_GUIDE.md
@@ -287,7 +287,7 @@ They also allow Developers to preview Components and be able to test them manual
 
 ```tsx
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-import NameOfComponent from './index';
+import NameOfComponent from '@components/PathTo/YourComponent';
 
 type Story = StoryObj<typeof NameOfComponent>;
 type Meta = MetaObj<typeof NameOfComponent>;
diff --git a/components/Common/AvatarGroup/Avatar/index.stories.tsx b/components/Common/AvatarGroup/Avatar/index.stories.tsx
index ef5432bf3f4b6..c70c047e7445e 100644
--- a/components/Common/AvatarGroup/Avatar/index.stories.tsx
+++ b/components/Common/AvatarGroup/Avatar/index.stories.tsx
@@ -1,9 +1,8 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
+import Avatar from '@/components/Common/AvatarGroup/Avatar';
 import { githubProfileAvatarUrl } from '@/util/gitHubUtils';
 
-import Avatar from './';
-
 type Story = StoryObj<typeof Avatar>;
 type Meta = MetaObj<typeof Avatar>;
 
diff --git a/components/Common/AvatarGroup/index.stories.tsx b/components/Common/AvatarGroup/index.stories.tsx
index 9b3022e65391a..6dff66e2e20b7 100644
--- a/components/Common/AvatarGroup/index.stories.tsx
+++ b/components/Common/AvatarGroup/index.stories.tsx
@@ -1,9 +1,8 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
+import AvatarGroup from '@/components/Common/AvatarGroup';
 import { githubProfileAvatarUrl } from '@/util/gitHubUtils';
 
-import AvatarGroup from './';
-
 type Story = StoryObj<typeof AvatarGroup>;
 type Meta = MetaObj<typeof AvatarGroup>;
 
diff --git a/components/Common/AvatarGroup/index.tsx b/components/Common/AvatarGroup/index.tsx
index 76af32e001f96..fdd8d1b475d0d 100644
--- a/components/Common/AvatarGroup/index.tsx
+++ b/components/Common/AvatarGroup/index.tsx
@@ -2,10 +2,10 @@ import classNames from 'classnames';
 import type { ComponentProps, FC } from 'react';
 import { useState, useMemo } from 'react';
 
+import Avatar from '@/components/Common/AvatarGroup/Avatar';
+import avatarstyles from '@/components/Common/AvatarGroup/Avatar/index.module.css';
 import { getAcronymFromString } from '@/util/stringUtils';
 
-import Avatar from './Avatar';
-import avatarstyles from './Avatar/index.module.css';
 import styles from './index.module.css';
 
 type AvatarGroupProps = {
diff --git a/components/Common/Badge/index.stories.tsx b/components/Common/Badge/index.stories.tsx
index 698109a31677b..0b200b997c009 100644
--- a/components/Common/Badge/index.stories.tsx
+++ b/components/Common/Badge/index.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import Badge from './index';
+import Badge from '@/components/Common/Badge';
 
 type Story = StoryObj<typeof Badge>;
 type Meta = MetaObj<typeof Badge>;
diff --git a/components/Common/Banner/index.stories.tsx b/components/Common/Banner/index.stories.tsx
index 1ce2db2887a7d..1bafc10b2d006 100644
--- a/components/Common/Banner/index.stories.tsx
+++ b/components/Common/Banner/index.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import Banner from './index';
+import Banner from '@/components/Common/Banner';
 
 type Story = StoryObj<typeof Banner>;
 type Meta = MetaObj<typeof Banner>;
diff --git a/components/Common/Blockquote/index.stories.tsx b/components/Common/Blockquote/index.stories.tsx
index 62ef494bd5f3d..d00a56c084f33 100644
--- a/components/Common/Blockquote/index.stories.tsx
+++ b/components/Common/Blockquote/index.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import Blockquote from './index';
+import Blockquote from '@/components/Common/Blockquote';
 
 type Story = StoryObj<typeof Blockquote>;
 type Meta = MetaObj<typeof Blockquote>;
diff --git a/components/Common/Breadcrumbs/index.stories.tsx b/components/Common/Breadcrumbs/index.stories.tsx
index 1e25483c2ee71..678def7290c08 100644
--- a/components/Common/Breadcrumbs/index.stories.tsx
+++ b/components/Common/Breadcrumbs/index.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import Breadcrumbs from './';
+import Breadcrumbs from '@/components/Common/Breadcrumbs';
 
 type Story = StoryObj<typeof Breadcrumbs>;
 type Meta = MetaObj<typeof Breadcrumbs>;
diff --git a/components/Common/Breadcrumbs/index.tsx b/components/Common/Breadcrumbs/index.tsx
index bafede32626e4..512e89c279809 100644
--- a/components/Common/Breadcrumbs/index.tsx
+++ b/components/Common/Breadcrumbs/index.tsx
@@ -1,11 +1,11 @@
 import { type LinkProps } from 'next/link';
 import { useMemo, type FC } from 'react';
 
-import BreadcrumbHomeLink from './BreadcrumbHomeLink';
-import BreadcrumbItem from './BreadcrumbItem';
-import BreadcrumbLink from './BreadcrumbLink';
-import BreadcrumbRoot from './BreadcrumbRoot';
-import BreadcrumbTruncatedItem from './BreadcrumbTruncatedItem';
+import BreadcrumbHomeLink from '@/components/Common/Breadcrumbs/BreadcrumbHomeLink';
+import BreadcrumbItem from '@/components/Common/Breadcrumbs/BreadcrumbItem';
+import BreadcrumbLink from '@/components/Common/Breadcrumbs/BreadcrumbLink';
+import BreadcrumbRoot from '@/components/Common/Breadcrumbs/BreadcrumbRoot';
+import BreadcrumbTruncatedItem from '@/components/Common/Breadcrumbs/BreadcrumbTruncatedItem';
 
 type BreadcrumbLink = {
   label: string;
diff --git a/components/Common/Button/index.stories.tsx b/components/Common/Button/index.stories.tsx
index c2ba29a4ee2b3..b7fe58cff4ada 100644
--- a/components/Common/Button/index.stories.tsx
+++ b/components/Common/Button/index.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import Button from './index';
+import Button from '@/components/Common/Button';
 
 type Story = StoryObj<typeof Button>;
 type Meta = MetaObj<typeof Button>;
diff --git a/components/Common/Button/index.tsx b/components/Common/Button/index.tsx
index d8081a7d7152a..5ef4b8bec23bc 100644
--- a/components/Common/Button/index.tsx
+++ b/components/Common/Button/index.tsx
@@ -12,14 +12,13 @@ const Button: FC<ButtonProps> = ({
   children,
   className,
   ...props
-}) => {
-  const buttonStyles = classNames(styles.button, styles[variant], className);
-
-  return (
-    <button className={buttonStyles} {...props}>
-      {children}
-    </button>
-  );
-};
+}) => (
+  <button
+    className={classNames(styles.button, styles[variant], className)}
+    {...props}
+  >
+    {children}
+  </button>
+);
 
 export default Button;
diff --git a/components/Common/CrossLink/index.stories.tsx b/components/Common/CrossLink/index.stories.tsx
index 01b2f6994f42c..20f4deb5dd53a 100644
--- a/components/Common/CrossLink/index.stories.tsx
+++ b/components/Common/CrossLink/index.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import CrossLink from './index';
+import CrossLink from '@/components/Common/CrossLink';
 
 type Story = StoryObj<typeof CrossLink>;
 type Meta = MetaObj<typeof CrossLink>;
diff --git a/components/Common/LanguageDropDown/index.module.css b/components/Common/LanguageDropDown/index.module.css
index 9f8f4b3800be9..c5dd3c9bd6e9e 100644
--- a/components/Common/LanguageDropDown/index.module.css
+++ b/components/Common/LanguageDropDown/index.module.css
@@ -1,9 +1,9 @@
 .iconWrapper {
   @apply h-9
     w-9
-    rounded-md 
-    bg-neutral-100 
-    p-2 
+    rounded-md
+    bg-neutral-100
+    p-2
     text-neutral-700
     dark:bg-neutral-900
     dark:text-neutral-300;
@@ -12,23 +12,27 @@
 .dropDownContent {
   @apply max-h-80
     w-48
-    overflow-y-scroll
+    overflow-hidden
     rounded
-    border 
-    border-neutral-200 
-    py-[1px]
+    border
+    border-neutral-200
     shadow-lg
     dark:border-neutral-900;
+
+  > div {
+    @apply max-h-80
+      w-48 overflow-y-auto;
+  }
 }
 
 .dropDownItem {
-  @apply cursor-default 
+  @apply cursor-pointer
     px-2.5
-    py-1.5 
-    text-sm 
+    py-1.5
+    text-sm
     font-medium
-    text-neutral-800 
-    outline-none 
+    text-neutral-800
+    outline-none
     data-[highlighted]:bg-green-600
     data-[highlighted]:text-white
     dark:text-white;
diff --git a/components/Common/LanguageDropDown/index.stories.tsx b/components/Common/LanguageDropDown/index.stories.tsx
index 49ca0c78c5510..1454c5940a3f4 100644
--- a/components/Common/LanguageDropDown/index.stories.tsx
+++ b/components/Common/LanguageDropDown/index.stories.tsx
@@ -1,10 +1,19 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import LanguageDropDown from './index';
+import LanguageDropDown from '@/components/Common/LanguageDropDown';
 
 type Story = StoryObj<typeof LanguageDropDown>;
 type Meta = MetaObj<typeof LanguageDropDown>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    availableLanguages: [
+      { name: 'English', code: 'en' },
+      { name: 'French', code: 'fr' },
+      { name: 'Spanish', code: 'es' },
+    ],
+    currentLanguage: { name: 'English', code: 'en' },
+  },
+};
 
 export default { component: LanguageDropDown } as Meta;
diff --git a/components/Common/LanguageDropDown/index.tsx b/components/Common/LanguageDropDown/index.tsx
index 69964dad7b094..5c2f81bf6d063 100644
--- a/components/Common/LanguageDropDown/index.tsx
+++ b/components/Common/LanguageDropDown/index.tsx
@@ -4,21 +4,26 @@ import classNames from 'classnames';
 import type { FC } from 'react';
 import { useIntl } from 'react-intl';
 
-import { useLocale } from '@/hooks/useLocale';
+import type { LocaleConfig } from '@/types';
 
 import styles from './index.module.css';
 
-export type LanguageDropDownProps = {
-  onClick?: () => void;
+type SimpleLocaleConfig = Pick<LocaleConfig, 'name' | 'code'>;
+
+type LanguageDropDownProps = {
+  onChange?: (newLocale: SimpleLocaleConfig) => void;
+  currentLanguage: SimpleLocaleConfig;
+  availableLanguages: SimpleLocaleConfig[];
 };
 
 const LanguageDropdown: FC<LanguageDropDownProps> = ({
-  onClick = () => {},
+  onChange = () => {},
+  currentLanguage,
+  availableLanguages,
 }) => {
-  const { availableLocales, currentLocale } = useLocale();
-  const intl = useIntl();
+  const { formatMessage } = useIntl();
 
-  const ariaLabel = intl.formatMessage({
+  const ariaLabel = formatMessage({
     id: 'components.common.languageDropdown.label',
   });
 
@@ -36,17 +41,19 @@ const LanguageDropdown: FC<LanguageDropDownProps> = ({
           className={styles.dropDownContent}
           sideOffset={5}
         >
-          {availableLocales.map(({ name, code }) => (
-            <DropdownMenu.Item
-              key={code}
-              onClick={onClick}
-              className={classNames(styles.dropDownItem, {
-                [styles.currentDropDown]: code === currentLocale.code,
-              })}
-            >
-              {name}
-            </DropdownMenu.Item>
-          ))}
+          <div>
+            {availableLanguages.map(({ name, code }) => (
+              <DropdownMenu.Item
+                key={code}
+                onClick={() => onChange({ name, code })}
+                className={classNames(styles.dropDownItem, {
+                  [styles.currentDropDown]: code === currentLanguage.code,
+                })}
+              >
+                {name}
+              </DropdownMenu.Item>
+            ))}
+          </div>
         </DropdownMenu.Content>
       </DropdownMenu.Portal>
     </DropdownMenu.Root>
diff --git a/components/Common/MetaBar/index.stories.tsx b/components/Common/MetaBar/index.stories.tsx
index acce0aa8effd5..4be3e7192d185 100644
--- a/components/Common/MetaBar/index.stories.tsx
+++ b/components/Common/MetaBar/index.stories.tsx
@@ -4,10 +4,9 @@ import Image from 'next/image';
 import { FormattedMessage } from 'react-intl';
 
 import AvatarGroup from '@/components/Common/AvatarGroup';
+import MetaBar from '@/components/Common/MetaBar';
 import LocalizedLink from '@/components/LocalizedLink';
 
-import MetaBar from './index';
-
 type Story = StoryObj<typeof MetaBar>;
 type Meta = MetaObj<typeof MetaBar>;
 
diff --git a/components/Common/Notification/index.stories.tsx b/components/Common/Notification/index.stories.tsx
index 0aa59b809ce7a..240b37bb77a12 100644
--- a/components/Common/Notification/index.stories.tsx
+++ b/components/Common/Notification/index.stories.tsx
@@ -2,7 +2,7 @@ import { CodeBracketIcon } from '@heroicons/react/24/solid';
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 import { FormattedMessage } from 'react-intl';
 
-import Notification from './index';
+import Notification from '@/components/Common/Notification';
 
 type Story = StoryObj<typeof Notification>;
 type Meta = MetaObj<typeof Notification>;
diff --git a/components/Common/Pagination/PaginationListItem/index.tsx b/components/Common/Pagination/PaginationListItem/index.tsx
index e8ce23810ddfe..90c89a559fcb7 100644
--- a/components/Common/Pagination/PaginationListItem/index.tsx
+++ b/components/Common/Pagination/PaginationListItem/index.tsx
@@ -19,13 +19,13 @@ const PaginationListItem: FC<PaginationListItemProps> = ({
   currentPage,
   totalPages,
 }) => {
-  const intl = useIntl();
+  const { formatMessage } = useIntl();
 
   return (
     <li key={pageNumber} aria-setsize={totalPages} aria-posinset={pageNumber}>
       <LocalizedLink
         href={url}
-        aria-label={intl.formatMessage(
+        aria-label={formatMessage(
           { id: 'components.common.pagination.pageLabel' },
           { pageNumber }
         )}
diff --git a/components/Common/Pagination/index.stories.tsx b/components/Common/Pagination/index.stories.tsx
index b4ce474ae8551..2fc4287fea3c3 100644
--- a/components/Common/Pagination/index.stories.tsx
+++ b/components/Common/Pagination/index.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import Pagination from './index';
+import Pagination from '@/components/Common/Pagination';
 
 type Story = StoryObj<typeof Pagination>;
 type Meta = MetaObj<typeof Pagination>;
diff --git a/components/Common/Pagination/index.tsx b/components/Common/Pagination/index.tsx
index 8eff8017e01cf..f2ca0e090fdc7 100644
--- a/components/Common/Pagination/index.tsx
+++ b/components/Common/Pagination/index.tsx
@@ -9,7 +9,7 @@ import styles from './index.module.css';
 
 type Page = { url: string };
 
-export type PaginationProps = {
+type PaginationProps = {
   // One-based number of the current page
   currentPage: number;
   pages: Page[];
@@ -23,7 +23,7 @@ const Pagination: FC<PaginationProps> = ({
   pages,
   currentPageSiblingsCount = 1,
 }) => {
-  const intl = useIntl();
+  const { formatMessage } = useIntl();
 
   const parsedPages = useGetPageElements(
     currentPage,
@@ -33,14 +33,14 @@ const Pagination: FC<PaginationProps> = ({
 
   return (
     <nav
-      aria-label={intl.formatMessage({
+      aria-label={formatMessage({
         id: 'components.common.pagination.defaultLabel',
       })}
       className={styles.pagination}
     >
       <Button
         type="button"
-        aria-label={intl.formatMessage({
+        aria-label={formatMessage({
           id: 'components.common.pagination.prevAriaLabel',
         })}
         disabled={currentPage === 1}
@@ -56,7 +56,7 @@ const Pagination: FC<PaginationProps> = ({
       <ol className={styles.list}>{parsedPages}</ol>
       <Button
         type="button"
-        aria-label={intl.formatMessage({
+        aria-label={formatMessage({
           id: 'components.common.pagination.nextAriaLabel',
         })}
         disabled={currentPage === pages.length}
diff --git a/components/Common/Pagination/useGetPageElements.tsx b/components/Common/Pagination/useGetPageElements.tsx
index b61acc8c4b6e8..5b4038f332a0c 100644
--- a/components/Common/Pagination/useGetPageElements.tsx
+++ b/components/Common/Pagination/useGetPageElements.tsx
@@ -1,27 +1,24 @@
-import Ellipsis from './Ellipsis';
-import type { PaginationListItemProps } from './PaginationListItem/index';
-import PaginationListItem from './PaginationListItem/index';
+import type { ComponentProps } from 'react';
 
-import type { PaginationProps } from '.';
+import type Pagination from '@/components/Common/Pagination';
+import Ellipsis from '@/components/Common/Pagination/Ellipsis';
+import type { PaginationListItemProps } from '@/components/Common/Pagination/PaginationListItem/index';
+import PaginationListItem from '@/components/Common/Pagination/PaginationListItem/index';
 
-function parsePages(
-  pages: PaginationProps['pages'],
+const parsePages = (
+  pages: ComponentProps<typeof Pagination>['pages'],
   currentPage: number,
   totalPages: number
-): PaginationListItemProps[] {
-  return pages.map(({ url }, index) => ({
+): PaginationListItemProps[] =>
+  pages.map(({ url }, index) => ({
     url,
     pageNumber: index + 1,
     currentPage,
     totalPages,
   }));
-}
 
-function createPaginationListItems(parsedPages: PaginationListItemProps[]) {
-  return parsedPages.map(page => (
-    <PaginationListItem key={page.url} {...page} />
-  ));
-}
+const createPaginationListItems = (parsedPages: PaginationListItemProps[]) =>
+  parsedPages.map(page => <PaginationListItem key={page.url} {...page} />);
 
 // The minimum amount of elements are first page, current page, and last page
 const MINIMUM_AMOUNT_OF_ELEMENTS = 3;
@@ -33,8 +30,8 @@ const MAXIMUM_AMOUNT_OF_ELLIPSES = 2;
 // React MUI's Pagination component as reference. More info here:
 // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/usePagination/usePagination.js
 export const useGetPageElements = (
-  currentPage: PaginationProps['currentPage'],
-  pages: PaginationProps['pages'],
+  currentPage: ComponentProps<typeof Pagination>['currentPage'],
+  pages: ComponentProps<typeof Pagination>['pages'],
   currentPageSiblingsCount: number
 ) => {
   const totalPages = pages.length;
diff --git a/components/Common/Preview/index.stories.tsx b/components/Common/Preview/index.stories.tsx
index acdcb578cab99..2a993e90d3e02 100644
--- a/components/Common/Preview/index.stories.tsx
+++ b/components/Common/Preview/index.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import Preview from './';
+import Preview from '@/components/Common/Preview';
 
 type Story = StoryObj<typeof Preview>;
 type Meta = MetaObj<typeof Preview>;
diff --git a/components/Common/Select/index.stories.tsx b/components/Common/Select/index.stories.tsx
index fee14bf007f53..6e349a85169de 100644
--- a/components/Common/Select/index.stories.tsx
+++ b/components/Common/Select/index.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import Select from './index';
+import Select from '@/components/Common/Select';
 
 type Story = StoryObj<typeof Select>;
 type Meta = MetaObj<typeof Select>;
diff --git a/components/Common/Tabs/index.stories.tsx b/components/Common/Tabs/index.stories.tsx
index 9453bb8f84415..6b6671e60eb1c 100644
--- a/components/Common/Tabs/index.stories.tsx
+++ b/components/Common/Tabs/index.stories.tsx
@@ -1,7 +1,7 @@
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import Tabs from './index';
+import Tabs from '@/components/Common/Tabs';
 
 type Story = StoryObj<typeof Tabs>;
 type Meta = MetaObj<typeof Tabs>;
diff --git a/components/Common/Time/index.tsx b/components/Common/Time/index.tsx
index 1766b37cbef73..561adf9ed09d6 100644
--- a/components/Common/Time/index.tsx
+++ b/components/Common/Time/index.tsx
@@ -1,10 +1,11 @@
 import type { FC } from 'react';
+import { useMemo } from 'react';
 import { FormattedDate } from 'react-intl';
 
 type TimeProps = { date: string | Date; format: Intl.DateTimeFormatOptions };
 
 export const Time: FC<TimeProps> = ({ date, format }) => {
-  const dateObject = new Date(date);
+  const dateObject = useMemo(() => new Date(date), [date]);
 
   return (
     <time dateTime={dateObject.toISOString()}>