Add optional showLastUpdated property

Author: kodster28

src/components/ResourcesBySelector.astro

@@ -18,6 +18,7 @@ const props = z.object({
 	filterables: z.custom<ResourcesData>().array().optional(),
 	columns: z.union([z.literal(2), z.literal(3)]).default(2),
 	showDescriptions: z.boolean().default(true),
+	showLastUpdated: z.boolean().default(false),
 });
 
 const {
@@ -28,6 +29,7 @@ const {
 	filterables,
 	columns,
 	showDescriptions,
+	showLastUpdated,
 } = props.parse(Astro.props);
 
 const docs = await getCollection("docs");
@@ -78,6 +80,7 @@ const facets = resources.reduce(
 		filters={filterables}
 		columns={columns}
 		showDescriptions={showDescriptions}
+		showLastUpdated={showLastUpdated}
 		client:load
 	/>
 </div>

src/components/ResourcesBySelector.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import ReactSelect from "./ReactSelect";
 import type { CollectionEntry } from "astro:content";
+import { formatDistance } from "date-fns";
 
 type DocsData = keyof CollectionEntry<"docs">["data"];
 type VideosData = keyof CollectionEntry<"stream">["data"];
@@ -13,6 +14,7 @@ interface Props {
 	filters?: ResourcesData[];
 	columns: number;
 	showDescriptions: boolean;
+	showLastUpdated: boolean;
 }
 
 export default function ResourcesBySelector({
@@ -21,9 +23,15 @@ export default function ResourcesBySelector({
 	filters,
 	columns,
 	showDescriptions,
+	showLastUpdated,
 }: Props) {
 	const [selectedFilter, setSelectedFilter] = useState<string | null>(null);
 
+	const timeAgo = (date?: Date) => {
+		if (!date) return undefined;
+		return formatDistance(date, new Date(), { addSuffix: true });
+	};
+
 	const handleFilterChange = (option: any) => {
 		setSelectedFilter(option?.value || null);
 	};
@@ -116,6 +124,11 @@ export default function ResourcesBySelector({
 									{page.data.description}
 								</span>
 							)}
+							{showLastUpdated && (
+								<span className="line-clamp-3" title={page.data.description}>
+									Updated {timeAgo(page.data.updated)}
+								</span>
+							)}
 						</a>
 					);
 				})}

src/content/docs/r2/tutorials/index.mdx

@@ -6,13 +6,21 @@ sidebar:
   order: 9
 ---
 
-import { GlossaryTooltip, ListTutorials, YouTubeVideos } from "~/components";
+import {
+	GlossaryTooltip,
+	ResourcesBySelector,
+	YouTubeVideos,
+} from "~/components";
 
 View <GlossaryTooltip term="tutorial">tutorials</GlossaryTooltip> to help you get started with R2.
 
 ## Docs
 
-<ListTutorials />
+<ResourcesBySelector
+	directory="r2"
+	types={["tutorial"]}
+	showLastUpdated={true}
+/>
 
 ## Videos