joshuafhiggins/realm-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: Update ThemePage component to lazy load theme readme

Browse Source
This commit is contained in:
Mauro Balades
2024-08-16 11:35:58 +02:00
parent a5cbac7cec
commit 21137e8d11
1 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/theme-page.tsx
View File

@@ -3,16 +3,16 @@ import { Button } from "./ui/button";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import Markdown from "react-markdown"; import Markdown from "react-markdown";
import '../app/privacy-policy/markdown.css'; import '../app/privacy-policy/markdown.css';
import { ChevronLeft, MoveLeftIcon } from "lucide-react"; import { ChevronLeft, LoaderCircleIcon, LoaderIcon, LoaderPinwheelIcon, MoveLeftIcon } from "lucide-react";
export default function ThemePage({ theme }: { theme: ZenTheme }) { export default function ThemePage({ theme }: { theme: ZenTheme }) {
const [readme, setReadme] = useState(""); const [readme, setReadme] = useState<string | null>(null);
useEffect(() => { useEffect(() => {
getThemeMarkdown(theme).then(setReadme); getThemeMarkdown(theme).then(setReadme);
}, []); }, []);
return ( return (
<div className="mt-24 lg:mt-56 flex-col lg:flex-row flex mx-auto items-start"> <div className="mt-24 lg:mt-56 flex-col lg:flex-row flex mx-auto items-start relative">
<div className="flex flex-col w-md border-r p-5 lg:p-0 lg:pr-5 mr-5 w-full md:max-w-sm relative"> <div className="flex flex-col w-md border-r p-5 lg:p-0 lg:pr-5 mr-5 w-full md:max-w-sm relative">
<img src={theme.image} alt={theme.name} className="w-full object-cover rounded-lg border shadow" /> <img src={theme.image} alt={theme.name} className="w-full object-cover rounded-lg border shadow" />
<h1 className="text-2xl mt-5 font-bold">{theme.name}</h1> <h1 className="text-2xl mt-5 font-bold">{theme.name}</h1>
@@ -40,8 +40,12 @@ export default function ThemePage({ theme }: { theme: ZenTheme }) {
<ChevronLeft className="w-4 h-4 mr-1" /> <ChevronLeft className="w-4 h-4 mr-1" />
<h3 className="text-md">Go back</h3> <h3 className="text-md">Go back</h3>
</div> </div>
<div id="policy"> <div id="policy" className="w-full">
<Markdown>{`${readme}`}</Markdown> {readme === null ? (
<LoaderCircleIcon className="animate-spin w-12 h-12 mx-auto" />
) : (
<Markdown>{`${readme}`}</Markdown>
)}
</div> </div>
<hr className="my-5" /> <hr className="my-5" />
<p className="text-muted-foreground text-sm"> <p className="text-muted-foreground text-sm">