LumeWeb
/
web3.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: implement article page

This commit is contained in:
Derrick Hammer 2023-12-24 11:43:15 -05:00
parent 9a1a2dfecf
commit 6d6f684b47
Signed by: pcfreak30
GPG Key ID: C997C339BE476FF2
2 changed files with 44 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
app/routes/article.$cid.tsx Normal file
View File

@ -0,0 +1,44 @@
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;

27
app/routes/article.$slug.tsx
View File

@ -1,27 +0,0 @@
import { ArrowLeftIcon } from "@heroicons/react/24/outline";
// page https://www.businessinsider.com/web3-music-platforms-blockchain-even-sound-iyk-streaming-services-artists-2023-9#:~:text=Web3%20music%20platforms%20are%20combining,and%20'create%20dope%20consumer%20experiences'&text=Web3%20music%20platforms%20are%20changing,and%20ways%20to%20reach%20fans.
import React from "react";
import { Link } from "@remix-run/react";
const Page = () => {
// TODO: Explore based on the slug, we can also change the slug to be like the id or something the backend understands
// We can also pre-render the article from the backend
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="https://www.businessinsider.com/web3-music-platforms-blockchain-even-sound-iyk-streaming-services-artists-2023-9#:~:text=Web3%20music%20platforms%20are%20combining,and%20'create%20dope%20consumer%20experiences'&text=Web3%20music%20platforms%20are%20changing,and%20ways%20to%20reach%20fans"
></iframe>
</div>
</>
);
};
export default Page;