nullndr/website
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

chore: code update

Browse Source
This commit is contained in:
Andrea
2023-03-05 10:13:32 +01:00
parent 1b4ec1ef6d
commit 991136825d
11 changed files with 157 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/routes/_index.tsx
View File

@@ -48,7 +48,7 @@ export default function Index() {
</IconContext.Provider>
</nav>
<div className="pt-5 flex flex-col items-center text-xl">
<Link to="/blog" className="hover:text-[#e6c2bf]">
<Link to="/blog" className="hover:text-[#e6c2bf] font-bold">
Blog
</Link>
</div>

2
app/routes/blog/EmptyState.tsx
View File

@@ -1,7 +1,7 @@
export function EmptyState() {
return (
<div className="mt-5 flex flex-col items-center">
<div className="text-[#ffff00] font-bold">
<div className="mb-5 font-bold">
I haven't post anything yet! So here's a pic of my cat
</div>
<img src="/cat.jpg" className="rounded-md" />

38
app/routes/blog/Post.tsx
View File

@@ -1,31 +1,33 @@
import { Link } from "@remix-run/react";
type PostProps = {
title: string;
description: string | null;
id: string;
title: string;
createdAt: string;
description: string | null;
};
export function Post({ title, description, id, createdAt }: PostProps) {
return (
<div className="mt-5">
<div className="p-5 border-gray-600 border-2 rounded-lg">
<Link to={id}>
<div className="text-center">
<span className="text-[#ffff00] hover:text-[#e6c2bf] font-bold text-2xl">
{title}
</span>
<span className="ml-2 font-bold">{`(${new Date(
createdAt
).toLocaleDateString()})`}</span>
</div>
{description && (
<div className="mt-5 italic text-xl max-w-3xl text-center">
{description}
<div className="w-full md:w-1/3">
<div className="mx-5 md:mx-0">
<div className="p-5 border-gray-600 border-2 rounded-lg">
<Link to={id}>
<div className="text-center font-bold">
<span className="text-[#ffff00] hover:text-[#e6c2bf] text-2xl">
{title}
</span>
<span className="ml-2">{`(${new Date(
createdAt
).toLocaleDateString()})`}</span>
</div>
)}
</Link>
{description && (
<div className="mt-5 italic text-xl max-w-3xl text-center">
{description}
</div>
)}
</Link>
</div>
</div>
</div>
);

28
app/routes/blog/route.tsx
View File

@@ -10,18 +10,28 @@ export const loader = async () => {
export default function () {
const posts = useLoaderData<typeof loader>();
return (
<div className="m-5 h-max flex flex-col items-center">
<div className="hover:text-[#e6c2bf] text-xl">
<Link to="/">Home</Link>
<div className="h-fit flex flex-col items-center">
<div className="w-full">
<div className="flex flex-col items-center">
<div className="mt-5 hover:text-[#e6c2bf] lg:text-xl font-bold">
<Link to="/">Home</Link>
</div>
</div>
</div>
<div className="mt-5 lg:text-3xl">
<span>Here I blog about whatever get my attention</span>
<div className="w-full">
<div className="flex flex-col items-center">
<div className="mt-5 mx-5 sm:mx-0 lg:text-3xl text-[#ffff00] font-bold">
<span>Here I blog about whatever get my attention</span>
</div>
</div>
</div>
{posts.length > 0 ? (
<div className="mt-5 px-10 w-max">
{posts.map((post, i) => (
<Post {...post} key={i} />
))}
<div className="w-full">
<div className="mt-10 flex flex-col items-center space-y-5">
{posts.map((post, i) => (
<Post {...post} key={i} />
))}
</div>
</div>
) : (
<EmptyState />

9
app/routes/blog_.$id.tsx
View File

@@ -24,14 +24,17 @@ export default function () {
const { post, code } = useLoaderData<typeof loader>();
const Component = React.useMemo(() => getMDXComponent(code), [code]);
return (
<div className="m-5 h-max flex flex-col items-center">
<div className="hover:text-[#e6c2bf] text-xl">
<div className="h-fit w-full flex flex-col items-center">
<div className="mt-5 hover:text-[#e6c2bf] text-xl font-bold">
<Link to="/blog">Go back</Link>
</div>
<div className="mt-5 text-[#ffff00] text-3xl font-bold">{post.title}</div>
<div className="mt-10 lg:w-1/3">
<div className="m-3 lg:w-1/3 prose dark:prose-invert prose-a:no-underline prose-a:font-bold">
<Component />
</div>
<div className="mt-5 mb-5 hover:text-[#e6c2bf] text-xl font-bold">
<Link to="/blog">Go back</Link>
</div>
</div>
);
}