use hook/component for localized dates

app/lish/[did]/[publication]/LocalizedDate.tsx

···
+"use client";
+import { useLocalizedDate } from "src/hooks/useLocalizedDate";
+
+export function LocalizedDate(props: {
+  dateString: string;
+  options?: Intl.DateTimeFormatOptions;
+}) {
+  const formattedDate = useLocalizedDate(props.dateString, props.options);
+  return <>{formattedDate}</>;
+}

app/lish/[did]/[publication]/[rkey]/PostHeader/PostHeader.tsx

···
 import { EditTiny } from "components/Icons/EditTiny";
 import { SpeedyLink } from "components/SpeedyLink";
 import { decodeQuotePosition } from "../quotePosition";
+import { useLocalizedDate } from "src/hooks/useLocalizedDate";
 
 export function PostHeader(props: {
   data: PostPageData;
···
   let profile = props.profile;
   let pub = props.data?.documents_in_publications[0].publications;
   let pubRecord = pub?.record as PubLeafletPublication.Record;
+
+  const formattedDate = useLocalizedDate(
+    record.publishedAt || new Date().toISOString(),
+    {
+      year: "numeric",
+      month: "long",
+      day: "2-digit",
+    }
+  );
 
   if (!document?.data || !document.documents_in_publications[0].publications)
     return;
···
           {record.publishedAt ? (
             <>
               |
-              <p>
-                {new Date(record.publishedAt).toLocaleDateString(undefined, {
-                  year: "numeric",
-                  month: "long",
-                  day: "2-digit",
-                })}
-              </p>
+              <p>{formattedDate}</p>
             </>
           ) : null}
           |{" "}

app/lish/[did]/[publication]/dashboard/PublishedPostsLists.tsx

···
 import { SpeedyLink } from "components/SpeedyLink";
 import { QuoteTiny } from "components/Icons/QuoteTiny";
 import { CommentTiny } from "components/Icons/CommentTiny";
+import { useLocalizedDate } from "src/hooks/useLocalizedDate";
 
 export function PublishedPostsList(props: {
   searchValue: string;
···
                   ) : null}
                   <div className="text-sm text-tertiary flex gap-1 flex-wrap pt-3">
                     {record.publishedAt ? (
-                      <p className="text-sm text-tertiary">
-                        Published{" "}
-                        {new Date(record.publishedAt).toLocaleDateString(
-                          undefined,
-                          {
-                            year: "numeric",
-                            month: "long",
-                            day: "2-digit",
-                          },
-                        )}
-                      </p>
+                      <PublishedDate dateString={record.publishedAt} />
                     ) : null}
                     {(comments > 0 || quotes > 0) && record.publishedAt
                       ? " | "
···
     );
   }
 }
+
+function PublishedDate(props: { dateString: string }) {
+  const formattedDate = useLocalizedDate(props.dateString, {
+    year: "numeric",
+    month: "long",
+    day: "2-digit",
+  });
+
+  return (
+    <p className="text-sm text-tertiary">
+      Published {formattedDate}
+    </p>
+  );
+}

app/lish/[did]/[publication]/page.tsx

···
 import { SpeedyLink } from "components/SpeedyLink";
 import { QuoteTiny } from "components/Icons/QuoteTiny";
 import { CommentTiny } from "components/Icons/CommentTiny";
+import { LocalizedDate } from "./LocalizedDate";
 
 export default async function Publication(props: {
   params: Promise<{ publication: string; did: string }>;
···
 
                           <div className="text-sm text-tertiary flex gap-1 flex-wrap pt-2">
                             <p className="text-sm text-tertiary ">
-                              {doc_record.publishedAt &&
-                                new Date(
-                                  doc_record.publishedAt,
-                                ).toLocaleDateString(undefined, {
-                                  year: "numeric",
-                                  month: "long",
-                                  day: "2-digit",
-                                })}{" "}
+                              {doc_record.publishedAt && (
+                                <LocalizedDate
+                                  dateString={doc_record.publishedAt}
+                                  options={{
+                                    year: "numeric",
+                                    month: "long",
+                                    day: "2-digit",
+                                  }}
+                                />
+                              )}{" "}
                             </p>
                             {comments > 0 || quotes > 0 ? "| " : ""}
                             {quotes > 0 && (

app/reader/ReaderContent.tsx

···
 import { useEffect, useRef } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
+import { useLocalizedDate } from "src/hooks/useLocalizedDate";
 
 export const ReaderContent = (props: {
   root_entity: string;
···
   author: string;
   publishedAt: string | undefined;
 }) => {
+  const formattedDate = useLocalizedDate(
+    props.publishedAt || new Date().toISOString(),
+    {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    }
+  );
+
   return (
     <div className="flex flex-wrap gap-2 grow items-center shrink-0">
       {props.author}
       {props.publishedAt && (
         <>
           <Separator classname="h-4 !min-h-0" />
-          {new Date(props.publishedAt).toLocaleDateString("en-US", {
-            year: "numeric",
-            month: "short",
-            day: "numeric",
-          })}{" "}
+          {formattedDate}{" "}
         </>
       )}
     </div>