45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
|
import { useLoaderData, Link } from "@remix-run/react";
|
||
|
|
import { ArrowLeftIcon } from "@heroicons/react/24/outline";
|
||
|
|
import { prisma } from "@/lib/prisma";
|
||
|
|
import { LoaderFunctionArgs } from "@remix-run/node";
|
||
|
|
import { Article } from "@prisma/client";
|
||
|
|
|
||
|
|
// Loader function to fetch article data
|
||
|
|
export async function loader({ params }: LoaderFunctionArgs) {
|
||
|
|
const { cid } = params;
|
||
|
|
const article = await prisma.article.findUnique({
|
||
|
|
where: { cid },
|
||
|
|
});
|
||
|
|
|
||
|
|
if (!article) {
|
||
|
|
throw new Response("Not Found", { status: 404 });
|
||
|
|
}
|
||
|
|
|
||
|
|
return article;
|
||
|
|
}
|
||
|
|
|
||
|
|
const Page = () => {
|
||
|
|
// Use the loader data
|
||
|
|
const article = useLoaderData() as unknown as Article;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Link to="/" className="w-full mt-1">
|
||
|
|
<button className="px-3 py-2 text-gray-400 hover:bg-gray-800 hover:text-white rounded">
|
||
|
|
<ArrowLeftIcon className="w-4 h-4 inline mr-2 -mt-1" />
|
||
|
|
Go Back Home
|
||
|
|
</button>
|
||
|
|
</Link>
|
||
|
|
<div className="w-full min-h-[calc(100%-80px)] !h-full !mt-1 !mb-0">
|
||
|
|
<iframe
|
||
|
|
className="w-full h-full"
|
||
|
|
src={article.url}
|
||
|
|
title={article.title}
|
||
|
|
></iframe>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Page;
|