web3.news/app/routes/article.$cid.tsx

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;