From bccd46b92130fe20354c74919a9fa92027e6086e Mon Sep 17 00:00:00 2001
From: "Thibault Barske (Tibs)" <thibault.barske.ext@corp.ovh.com>
Date: Thu, 23 Jan 2025 18:26:11 +0100
Subject: [PATCH] feat(manager-react-component): add formatted date component
 (#15067)

Resolve #15069

Signed-off-by: Thibault Barske <thibault.barske.ext@corp.ovh.com>
---
 .../components/formatted-date/FormattedDate.tsx    | 10 ++++++++++
 .../src/hooks/date/useFormattedDate.ts             | 14 ++++++++------
 2 files changed, 18 insertions(+), 6 deletions(-)
 create mode 100644 packages/manager-react-components/src/components/formatted-date/FormattedDate.tsx

diff --git a/packages/manager-react-components/src/components/formatted-date/FormattedDate.tsx b/packages/manager-react-components/src/components/formatted-date/FormattedDate.tsx
new file mode 100644
index 000000000000..0a3c11d017c2
--- /dev/null
+++ b/packages/manager-react-components/src/components/formatted-date/FormattedDate.tsx
@@ -0,0 +1,10 @@
+import {
+  FormattedDateProps,
+  useFormattedDate,
+} from '../../hooks/date/useFormattedDate';
+
+export const FormattedDate = (props: FormattedDateProps) => {
+  const formattedDate = useFormattedDate(props);
+
+  return <>{formattedDate}</>;
+};
diff --git a/packages/manager-react-components/src/hooks/date/useFormattedDate.ts b/packages/manager-react-components/src/hooks/date/useFormattedDate.ts
index 3d6452f1e680..82ec0f56d610 100644
--- a/packages/manager-react-components/src/hooks/date/useFormattedDate.ts
+++ b/packages/manager-react-components/src/hooks/date/useFormattedDate.ts
@@ -17,17 +17,19 @@ export enum DateFormat {
   fullDisplay = 'fullDisplay',
 }
 
+export type FormattedDateProps = {
+  dateString: string;
+  unknownDateLabel?: string;
+  defaultLocale?: string;
+  format?: DateFormat;
+};
+
 export const useFormattedDate = ({
   dateString,
   defaultLocale = 'FR-fr',
   unknownDateLabel = defaultUnknownDateLabel,
   format = DateFormat.display,
-}: {
-  dateString: string;
-  unknownDateLabel?: string;
-  defaultLocale?: string;
-  format?: DateFormat;
-}) => {
+}: FormattedDateProps) => {
   const { i18n } = useTranslation();
   const date = new Date(dateString);
   const locale = i18n?.language?.replace('_', '-') || defaultLocale;