feat: make time a client component to use users timezone (#74)

Author: azdanov

src/components/DateTime.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import {INTL_LOCALE} from '@/lib/utils';
+
+type DateTimeProps = {
+  options?: Intl.DateTimeFormatOptions;
+  timestamp: number;
+  type?: 'date' | 'datetime';
+};
+
+export function DateTime({
+  options,
+  timestamp,
+  type = 'datetime',
+}: DateTimeProps) {
+  const date = new Date(timestamp);
+
+  const formatted =
+    type === 'date'
+      ? date.toLocaleDateString(INTL_LOCALE, options)
+      : date.toLocaleString(INTL_LOCALE, options);
+
+  return <time dateTime={date.toISOString()}>{formatted}</time>;
+}

src/components/PackageDetails.tsx

@@ -13,12 +13,9 @@ import {
 } from '@/components/ui/card';
 import {fetchPkgbuilds, PkgbuildMap} from '@/lib/github';
 import {BriefPackageList, PackageDetails, PackageRepo} from '@/lib/types';
-import {
-  getDownloadMirrorUrl,
-  getPkgverWithoutBuildnum,
-  INTL_LOCALE,
-} from '@/lib/utils';
+import {getDownloadMirrorUrl, getPkgverWithoutBuildnum} from '@/lib/utils';
 
+import {DateTime} from './DateTime';
 import {HoverPrefetchLink} from './HoverPrefetchLink';
 
 type PackageDetailsComponentProps = {
@@ -93,14 +90,10 @@ export default async function PackageDetailsComponent({
             </DetailRow>
             <DetailRow label="Build Date">
               {pkg.pkg_builddate ? (
-                <time
-                  dateTime={new Date(pkg.pkg_builddate * 1000).toISOString()}
-                  suppressHydrationWarning
-                >
-                  {new Date(pkg.pkg_builddate * 1000).toLocaleString(
-                    INTL_LOCALE
-                  )}
-                </time>
+                <DateTime
+                  timestamp={pkg.pkg_builddate * 1000}
+                  type="datetime"
+                />
               ) : (
                 'unknown'
               )}

src/components/PackageTable.tsx

@@ -17,7 +17,8 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import {BriefPackage, BriefPackageList} from '@/lib/types';
-import {INTL_LOCALE} from '@/lib/utils';
+
+import {DateTime} from './DateTime';
 
 interface PackageSearchResultsTableProps {
   onArchitectureClick?: (arch: string) => void;
@@ -91,15 +92,9 @@ export default function PackageTable({
       },
     }),
     columnHelper.accessor('pkg_builddate', {
-      cell: ({getValue}) => {
-        const buildDate = getValue();
-        const date = new Date(buildDate * 1000);
-        return (
-          <time dateTime={date.toISOString()} suppressHydrationWarning>
-            {date.toLocaleDateString(INTL_LOCALE)}
-          </time>
-        );
-      },
+      cell: ({getValue}) => (
+        <DateTime timestamp={getValue() * 1000} type="date" />
+      ),
       header: 'Last Updated',
       meta: {
         headerClassName: 'md:w-[200px]',