diff --git a/src/app/share/page.tsx b/src/app/share/page.tsx index 81632be..a746135 100644 --- a/src/app/share/page.tsx +++ b/src/app/share/page.tsx @@ -2,8 +2,12 @@ import { notFound } from "next/navigation"; import { FilePreview } from "~/app/_components/FilePreview"; import { HomeButton } from "~/app/_components/HomeButton"; // Import the client component import { Toaster } from "react-hot-toast"; -import { FileActionsContainer, FileDescriptionContainer } from "~/app/_components/ActionButtons"; // Import the client component +import { + FileActionsContainer, + FileDescriptionContainer, +} from "~/app/_components/ActionButtons"; // Import the client component import Head from "next/head"; +import type { Metadata } from "next"; interface FileDetails { name: string; @@ -18,6 +22,46 @@ interface FileDetails { description: string; } +export async function generateMetadata({ + searchParams, +}: { + searchParams: { id?: string }; +}): Promise { + const fileId = searchParams.id; + + if (!fileId) { + return { + title: "File Not Found", + description: "The file you are looking for does not exist.", + }; + } + + const fileDetails = await fetchFileDetails(fileId); + + if (!fileDetails) { + return { + title: "File Not Found", + description: "The file you are looking for does not exist.", + }; + } + + return { + title: fileDetails.name, + description: fileDetails.description || fileDetails.name, + openGraph: { + title: fileDetails.name, + description: fileDetails.description || fileDetails.name, + url: `${process.env.NEXT_PUBLIC_PAGE_URL}/share?id=${fileDetails.id}`, + images: [ + { + url: `${process.env.NEXT_PUBLIC_PAGE_URL}/api/files/serv?id=${fileDetails.id}`, + alt: `${fileDetails.name} preview`, + }, + ], + }, + }; +} + async function fetchFileDetails(fileId: string): Promise { try { const response = await fetch( @@ -41,10 +85,9 @@ async function fetchFileDetails(fileId: string): Promise { export default async function FilePreviewContainer({ searchParams, }: { - searchParams: Promise<{ id?: string }>; + searchParams: { id?: string }; }) { - const resolvedSearchParams = await searchParams; // Resolve the promise - const fileId = resolvedSearchParams.id; + const fileId = searchParams.id; if (!fileId) { notFound(); @@ -54,130 +97,79 @@ export default async function FilePreviewContainer({ if (!fileDetails) { return ( - <> - - No File Found - - - - - - - -
- -
- -
-
-

- No File Found -

-
-
- +
+ +
+ +
+
+

+ No File Found +

+
+
); } return ( - <> - - {fileDetails.name} - File Details - - 1024 * 1024 * 1024 +
+
+ +
+ +
+

+ File Details +

+
+ {fileDetails.type !== "unknown" && ( + + )} +
+
+

+ Name: {fileDetails.name} +

+

+ Size:{" "} + {fileDetails.size > 1024 * 1024 * 1024 ? (fileDetails.size / (1024 * 1024 * 1024)).toFixed(2) + " GB" : fileDetails.size > 1024 * 1024 - ? (fileDetails.size / (1024 * 1024)).toFixed(2) + " MB" - : fileDetails.size > 1024 - ? (fileDetails.size / 1024).toFixed(2) + " KB" - : fileDetails.size + " Bytes" - }, Owner: ${fileDetails.owner}, Uploaded on: ${new Date( - fileDetails.uploadDate - ).toLocaleString()}`} - /> - - - - - -

-
- -
- -
-

- File Details -

-
- {fileDetails.type !== "unknown" && ( - - )} -
-
-

- Name: {fileDetails.name} -

-

- Size:{" "} - {fileDetails.size > 1024 * 1024 * 1024 - ? (fileDetails.size / (1024 * 1024 * 1024)).toFixed(2) + " GB" - : fileDetails.size > 1024 * 1024 ? (fileDetails.size / (1024 * 1024)).toFixed(2) + " MB" : fileDetails.size > 1024 - ? (fileDetails.size / 1024).toFixed(2) + " KB" - : fileDetails.size + " Bytes"} -

-

- Owner:{" "} - Owner avatar{" "} - {fileDetails.owner} -

-

- Upload Date:{" "} - {new Date(fileDetails.uploadDate).toLocaleString()} -

-
- Description:{" "} - -
-
- -
+ ? (fileDetails.size / 1024).toFixed(2) + " KB" + : fileDetails.size + " Bytes"} +

+

+ Owner:{" "} + Owner avatar{" "} + {fileDetails.owner} +

+

+ Upload Date:{" "} + {new Date(fileDetails.uploadDate).toLocaleString()} +

+
+ Description:{" "} + +
+
+
-
- +
+
); } -