diff --git a/package-lock.json b/package-lock.json index 5bf5980..670354f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,7 @@ "@vercel/speed-insights": "^1.0.10", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", + "date-fns": "^3.6.0", "lucide-react": "^0.378.0", "next": "14.2.3", "next-themes": "^0.3.0", @@ -10176,6 +10177,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/date-fns": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz", + "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/kossnocorp" + } + }, "node_modules/debug": { "version": "4.3.4", "dev": true, diff --git a/package.json b/package.json index c67bd6e..12a8269 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "@vercel/speed-insights": "^1.0.10", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", + "date-fns": "^3.6.0", "lucide-react": "^0.378.0", "next": "14.2.3", "next-themes": "^0.3.0", diff --git a/src/components/app/posts-list/posts-list.tsx b/src/components/app/posts-list/posts-list.tsx index 46aa4e7..658e8f4 100644 --- a/src/components/app/posts-list/posts-list.tsx +++ b/src/components/app/posts-list/posts-list.tsx @@ -1,7 +1,9 @@ "use client"; import Link from "next/link"; +import { format as formatDate } from "date-fns/format"; import { Separator } from "@/components/ui/separator"; import { BlogPost } from "@/lib/definitions"; +import { DATE_FORMAT } from "@/lib/constants"; interface PostsListProps { posts: BlogPost[]; @@ -15,7 +17,8 @@ export const PostsList: React.FC<PostsListProps> = ({ posts }) => { <div> <div className="space-y-1"> <p className="text-xs text-muted-foreground"> - {createdAt.toLocaleString()} + {/* TODO: Remove hard-coded locale */} + {formatDate(createdAt, DATE_FORMAT)} </p> <h2 className="text-4xl leading-none capitalize"> diff --git a/src/components/app/posts-table/posts-table.tsx b/src/components/app/posts-table/posts-table.tsx index a114cce..f4d8418 100644 --- a/src/components/app/posts-table/posts-table.tsx +++ b/src/components/app/posts-table/posts-table.tsx @@ -1,9 +1,11 @@ "use client"; +import { format as formatDate } from "date-fns/format"; import { ColumnDef } from "@tanstack/react-table"; import { BlogPost } from "@/lib/definitions"; import { DataTable } from "./data-table"; import { ActionsCell } from "./actions-cell"; +import { DATE_FORMAT } from "@/lib/constants"; interface PostsTableProps { posts: BlogPost[]; @@ -18,7 +20,7 @@ export const PostsTable: React.FC<PostsTableProps> = ({ posts }) => { { accessorKey: "createdAt", header: "Created on", - cell: ({ row }) => row.original.createdAt.toDateString(), + cell: ({ row }) => formatDate(row.original.createdAt, DATE_FORMAT), }, { id: "actions", diff --git a/src/lib/constants.ts b/src/lib/constants.ts index f417393..1c293ab 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -1 +1,2 @@ export const POST_LIST_PAGE_SIZE = 10; +export const DATE_FORMAT = "yyyy-MM-dd HH:mm:ss";