local-date.tsx

local-date.tsx

'use client';

import { format as dateFnsFormat } from 'date-fns/format';
import dynamic from 'next/dynamic';
import { Skeleton } from '~/components/ui/skeleton';

export const DisplayLocalDate = dynamic(
  () => import('./DisplayLocalDate').then((res) => res.DisplayLocalDateClient),
  { ssr: false, loading: () => <Skeleton className="mx-1 h-4 w-20" /> }
);

export function DisplayLocalDateClient({
  date,
  format = 'MMM d, yyyy'
}: {
  date: string;
  format?: string;
}) {
  const dateObj = new Date(date);
  return dateFnsFormat(dateObj, format);
}