Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | 9x 13x 26x 26x 13x 13x | import { ClockIcon } from './ClockIcon';
import React from 'react';
interface ProjectCardDatesProps {
createdAt: number | string;
updatedAt: number | string;
}
export const ProjectCardDates = React.memo(function ProjectCardDates({
createdAt,
updatedAt,
}: ProjectCardDatesProps) {
const formatDate = (value: number | string) => {
const date = new Date(value);
return {
date: date.toLocaleDateString(undefined, {
day: '2-digit',
month: 'short',
year: 'numeric',
}),
time: date.toLocaleTimeString(undefined, {
hour: '2-digit',
minute: '2-digit',
}),
raw: date,
};
};
const created = formatDate(createdAt);
const updated = formatDate(updatedAt);
return (
<div className="space-y-2 text-xs text-gray-500">
<div className="flex items-center gap-2">
<ClockIcon date={created.raw} />
<p>
<span className="font-medium text-gray-800">Created:</span>{' '}
{created.date} <span className="text-gray-400">• {created.time}</span>
</p>
</div>
<div className="flex items-center gap-2">
<ClockIcon date={updated.raw} />
<p>
<span className="font-medium text-gray-800">Updated:</span>{' '}
{updated.date} <span className="text-gray-400">• {updated.time}</span>
</p>
</div>
</div>
);
});
|