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

refactor: code refactor

Browse Source
This commit is contained in:
Andrea 2023-03-06 14:34:18 +01:00
parent 991136825d
commit 0fc8c40fed
No known key found for this signature in database
GPG Key ID: 4594610B9C8F91C5
4 changed files with 44 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/components/Link.tsx Normal file
View File

@ -0,0 +1,11 @@
import { Link as RemixLink } from "@remix-run/react";
type LinkProps = React.PropsWithChildren<{ to: string }>;
export function Link({ to, children }: LinkProps) {
return (
<RemixLink to={to} className="mt-5 hover:text-[#e6c2bf] text-xl font-bold">
{children}
</RemixLink>
);
}

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

@ -9,8 +9,7 @@ type PostProps = {
export function Post({ title, description, id, createdAt }: PostProps) {
return (
<div className="w-full md:w-1/3">
<div className="mx-5 md:mx-0">
<div className="mx-5 md:mx-0 md:w-1/2 lg:w-1/3">
<div className="p-5 border-gray-600 border-2 rounded-lg">
<Link to={id}>
<div className="text-center font-bold">
@ -29,6 +28,5 @@ export function Post({ title, description, id, createdAt }: PostProps) {
</Link>
</div>
</div>
</div>
);
}

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

@ -1,4 +1,5 @@
import { Link, useLoaderData } from "@remix-run/react";
import { useLoaderData } from "@remix-run/react";
import { Link } from "~/components/Link";
import { findPosts } from "~/models/posts.server";
import { EmptyState } from "./EmptyState";
import { Post } from "./Post";
@ -10,29 +11,17 @@ export const loader = async () => {
export default function () {
const posts = useLoaderData<typeof loader>();
return (
<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">
<div className="h-fit w-full flex flex-col items-center">
<Link to="/">Home</Link>
</div>
</div>
</div>
<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">
<div className="mt-5 mx-5 sm:mx-0 md:text-3xl text-[#ffff00] font-bold">
<span>Here I blog about whatever get my attention</span>
</div>
</div>
</div>
{posts.length > 0 ? (
<div className="w-full">
<div className="mt-10 flex flex-col items-center space-y-5">
<div className="mt-10 w-full flex flex-col items-center space-y-5">
{posts.map((post, i) => (
<Post {...post} key={i} />
))}
</div>
</div>
) : (
<EmptyState />
)}

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

@ -1,7 +1,8 @@
import type { LoaderArgs } from "@remix-run/node";
import { Link, useLoaderData } from "@remix-run/react";
import { useLoaderData } from "@remix-run/react";
import { getMDXComponent } from "mdx-bundler/client";
import React from "react";
import { Link } from "~/components/Link";
import { findPost } from "~/models/posts.server";
import { getMdxFile } from "~/utils/posts.server";
@ -22,18 +23,13 @@ export const loader = async ({ params }: LoaderArgs) => {
export default function () {
const { post, code } = useLoaderData<typeof loader>();
const Component = React.useMemo(() => getMDXComponent(code), [code]);
const MdxComponent = React.useMemo(() => getMDXComponent(code), [code]);
return (
<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="h-fit mb-5 w-full flex flex-col items-center">
<Link to="/blog">Go Back</Link>
<div className="mt-5 text-[#ffff00] text-3xl font-bold">{post.title}</div>
<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 className="m-3 xl:w-1/2 prose dark:prose-invert prose-a:no-underline prose-a:font-bold">
<MdxComponent />
</div>
</div>
);